Browser-Zauber

Programmierwettbewerb zum 30. Geburtstag der c’t

Wissen | Know-how

Es muss nicht immer Maschinencode sein – der Chrome-Browser bietet mit seiner schnellen JavaScript-Engine sowie 2D- und 3D-Grafik-APIs eine prima Plattform für imposante Animationen. Schreiben Sie eine Demo dafür und vielleicht gewinnen Sie damit ein schniekes Tablet.

Klassischerweise laufen Demos als eigenständige Anwendungen, sind in Assembler/C/C++ programmiert und greifen tief in die DirectX- oder OpenGL-Trickkiste. Ihr Nachteil: Sie laufen (wenn sie der Virenscanner nicht bereits wegen möglicherweise enthaltenen Schadcodes abgelehnt hat) immer nur auf einem bestimmten Betriebssystem. Doch das muss nicht sein – mit dem Browser als Laufzeitumgebung. Darum unser Aufruf an Sie: Reizen Sie ihn mit einer fetzigen Demo aus und sichern sich damit die Aussicht auf ein iPad oder Nexus-Tablet. Die Rahmenbedingungen:

 Die Demo muss in der aktuellen Desktop-Version des Chrome-Browsers lauffähig sein, gegebenenfalls mit nicht standardmäßig gesetzten Optionen in chrome://flags, zum Beispiel zum Aktivieren von WebGL. Schreiben Sie uns bitte zu Ihrer Einsendung, welche das sind.

 Sofern sie nicht größer als 10 MByte ist, schicken Sie Ihre Demo bitte als komprimierte Archivdatei (ZIP, tar.gz …). Größere Demos stellen Sie uns freundlicherweise über einen Download-Link zur Verfügung und mailen nur diesen. Wir werden das Archiv auf unserem Webserver entpacken und veröffentlichen. Besucher können die Demos online bewerten.

 Das Browser-Fenster, in dem Ihre Demo ablaufen soll, wird zum Start 1024 × 768 Pixel groß sein. Sie können es danach aber per JavaScript (window.resizeTo()) an die gewünschte Größe anpassen.

 In maximal einer Minute muss die Demo alles gezeigt haben. Die Uhr läuft von dem Zeitpunkt, an dem der Browser die benötigten Daten geladen hat. Das Nachladen per XMLHttpRequest oder mit ähnlichen Techniken ist erlaubt.

 Alle nachzuladenden Daten müssen über relative Pfade angesprochen werden. Cross-Domain-Scripting oder das Abholen via absolute URLs ist nicht erlaubt.

Welche Techniken Sie einsetzen, ist egal. 3D- oder 2D-Animationen und -Effekte mit WebGL oder SVG sind genauso willkommen wie animierte GIFs und per CSS3 transformierte HTML-Elemente. Chrome kann das alles. Wer lieber in C/C++ programmiert, kann die Demo auch gerne mit Hilfe von Chromes Native Client SDK implementieren [1].

Inspiration

Video: Geburtstagswünsche von der Nyan c’t

Wir haben uns den Spaß erlaubt und die hoffentlich nicht nur Katzenliebhabern bekannte, überaus nervige Nyan Cat (www.nyan.cat) geklont: Unsere Demo, die die meisten der erwähnten Techniken verwendet, trägt daher den Namen Nyan c’t. Das Aufmacherbild zeigt einen Schnappschuss davon. In Gänze können Sie sie über den c’t-Link am Artikelende betrachten.

Für Ihre eigene Demo ist es übrigens kein Muss, dass darin ein Geburtstagsgruß, eine Katze oder Ähnliches erscheint. Aber wer weiß, vielleicht möchte die c’t-Redaktion neben der Leserwertung ja noch einen eigenen Sieger küren – wofür es allerdings wahrscheinlich nur Ruhm und Ehre zu ernten gibt.

Wie das Original ist die c’t-Katze ganz Oldschool ein animiertes GIF. Den Großteil davon haben wir von der Vorlage übernommen, jedoch mit einer eigenen Animation versehen: Der Körper zeigt nun ein Terminalfenster, das sich von Frame zu Frame mit Zeichen füllt, und obenauf tanzt ein leckeres Stück Sahnetorte, natürlich mit Cocktail-Kirsche. Die Katze tippelt auf einem mit sämtlichen c’t-Titelseiten chronologisch gepflasterten Weg, der per CSS3-Animation in Bewegung gesetzt wird, und zwar per CSS3-Attribut animation-timing-function: steps(…) absichtlich holprig, damit sie mit dem Hopsen der Katze harmoniert [2, 3, 4].

Während die Bilder geladen werden, dient der Weg als Fortschrittsbalken, optisch in Szene gesetzt mit einer Barber-Pole-Illusion (im Aufmacherbild leider nicht zu sehen). Bei ihr entsteht der Eindruck der schraubenförmigen Drehung durch das per CSS3-Animation gesteuerte pixelweise Verschieben eines im 45-Grad-Winkel Heise-like blau und hellbau breitgestreiften Hintergrunds.

