Guten Tag, Freunde!
Kürzlich überarbeitet die "Matrix". Hören Sie sich an, was ein cooler Film ist (dies gilt nur für den ersten Teil). Wieder einmal machte ich auf die "fallenden" Linien mit Hieroglyphen auf ihren Bildschirmen aufmerksam (ich habe das Wort "ihnen" bewusst zum Spaß verwendet). Ich dachte darüber nach, wie dies implementiert werden kann ... so einfach wie möglich (weil Faulheit). Das habe ich bekommen.
Willkommen in der Matrix
Das Markup sieht folgendermaßen aus:
<body style="margin: 0; background: #000; overflow: hidden;"> <canvas></canvas> </body>
Initialisieren Sie die Zeichenfläche, den Kontext, die Breite und die Höhe der Zeichenfläche. Wir machen letztere gleich der Breite und Höhe des Browserfensters:
const C = document.querySelector("canvas"), $ = C.getContext("2d"), W = C.width = innerWidth, H = C.height = innerHeight
Wir erstellen eine Zeile mit Zeichen, die zur Visualisierung verwendet werden (Ich möchte keine Hieroglyphen, ich möchte das kyrillische Alphabet!). Konvertieren Sie diesen String in ein Array. Leerzeichen geben Lücken in Spalten, bei denen der Effekt interessanter ist:
const str = "+0-1=2 3 4 5 6 7 8 9 ! ? ., :;", matrix = str.split('')
Wir bestimmen die Schriftgröße, die Anzahl der Spalten und erstellen ein leeres Array. Wir werden dieses Array verwenden, um die y-Koordinate zu bestimmen:
let font = 11,
Füllen Sie ein leeres Array mit Einheiten nach der Anzahl der Spalten:
for(let i = 0; i < col; i++) arr[i] = 1
Alles ist bereit zum Zeichnen. Erste Schritte:
function draw() {
Wir starten die Zeichenfunktion alle 123 Millisekunden (eine Zufallszahl):
setInterval(draw, 123)
Wenn wir die Größe des Fensters ändern, laden wir die Seite neu (aus Gründen der Faulheit):
window.addEventListener('resize', () => location.reload())
Das Ergebnis ist hier zu sehen.
Es gibt ein kleines Problem: Von Zeit zu Zeit kleben die Säulen zusammen, sie werden horizontal fast bündig gezeichnet. Dies wirkt sich auf die Wahrnehmung aus: Das Auge bleibt bei der Bestellung. Es fehlt an Chaos oder so. Eine angemessene Lösung wurde noch nicht gefunden.
Danke für die Aufmerksamkeit. Alles Gute.