Matrix

So funktioniert das Script

Das Script besteht aus drei Abschnitten: Zuerst werden die zwanzig Spalten-Elemente erzeugt, dann bekommt jede Spalte per Zufall ihren Startzustand (Zeichenkette, Geschwindigkeit), und schließlich bewegt die Funktion Cycle() alle Spalten in einer Endlosschleife Stück für Stück nach unten. Die Logik stammt unverändert von Kurt Grigg aus dem Jahr 2004 — modernisiert wurden nur die Alt-Konstrukte: document.write() wurde durch das Befüllen eines Containers ersetzt, das veraltete <font>-Tag durch ein <span> mit Farbangabe, und die Animation läuft in einem Rahmen statt über der ganzen Seite.

const Cols = 20;       // Anzahl der Spalten
const Tc = "#008800";  // Farbe der fallenden Zeichen
const Tc1 = "#00ff00"; // Farbe des hellen Zeichens an der Spitze
const MnS = 20;        // Grundgeschwindigkeit
const MxS = 30;        // zufälliger Geschwindigkeitszuschlag

Am Kopf des Scripts sitzen die Stellschrauben — hier lässt sich der Effekt komplett umfärben und umbauen, ohne die eigentliche Logik anzufassen. Die kurzen Namen (Cols, Tc, …) stammen aus dem Original und wurden beibehalten, damit Fundstellen im Netz vergleichbar bleiben.

for (let i = 0; i < Cols; i++) {
  S[i] = I += Cs;
  spalten += "<div id='matrix-a" + i + "' style='position:absolute;...'></div>";
}
buehne.innerHTML = spalten;

Jede Regenspalte ist ein absolut positioniertes <div>. Die Schleife baut alle zwanzig als einen langen HTML-Text zusammen — jede bekommt über S[i] = I += Cs ihre eigene Position 10 Pixel weiter rechts — und setzt sie in einem Rutsch per innerHTML in den Container. Weil der Container position: relative und overflow: hidden hat, bewegen sich die Spalten nur innerhalb seines Rahmens und werden an den Kanten abgeschnitten.

RC[j] = 1 + Math.round(Math.random() * Cl);
Sp[j] = Math.round(MnS + Math.random() * MxS);
for (let i = 0; i < RC[j]; i++) {
  C[i] = Math.round(Math.random()) + " ";
  M[j] = B[0] += C[i];
}

Der Zufall macht den Effekt lebendig: RC[j] würfelt die Zeichenzahl der Spalte, Sp[j] ihre Geschwindigkeit. In der inneren Schleife entsteht die Zeichenkette selbst — Math.round(Math.random()) liefert zufällig 0 oder 1, dahinter kommt jeweils ein Leerzeichen. Der Zustand jeder Spalte steckt also in mehreren parallelen Arrays: M hält die Zeichen, Y die Höhe, Sp das Tempo.

Y[i] += Sp[i];
if (Y[i] > buehne.clientHeight) {
  // Spalte mit neuen Zufallszeichen oben starten
  Y[i] = -Ts * M[i].length / 1.5;
}
spalte.style.top = Y[i] + "px";

Das Herz der Animation: Bei jedem Durchlauf wandert die Spalte um ihre Geschwindigkeit nach unten, indem ihr top-Wert wächst. Fällt sie unten aus dem Container (clientHeight ist dessen sichtbare Höhe), wird sie mit frischen Zufallszeichen neu aufgebaut und bekommt einen negativen top-Wert — sie startet also oberhalb des sichtbaren Bereichs und rieselt von dort wieder herein. Erst in diesem Moment wird sie auch sichtbar geschaltet, deshalb baut sich der Regen nach dem Laden erst nach und nach auf.

E[i] = "<span style='color:" + Tc1 + "'>" + Tcc[r] + "</span>";
spalte.innerHTML = M[i] + " " + E[i] + " ";
setTimeout(Cycle, 20);

An das Ende jeder Spalte wird ein einzelnes, hellgrünes Zufallszeichen gehängt — das ist die leuchtende „Spitze", die im Film den Regen anführt. Zum Schluss ruft sich Cycle() über setTimeout alle 20 Millisekunden selbst wieder auf, etwa 50-mal pro Sekunde entsteht so ein neues Bild.

Zum Anpassen: Blauen statt grünen Regen gibt es mit Tc = "#004488" und Tc1 = "#00ccff". Mehr Spalten (Cols) brauchen einen breiteren Container — als Faustregel Breite ≈ (Cols + 2) × Cs Pixel. Und wer statt Nullen und Einsen andere Zeichen regnen lassen will, erweitert das Array Tcc und ersetzt die beiden Math.round(Math.random()) + " "-Stellen durch eine Zufallsauswahl daraus.