Come si ottiene un effetto "pioggia di caratteri" in stile Matrix usando JS?

Question

Accepted Answer

La pioggia di caratteri all'inizio del film Matrix è un'immagine simbolica che rappresenta la natura della realtà virtuale del film, e richiama temi come la percezione della realtà e il potere dell'informazione. La stessa può essere figurata come una rappresentazione della complessità e dell'interconnessione del mondo digitale. Nel mondo di Matrix, la realtà virtuale è costituita da un intricato labirinto di codice informatico, che richiede una grande capacità di decodifica per essere compreso. I personaggi di Matrix sono intrappolati in una realtà virtuale creata da un'intelligenza artificiale, e vedono solo ciò che viene loro presentato come realtà.

Effetto ottenuto (pioggia di caratteri in stile Matrix in HTML e JS

Come realizzare l'effetto

Come prima cosa bisogna costruire un contenitore, cosa che noi abbiamo fatto su questa pagina creando un tag canvas. Canvas significa "tavolozza", pressappoco, e permette di realizzare dei disegni in stile libero, ovviamente fornendo le opportune istruzioni. Il codice per realizzare la pioggia di caratteri in stile Matrix è il seguente:

var canvas = document.getElementById('cuccureccutron23'),
ctx = canvas.getContext('2d');

canvas.width = 300;
canvas.height = window.innerHeight;

var letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ';
letters = letters.split('');

var fontSize = 12,
columns = canvas.width / fontSize;

// Setting up the drops
var drops = [];
for (var i = 0; i < columns; i++) {
drops[i] = 1;
}

function draw() {
ctx.fillStyle = 'rgba(0, 0, 0, .1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < drops.length; i++) { var text = letters[Math.floor(Math.random() * letters.length)]; ctx.fillStyle = '#0f0'; ctx.fillText(text, i * fontSize, drops[i] * fontSize); drops[i]++; if (drops[i] * fontSize > canvas.height && Math.random() > .95) {
drops[i] = 0;
}
}
}

setInterval(draw, 33);

Di seguito, lo spieghiamo passo-passo. Questo codice è scritto in JavaScript (fonte) ed è utilizzato per creare un effetto di testo che "cade" come la pioggia su un canvas HTML5. L'unica differenza è che ho impostato a 300 pixel la larghezza della canvas per una migliore e più agevole visualizzazione su cellulari e tablet.

Prima di tutto, viene creato un riferimento all'elemento canvas nell'HTML tramite il metodo getElementById() e viene salvato nella variabile canvas. Inoltre, viene creato un riferimento al contesto di rendering del canvas tramite il metodo getContext(), salvato nella variabile ctx.
La larghezza del canvas viene impostata a 300 pixel e l'altezza viene impostata in modo da occupare tutta la finestra del browser utilizzando la proprietà innerHeight dell'oggetto window.
Viene definita una stringa di caratteri di alfabeto maiuscolo ripetuti più volte, separati poi in un array tramite il metodo split(). Questo array rappresenterà il pool di caratteri dal quale verranno estratti i caratteri casuali durante la generazione di ogni goccia di testo.
Vengono definiti il font size e il numero di colonne che comporranno il testo che cade. Il numero di colonne viene calcolato dividendo la larghezza del canvas per il font size.
Viene creato un array vuoto chiamato "drops". Questo array assolve ad un compito fondamentale, ovvero quello di tenere traccia della posizione di ogni goccia di testo all'interno di ogni colonna e di ogni riga.
Viene poi eseguita una funzione chiamata draw() che si occuperà di generare e disegnare ogni goccia di testo.
La funzione draw() funziona così: prima di tutto resetta la canvas il metodo fillRect(), e la riempie con un rettangolo nero semi-trasparente, il cui livello di opacità è definito dalla stringa 'rgba(0, 0, 0, .1)'.
Viene quindi eseguito un loop o ciclo su ogni elemento dell'array "drops": ad ogni iterazione viene generato un carattere casuale dall'array letters, utilizzando il metodo Math.random(), Math.floor() e la proprietà length dell'array. Il carattere casuale viene quindi disegnato sul canvas utilizzando il metodo fillText() del contesto di rendering, passando la posizione x e y del carattere come coordinate del pixel (calcolate moltiplicando la colonna per il font size e la posizione della goccia per il font size, rispettivamente). La posizione della goccia viene incrementata di una unità ad ogni passaggio.
Se la posizione della goccia supera l'altezza del canvas e un numero casuale generato con Math.random() è maggiore di .95, la posizione della goccia viene reimpostata a 0, per garantire una maggiore casualità alla grafica (e l'effetto dei caratteri che sembrano "dissolversi").
Infine, viene utilizzato il metodo setInterval() per richiamare la funzione draw() ogni 33 millisecondi (corrispondente a circa 30 frame al secondo), generando così un effetto di testo che cade continuamente.

Pioggia di caratteri stile Matrix in JS (con codice)

Effetto ottenuto (pioggia di caratteri in stile Matrix in HTML e JS

Come realizzare l’effetto

👇 Da non perdere 👇