SERIENBEITRAG ·
Signatur – eine Amiga-Hommage
Chromschrift, Sinuswellen und Acid-Techno: Eine Hommage an die Amiga-Demozeit – und die vielen Iterationen, bis Musik, Licht und Bewegung zusammenfinden.
Für die Älteren unter euch, die noch einen Amiga kennen, dürfte bei dieser Demo einiges vertraut wirken: glänzende Schriftzüge, Buchstaben auf Sinusbahnen und Bewegungen, die genau auf die Musik abgestimmt sind. Vielleicht kommt dabei auch ein Stück des Gefühls von damals zurück.
Die Signatur-Demo ist meine Hommage an diese Zeit. Die Musik und die Bewegungen sind von meinen Erinnerungen an die Amiga-Demos inspiriert. Dieses Zusammenspiel wollte ich in den Browser holen – mit Chrom, Acid-Techno und einem Schwarzen Loch im Hintergrund. Wer den Amiga nur vom Hörensagen kennt, kann die kleine Show auch ohne diese Erinnerung entdecken.
Bis das so aussah, wie ich es haben wollte, brauchte es viele Iterationen. Eine Bewegung konnte technisch richtig sein und trotzdem nicht gut wirken. Ein Reflex war zu hart, ein Übergang zu hektisch, der Sog zu schnell oder der Drop noch nicht kräftig genug. Mir war wichtig, dass die Demo gut aussieht und als kleine Show funktioniert. Deshalb ging es immer wieder zurück an Timing, Licht und Bewegung.
Die Show erleben
Die Show dauert rund eine Minute. Mit Musik wird am deutlichsten, warum sich der Schriftzug gerade zusammenzieht, auffächert oder nach vorn springt: Was zunächst wie ein grafischer Effekt wirkt, antwortet auf einen musikalischen Einsatz.
Der Schriftzug lässt sich auch anfassen: Mit gedrückter linker Maustaste kann man das Metall ziehen. Benachbarte Bereiche geben weich nach, beim Loslassen federt es zurück. Das funktioniert schon im Startbild. Während der Kameranahaufnahme ist das Greifen deaktiviert; sonst tritt die automatische Choreografie beim Festhalten vorübergehend zurück.
Die Choreografie
Der Anfang lässt sich Zeit. Tiefe Impulse, Streicher und ein anschwellender Klangraum begleiten die Kamerafahrt auf den Namen. Mit dem Logo-Impact kippen die ersten Buchstaben nacheinander. Der erste Drop eröffnet den eigentlichen Techno-Teil mit 128 BPM.
Danach wechseln sich Figuren in musikalischen Phrasen ab: ein Chrom-Vortex, ein Sinus-Scroller, ein Karussell und wirbelndes Schweben. Im Break zieht sich der Name zusammen. Der zweite Drop zerlegt ihn räumlich, bevor die Buchstaben wieder zusammenfinden und hüpfen. Das Finale bringt Wellen und Drehungen zurück, bevor die Schrift ins Schwarze Loch gezogen wird.
Gerade die Sinusbewegung und die nacheinander kippenden Buchstaben tragen für mich die Erinnerung an die Amiga-Demos. Die heutige Technik gibt dem Ganzen eine andere Oberfläche: Die Schrift besitzt Volumen, spiegelt ihre Umgebung und lässt sich elastisch verformen.
| Abschnitt | Musik | Bewegung |
|---|---|---|
| Auftakt | Filmischer Auftakt, Logo-Impact und Aufbau | Kamerafahrt, Schweben und erste Domino-Flips |
| Erster Drop | Rollbass und Acid-Linie | Vortex, Sinus-Scroller und Flüssigmetall |
| Break | Lead-Hook, dann zurückgenommener Break und neuer Aufbau | Karussell, Schweben und Zusammenziehen |
| Zweiter Drop | Voller Groove und Finale | Explosion, Zusammenbau, Hüpfen und Spins |
| Ausklang | Schlussakkord, Hall und letzter Impact | Einsog, Aufglühen der Scheibe und Schwarzblende |
Eine Uhr für Bild und Ton
Die Musik ist keine hinterlegte Audiodatei. Die Web Audio API erzeugt den gesamten Track im Browser: vom filmischen Auftakt über Kick und Rollbass bis zur resonanten Acid-Linie, Arpeggios und dem Schlussakkord. Hall und ein zwischen den Stereokanälen wanderndes Delay geben den synthetischen Instrumenten Raum.
Für die Abstimmung von Klang und Bild ist die gemeinsame Zeitbasis entscheidend. Mit Ton liefert der Audiokontext die Uhr für die Show. Im stummen Durchlauf übernimmt eine lokale Uhr. Die Bewegungsregie weiß dadurch, wo die Musik gerade steht, und setzt ihre Figuren an denselben Stellen ein.
Jede Figur besitzt ein Zeitfenster. Die Übergänge überlappen sich: Eine Bewegung klingt bereits ab, während die nächste stärker wird. Die Buchstaben erhalten daraus ihre Position, Drehung und Skalierung. So können mehrere einfache Bewegungen zusammen eine fließende Choreografie ergeben.
export const BPM = 128;
export const BEAT = 60 / BPM;
export const BAR = BEAT * 4;
export const PHRASE = BAR * 4;
export const INTRO = 12;
export const TRACK_BARS = 24;
export const TRACK_END = INTRO + TRACK_BARS * BAR;
export const DURATION = TRACK_END + 6;Dieser Auszug aus der Zeitbasis ist für die Lesbarkeit umformatiert. Aus dem Tempo ergeben sich Beats, Takte und Phrasen. Musik und Choreografie verwenden dieselben Zeitgrößen; Auftakt und Ausklang rahmen den Track ein.
Eine Welle aus Buchstaben
Für den Sinus-Scroller bekommt jeder Buchstabe dieselbe Bewegung, aber eine andere Phase. Der Buchstabenindex bestimmt den Versatz innerhalb der Welle. Die Zeit lässt sie durch den Namen wandern. In der Signatur-Demo bewegt sich die Schrift dabei auch in die Tiefe, sodass sie sich räumlich auffächert.
const wave = state.wave;
if (wave) {
const phase = i * .95 - t * 4.4;
pose.y += wave * .85 * Math.sin(phase);
pose.z += wave * .9 * Math.cos(phase);
pose.rx += wave * .35 * Math.sin(phase);
pose.rz += wave * .22 * Math.cos(phase);
}i ist der Buchstabenindex, t die Zeit und wave die aktuelle Stärke der Figur. Sinus und Kosinus lassen Höhe, Tiefe und Drehung versetzt schwingen. Schon diese wenigen Zeilen erzeugen die Wellenbewegung; die Überblendung mit anderen Figuren und die wandernden Metallreflexe machen daraus die fertige Szene.
Chrom braucht Licht
Die Buchstaben sind eigene dreidimensionale Körper. Ihre Formen entstehen aus weich verbundenen Strichen, die in eine geschlossene Oberfläche umgewandelt werden. Ein gemeinsames Chrommaterial hält den Namen optisch zusammen, auch wenn sich seine Teile unabhängig bewegen.
Metall lebt von seiner Umgebung. Große berechnete Studiolichtflächen zeichnen helle Bänder auf die Rundungen; eine gespiegelte Kamera liefert die Bodenspiegelung. Die Lichtbänder wandern langsam über die Körper und machen ihre Wölbungen sichtbar.
Hier lag ein wesentlicher Teil der Iterationen: Die Schrift sollte räumlich und weich aussehen, gleichzeitig aber lesbar bleiben. Während der bewegten Choreografie weicht der Spiegelboden. Das gibt den Buchstaben Platz und verhindert, dass Körper und Spiegelbild unübersichtlich ineinanderlaufen.
Metall zum Anfassen
Beim Ziehen soll kein einzelner Punkt aus der Schrift herausbrechen. Ein weiches Einflussfeld nimmt die Umgebung mit: nahe am Griff stark, weiter entfernt immer schwächer. Im Shader reichen dafür wenige Zeilen aus der Verformungsfunktion.
vec3 delta = vec3(
x - uGrabPoint.x,
p.y - uGrabPoint.y,
(p.z - uGrabPoint.z) * .35
);
float influence = exp(
-dot(delta, delta) / (uGrabRadius * uGrabRadius)
);
q += uGrabOffset * influence;Der Abstand zum Griff geht in eine Gaußfunktion ein. uGrabRadius bestimmt, wie weit die Verformung reicht; uGrabOffset beschreibt den Zug. Beim Loslassen sorgt ein Feder-Dämpfer-Modell für das Rückschwingen. Dieser Teil ist im Browser unmittelbar spürbar: Man kann die Schrift aus ihrer Show herausgreifen und kurz selbst bewegen.
Der letzte Sog
Das Schwarze Loch greift Technik aus der Ereignishorizont-Demo wieder auf. Gekrümmte Lichtbahnen und die leuchtende Akkretionsscheibe bilden den Hintergrund der Schrift. Hier ist die Farbwelt dunkel und silberblau; die geneigte Scheibe bewegt sich hinter den Chromkörpern.
Es bleibt nicht bei einer Kulisse. Sterne strömen von den Bildschirmrändern zum Loch, wechseln an der Scheibe von kühlem Weiß zu warmer Glut und verschwinden im dunklen Horizont. Auf den Drops antworten Scheibe und Metall mit einem gemeinsamen Lichtimpuls. Die Reflexion der Scheibe erscheint auf den passend ausgerichteten Flächen der Buchstaben.
Im Schlussabschnitt zieht der Sog zuerst an den zugewandten Kanten. Dann folgen die ganzen Buchstaben mit leichtem Versatz. Sie werden gedehnt, verdreht und auf unterschiedlichen Bahnen eingezogen. Nach dem Verschwinden der Schrift glüht die Scheibe auf, ein letzter Ausbruch setzt den Schlusspunkt und die Szene fällt ins Schwarz.
Feinarbeit in Iterationen
Bei den Überarbeitungen kam es oft auf das Zusammenspiel mehrerer Details an. Die Sterne sollten den Blick zum Loch führen, während die Schrift lesbar blieb. Der Drop brauchte Gewicht, die Kamera sollte dabei Orientierung lassen. Solche Entscheidungen ließen sich erst in der laufenden Show beurteilen.
Solche Änderungen betreffen selten nur einen Regler. Wird eine Drehung schneller, verändert das die Lesbarkeit. Mehr Licht macht Chrom deutlicher, kann aber den dunklen Raum überstrahlen. Ein stärkerer Ausschlag wirkt nur dann musikalisch, wenn Vorbereitung und Rückkehr ebenfalls passen. Deshalb bestand die Arbeit immer wieder aus Ansehen, Nachjustieren und noch einmal Ansehen.
Auch die Rechenzeit setzt Grenzen. Die Demo passt ihre Auflösung an die Bildzeit an und begrenzt die Größe aufwendiger Reflexions- und Hintergrundberechnungen. Bei aktivierter Einstellung für reduzierte Bewegung entfallen die automatischen Drehungen und Kamerafahrten; Lichtimpulse werden abgeschwächt.
| Detail | Worauf es bei der Überarbeitung ankam |
|---|---|
| Sternenfahrt | Den Blick zum Loch führen, ohne die Schrift zu überholen |
| Drops | Zusammenziehen, Ausschlag und Rückkehr aufeinander abstimmen |
| Chrom | Kräftige Reflexe erhalten und den Namen lesbar lassen |
| Schluss | Erst die Kanten strecken, dann die Buchstaben einziehen |
| Übergänge | Figuren überblenden, damit keine Bewegung unvermittelt springt |
Eine Bewegung konnte technisch richtig sein und trotzdem noch nicht gut wirken.
Was für mich davon bleibt
Bei der Signatur-Demo war die Abstimmung der einzelnen Teile mindestens so wichtig wie die Effekte selbst. Eine Welle braucht einen passenden Einsatz, Chrom braucht lesbare Reflexe und ein Drop braucht Vorbereitung. Ob das zusammen funktioniert, lässt sich erst beim Ansehen und Hören beurteilen. Deshalb waren die vielen Iterationen für mich ein wesentlicher Teil der Gestaltung.