Die über den Bildschirm fliegenden Sterne sind SVG-Elemente, die in Intervallen von 50 Millisekunden auf zufälliger Höhe am rechten Bildschirmrand erscheinen. Den Impuls nach links erhalten sie über das Tag <animateMotion … />, die Drehung per <animateTransform attributeName="transform" type="rotate" from="0" to="-120" …/>. Durch <animate attributeName="opacity" from="1" to="0" /> verblassen sie im Flug.

Bei der originalen Nyan Cat besteht der Schweif aus <div>-Elementen, die rhythmisch rauf- und runterspringen und so den Eindruck eines wehenden Banners erwecken. Im Grunde reichte das, zu Demonstrationszwecken sahen wir uns aber genötigt, ein wenig technischen Overkill zu betreiben: Das Flattern nebst Schattierung berechnet jetzt ein WebGL-Shader aus einem Bild, das er als Textur erhält [5].

Das und noch mehr

varying vec2 vTexCoord;
uniform sampler2D uBanner;
uniform float uT;
const float WaveLen = 11.0;
const float Speed = 11.0;

float stepwise(float x, int steps) {
  return floor(x * float(steps)) / float(steps);
}

void main() {
  float x = stepwise(vTexCoord.x, 17) * WaveLen;
  float offset = 0.15 * sin(Speed * uT + x);
  offset = stepwise(offset, 16);
  float shadow = 1.0
     + sin(Speed * uT + vTexCoord.x * WaveLen) / 3.0;
  vec4 color = texture2D(uBanner,
    vec2(vTexCoord.x, vTexCoord.y + offset));
  float endshadow = clamp(6.0 * vTexCoord.x * color.a, 0.0, 1.0);
  gl_FragColor = vec4(color.rgb * shadow, endshadow * color.a);
}
Ein einfacher Fragment-Shader, gespeist mit den Sekunden seit Programmstart in der Variablen uT und der Textur in uBanner sowie der aktuellen Texturkoordinate in vTexCoord, versetzt die Bannergrafik in Bewegung.

Zur Manifestation des hektischen Charakters unserer Nyan-c’t-Demo spielt ein <audio>-Element die um den Faktor Wurzel 2 beschleunigte Fassung eines alternativen, unter der Creative-Commons-Lizenz frei erhältlichen Geburtstagslieds ab. Das originale „Happy Birthday to You“ ist ja leider noch drei Jahre lang urheberrechtlich geschützt. Gemeinfreie Musik finden Sie übrigens bei freemusicarchive.org, Klänge bei freesound.org.

Die Demo ist wegen ihrer Beschränkung auf 2D ziemlich flach. Okay, vielleicht auch, was die Idee angeht. Aber das können Sie ja besser machen. Und mit WebGL lassen sich auch Kunststückchen in drei Dimensionen darbieten. Die wohl mächtigste JavaScript-Bibliothek für diesen Zweck ist three.js. Ähnlich umfangreich, wenn auch mehr für Spieleprogrammierung ausgelegt, ist impact.js. Wenn Ihr WebGL-Code mal Zicken macht, hilft Ihnen der WebGL Inspector bei der Fehlersuche (alle Downloads via c’t-Link).

Preise und Termine

So, nun ran an die Tasten. Denn es gibt auch etwas zu gewinnen. Der Schöpfer der Demo mit den meisten Stimmen bekommt von uns ein Tablet, wahlweise ein Google Nexus 10 (32 GByte) oder ein iPad 4 (16 GByte). Der Zweitplatzierte darf zwischen einem iPad mini (16 GByte, WLAN) und einem Nexus 7 (32 GByte, UMTS) wählen. Außerdem erhalten die ersten Drei die komplette c’t-Historie („c’t rom“) auf Blu-ray nebst Leselaufwerk sowie ein Jahresabo eines Magazins aus dem Heise Zeitschriften Verlag nach Wunsch.

Einsendeschluss ist der 29. Mai 2013. Zwei Tage später geht die Auswertungsseite online, auf der jedermann die Demos betrachten und bewerten kann. Wer gewonnen hat, erfahren Sie voraussichtlich in c’t 15/13. Die endgültigen Teilnahmebedingungen finden Sie unter http://ct.de/mitmachen. (ola)

Literatur
  1. [1] Oliver Lau, Mit Pfeffer und Salz, Chrome-Plug-ins mit C/C++ entwickeln, c’t 10/12, S. 184
  2. [2] Oliver Lau, Taktgeber, Bedienoberflächen mit dem HTML5-Canvas-Element gestalten, c’t 11/11, S. 180
  3. [3] Oliver Lau, Action ohne Skript, HTML-Elemente animieren – nur mit Cascading Style Sheets, c’t 17/12, S. 172
  4. [4] Oliver Lau, Web mit Tiefgang, 3D-Transformationen und -Animationen mit HTML und CSS, c’t 18/12, S. 178
  5. [5] Oliver Lau, Web auf Speed, Schnelle 2D-Grafiken im Browser mit WebGL, c’t 11/12, S. 182
  6. [6] Oliver Lau, Würze fürs Web, Verteiltes Rechnen mit JavaScript, c’t 9/12, S. 190

Artikel kostenlos herunterladen

weiterführende Links

Kommentare

Anzeige