Interactief particle logo

dinsdag, september 27th, 2011 09:24

Samen met Bela Zsigmond is Sebastix begin dit jaar een experimentele uitdaging aangegaan: het ontwerpen en realiseren van een interactief logo / website met een particle system voor Architectune. Doel van dit experiment was om een aantal proof-of-concepts uit te werken in een webomgeving. Het concept waaruit we zijn vertrokken bestaat uit een interventie tussen een grafisch gedeelte (particles), audio én de interactie tussen de kijker/bezoeker en logo/website.

Vertrekpunt
In zo’n uitdaging ga je op zoek naar bestaande uitwerkingen met interactieve particle systems. Zelf heeft Sebastix al ervaring in Processing.org met de realisatie van een interactieve installatie ATTACK. Andere bronnen die we hebben geraadpleegd:
MTV ID 2009 logo
Google interactive bubble logo
Particle system in HTML5 canvas
Javascript Particle demo
Processing.js particle system
Interactive particles HTML5 canvas
Flash particles systems

Experiment


Het bovenstaande in actie op een webpagina (Processing.js framework)

Klik hier voor nog een demo, nog een en nog een (heavy!)
Klik hier voor een HTML5 canvas ripple demo

Realisatie
Vanaf het begin heeft Sebastix bewust gekozen voor de nieuwste webtechnologieën om het geheel in te ontwikkelen. Technologie die klaar is voor de toekomst en werkt op verschillende apparaten (mobiel, tablets, applicaties). Hieronder staat een demo (in ontwikkeling) waarin je met je muis over het grid gaat en de punten groeien. Ook zijn er drie knoppen (strategy, theory, history) die een moment een geluid activeren. Deze knoppen zijn niet klikbaar, maar dit is wel de bedoeling om vervolgens een nieuwe pagina te openen.


In de doorontwikkeling zou het de bedoeling zijn dat de knoppen niet zichtbaar zijn (maar wel hoorbaar, afhankelijk van hoever je met je muis verwijderd bent van een knop), het grid een herkenbare A-vorm krijgt, het grid niet zichtbaar is wanneer je niets doet met je muis, het grid bijna volledig zichtbaar is als je tussen alle knoppen in staat, de punten lichtjes at-random van positie veranderen en nog aantal andere kleine details. Tevens is het de bedoeling om het geheel volledig in het HTML5 canvas element te realiseren (in plaats van met losse HTML elementen zoals het nu werkt) om performance problemen te voorkomen op de wat oudere computers.

Een nieuwe type technisch web staat al een tijdje voor de deur. Bovenstaande experimenten zijn slechts een kleine greep uit wat er mogelijk is vanuit die techniek. Hebben jullie nog inspirerende voorbeelden uit de praktijk of misschien juist vragen over hoe andere toepassingen werken?