Wir haben im team an der HTML5 doodle challenge, anlässlich des google developer days 2011 in Berlin, eine kleine HTML5 Demo eingereicht.
Hier habe ich ein paar screenshots gesammelt wie es entstanden ist und die ersten prototypen der einzelnen Module bis hin zum Endergebnis.
Alles fing mit der doodle Grafik an welche uns als Ausgangspunkt diente. Dies war eine DymaxionMap in "blau" ;) Und da ich ein Mensch der Taten bin habe ich mir dieses Wunderwerk direkt ausgedruckt und ein 3D Model aus Papier gebastelt.
Nach dem Papier Modell folgten diverse Überlegungen was wir denn nun daraus machen sollten.
Recht schnell stand fest, daran war mit sicherheit das Papiermodell schuld, dass wir ein 3D Modell der Dymaxion Karte hinzufügen möchten. Und dies mit CSS3 umsetzen werden.
Dann ging es schlag auf schlag, danach kam dann die Idee dass wir Musik dabei haben möchten und wo doch schonmal die Musik dabei ist da kann doch das Modell sich zur Musik bewegen.
Als erstes Modell für die Musik musste ein "Würfel" herhalten ( ich war ja schließlich nicht für die 3D darstellung der Dymaxion Karte zuständig ) bei welchem sich jedes Seitenteil zu einer anderen "Kanal" bewegt.... Hier habe ich auch ein Bild vom ersten "Analyser" Prototypen,
( was man nicht hören kann hier: "invaders must die von the prodigy" )
Hierbei wollte ich einfach nur schauen ob ich auch tatsächlich auf alle "Kanäle" des mp3`s zugreifen kann via Audio API. Damit das im Chrome klappt musste ich die Datei als "arrayBuffer" via xmlhttpRequest anziehen und danach via "Javascript-Audio-Api" selbst abspielen. Also der Sound wird mittels JavaScript erzeugt auf Grundlage des MP3 Files welches nun in einem Array liegt.
Um das zu sehen habe ich im HTML einfach zu per JS für jeden Kanal eine "div" Box erstellt und verändere dazu die "Breite" der Box on the fly.
Als nächstes kam uns die Idee dass wir die "nyan cat", warum auch immer, vermutlich lag es am Schlafdefizit von uns, einbauen mussten.
Und die nyan cat soll um das 3D Modell der Karte fliegen, wie ein kleiner "sputnik" im Orbit. Und da es noch schöner aussieht wenn es Nacht ist wollte ich unbedingt "Sterne" hinzufügen.
Da ich ein "fauler" Mensch bin wie die meisten ITler *fg*, wollte ich auf keinen Fall jeden Stern selbst positionieren und ebenfalls verspürte ich keine große Lust einen Stern überhaupt in einem Grafikprogramm zu "malen".
Also entschied ich mich für die Javascript/canvas/random variante. Ich erstelle immer einen grundstern in einem canvas welches dann einer "sternenBox" als child hinzugefügt wird. Damit es nicht zu langweillig wird werden die Sterne per zufallsgenerator positioniert und die Größe verändert. Die größe wird mittels
"-webkit-transform: scale()" beinflusst. Damit man später auch einen schönen ein/aus blend-Effekt hat.
Hier sieht man nun einfach die "sterne" auf einem dunkelblauen Hintergrund. Und in der Konsole sind die Dynamisch erzeugten "canvas" Elemente zu sehen.
Wenn die Sterne wieder ausgeblendet werden dann bekommen diese einen scale Faktor von 0 und werden erst nach der Transformation per JavaScript aus dem DOM gelöscht.
Nun war auch das 3D Modell fertig und es wurde langsam Zeit die ersten "dinge" zu mergen, ein Bild nach dem ersten Merge:
( hier ist noch der chrome Taskmanager zu sehen. Chrome Version: 14.0.835.18 dev )
Nun sieht man schon dass die Karte in 3D zu sehen ist und sich zur Musik die einzelteile bewegt. Nicht zu sehen ist die Drehung um seinen eigenen Mittelpunkt ;).
Zu guter letzt musste das doodle noch ein Thema bekommen. Die Vorgabe war Deutschland. Und da es ein google contest war dachte ich sofort an Deutsche Wissenschaftler, und was wir daraus gemacht haben kann hier begutachtet werden:
( man sollte dies mit einem chrome anschauen ;) )
russenreaktor.github.com/gddHTML5doodle/
Hier habe ich ein paar screenshots gesammelt wie es entstanden ist und die ersten prototypen der einzelnen Module bis hin zum Endergebnis.
Alles fing mit der doodle Grafik an welche uns als Ausgangspunkt diente. Dies war eine DymaxionMap in "blau" ;) Und da ich ein Mensch der Taten bin habe ich mir dieses Wunderwerk direkt ausgedruckt und ein 3D Model aus Papier gebastelt.
Nach dem Papier Modell folgten diverse Überlegungen was wir denn nun daraus machen sollten.
Recht schnell stand fest, daran war mit sicherheit das Papiermodell schuld, dass wir ein 3D Modell der Dymaxion Karte hinzufügen möchten. Und dies mit CSS3 umsetzen werden.
Dann ging es schlag auf schlag, danach kam dann die Idee dass wir Musik dabei haben möchten und wo doch schonmal die Musik dabei ist da kann doch das Modell sich zur Musik bewegen.
Als erstes Modell für die Musik musste ein "Würfel" herhalten ( ich war ja schließlich nicht für die 3D darstellung der Dymaxion Karte zuständig ) bei welchem sich jedes Seitenteil zu einer anderen "Kanal" bewegt.... Hier habe ich auch ein Bild vom ersten "Analyser" Prototypen,
( was man nicht hören kann hier: "invaders must die von the prodigy" )
Hierbei wollte ich einfach nur schauen ob ich auch tatsächlich auf alle "Kanäle" des mp3`s zugreifen kann via Audio API. Damit das im Chrome klappt musste ich die Datei als "arrayBuffer" via xmlhttpRequest anziehen und danach via "Javascript-Audio-Api" selbst abspielen. Also der Sound wird mittels JavaScript erzeugt auf Grundlage des MP3 Files welches nun in einem Array liegt.
Um das zu sehen habe ich im HTML einfach zu per JS für jeden Kanal eine "div" Box erstellt und verändere dazu die "Breite" der Box on the fly.
Als nächstes kam uns die Idee dass wir die "nyan cat", warum auch immer, vermutlich lag es am Schlafdefizit von uns, einbauen mussten.
Und die nyan cat soll um das 3D Modell der Karte fliegen, wie ein kleiner "sputnik" im Orbit. Und da es noch schöner aussieht wenn es Nacht ist wollte ich unbedingt "Sterne" hinzufügen.
Da ich ein "fauler" Mensch bin wie die meisten ITler *fg*, wollte ich auf keinen Fall jeden Stern selbst positionieren und ebenfalls verspürte ich keine große Lust einen Stern überhaupt in einem Grafikprogramm zu "malen".
Also entschied ich mich für die Javascript/canvas/random variante. Ich erstelle immer einen grundstern in einem canvas welches dann einer "sternenBox" als child hinzugefügt wird. Damit es nicht zu langweillig wird werden die Sterne per zufallsgenerator positioniert und die Größe verändert. Die größe wird mittels
"-webkit-transform: scale()" beinflusst. Damit man später auch einen schönen ein/aus blend-Effekt hat.
Wenn die Sterne wieder ausgeblendet werden dann bekommen diese einen scale Faktor von 0 und werden erst nach der Transformation per JavaScript aus dem DOM gelöscht.
Nun war auch das 3D Modell fertig und es wurde langsam Zeit die ersten "dinge" zu mergen, ein Bild nach dem ersten Merge:
( hier ist noch der chrome Taskmanager zu sehen. Chrome Version: 14.0.835.18 dev )
Nun sieht man schon dass die Karte in 3D zu sehen ist und sich zur Musik die einzelteile bewegt. Nicht zu sehen ist die Drehung um seinen eigenen Mittelpunkt ;).
Zu guter letzt musste das doodle noch ein Thema bekommen. Die Vorgabe war Deutschland. Und da es ein google contest war dachte ich sofort an Deutsche Wissenschaftler, und was wir daraus gemacht haben kann hier begutachtet werden:
( man sollte dies mit einem chrome anschauen ;) )
russenreaktor.github.com/gddHTML5doodle/
Kommentare