<br />
<p>Auch wenn 2011 noch lange nicht zu Ende ist, gehört dieses <a title="Les Paul Doodle im Archiv von Google" href="http://www.google.com/logos/2011/lespaul.html">Google Doodle</a> für mich schon jetzt klar auf die Sonnenseite: Zum Geburtstag des Gitarristen und Erfinders <a title="Artikel zu Les Paul in Wikipedia" href="http://de.wikipedia.org/wiki/Les_Paul">Les Paul</a> hat Google sein Logo in eine spielbare Gitarre verwandelt.</p>
<p>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 <a href="http://www.google.com/logos/2011/lespaul.html#hl=en&tune=IBBQIQkgVFCOUEIQRSjlEqEEEo4RCgFFKEESoBQQhFAqOEQJApQSjhEqGEIVBQISkgVFCOUEIRSCiQhEqEQUw4wCUkChCYBUUIRQShhEJKUMIlRAgjCKQUSEJIFRQjlHGIEAgJhKkRFBCJUgYoIRKkhFBKJEhIYFRAjlCGMIhggA">“Here Comes the Sun“</a>.</p>
<p>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.</p>
<p>Ich liebe Dinge, die sich durch das bloße Benutzen sofort selber erklären!</p>
Unter der Haube
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p><canvas>, Bezierkurven und Gameloop: Vom Grundgedanken ist die Gitarre damit fertig.<br />
Schönes kann so einfach sein, nur darauf kommen muss man.</p>
Zum Autor
<p>Bastian Sackermann arbeitet als Webentwickler bei <a href="http://portunity.de">Portunity</a> in Wuppertal. Neben PHP, HTML und CSS ist Javascript seine Lieblingsspielwiese.<br />
Bastian twittert als <a href="http://twitter.com/samisdat">@Samisdat</a>.</p>
Zur Aktion
<p>Dies ist ein Text zur Aktion <a href="http://www.webkrauts.de/category/sonnenseiten/">Sonnenseiten</a>: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.</p>