Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: Les Paul

Sonnenseiten: Les Paul

Das Google Doodle zum Geburtstag von Les Paul gehört für Bastian Sackermann zu den Sonnenseiten: Die funktionierende Gitarre ist einfach und intuitiv zu spielen, und die Technik dahinter ist ebenso interessant.

Screenshot des Google Doodles
Saite

Auch wenn 2011 noch lange nicht zu Ende ist, gehört dieses Google Doodle für mich schon jetzt klar auf die Sonnenseite: Zum Geburtstag des Gitarristen und Erfinders Les Paul hat Google sein Logo in eine spielbare Gitarre verwandelt.

Auf 474*75 Pixeln lassen unterschiedlichste Techniken das Entwicklerherz höher schlagen: Flash, CSS-Sprites, AJAX, <canvas> und Javascript. Aber auch normale User lieben die Gitarre offensichtlich und haben in den ersten 48 Stunden 40 Millionen Songs aufgenommen, u.a. Perle wie »Here Comes the Sun«.

Google-typisch ist die Gitarre grafisch sehr reduziert, so sehr, dass ich auf den ersten, flüchtigen Blick nicht sofort erkannt habe, was ich da vor mir habe. Aber sobald ich mit der Maus drüber war, wusste ich durch den Sound und die Schwingung der Saiten intuitiv, was es ist und wie ich es benutzen kann.

Ich liebe Dinge, die sich durch das bloße Benutzen sofort selber erklären!

Unter der Haube

Nachdem ich mir angesehen habe, wie die Gitarre funktioniert, war ich selber erstaunt, mit wie wenig man das umsetzen kann. Die beweglichen Teile der Gitarre bestehen aus einem <canvas> Element. Das ist Bestandteil von HTML5 und quasi eine Leinwand, auf die wir mit Javascript zeichnen können. Wir bekommen auch direkt einige fertige Werkzeuge zum Zeichnen mit u.a. Bezierkurven. Jede Saite ist nichts weiter als eine solche Kurve mit festem Anfang und Ende; lediglich die Mitte wird für die Schwingung der Seite nach oben oder unten verschoben.

Diese Kurve ist der eine Trick bei der Gitarre, der andere ist die Technik der Animation. Diese kommt aus der Spieleentwicklung und heißt dort Gameloop. Der Gameloop wird nun 30 mal pro Sekunde durchlaufen: Zunächst wird für jede einzelne Saite festgestellt, um wieviel die Mitte verschoben werden muss. Dann werden alle Saiten gezeichnet.

Für die Berechnung sind prinzipiell nur zwei Fragen entscheidend: Hat der Benutzer die Saite mit der Maus berührt oder die entsprechende Taste gedrückt? Dann soll die Saite anfangen zu schwingen. Oder schwingt die Saite bereits? Dann soll sie weiter schwingen, aber pro Durchlauf etwas weniger, bis sie wieder in der Ruheposition ist.

<canvas>, Bezierkurven und Gameloop: Vom Grundgedanken ist die Gitarre damit fertig.
Schönes kann so einfach sein, nur darauf kommen muss man.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Die Kommentare sind geschlossen.