🌧 Green Rain

L’iconica “pioggia digitale” di Matrix ricreata su canvas

← Torna a Virtual Desktop Site

Descrizione

Green Rain è una ricreazione dell’iconica animazione “Digital Rain” (o “Matrix Code”) vista nella trilogia di Matrix (1999-2003). L’effetto mostra cascate verticali di caratteri verdi luminosi che scendono su sfondo nero, evocando l’estetica cyberpunk del film.

Caratteristiche

Effetti Visivi

Controlli

Personalizzazione

Implementazione Tecnica

File Principali

Tecnologie

Algoritmo di Rendering

// Configurazione
const fontSize = 16;
const cols = canvas.width / fontSize;
const drops = Array(cols).fill(1);  // Posizione Y di ogni colonna

function draw() {
  // Dissolvenza: riempimento semi-trasparente
  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Testo verde luminoso
  ctx.fillStyle = '#0F0';
  ctx.font = `${fontSize}px monospace`;

  for (let i = 0; i < drops.length; i++) {
    // Carattere casuale
    const char = getRandomChar();

    // Disegna carattere
    const x = i * fontSize;
    const y = drops[i] * fontSize;
    ctx.fillText(char, x, y);

    // Reset casuale quando raggiunge il fondo
    if (y > canvas.height && Math.random() > 0.975) {
      drops[i] = 0;
    }

    drops[i]++;
  }

  requestAnimationFrame(draw);
}

Set di Caratteri

Giapponesi (Unicode)

// Katakana (U+30A0 to U+30FF)
const katakana = 'ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ';

// Hiragana (U+3040 to U+309F)
const hiragana = 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわん';

// Numeri e simboli
const numbers = '0123456789';
const symbols = '.:;*+-=<>[]{}';

Ottimizzazioni Performance

1. Offscreen Canvas

Pre-renderizza caratteri su canvas nascosto per copia rapida:

const charCache = new OffscreenCanvas(fontSize, fontSize);
// Cache rendering di caratteri usati frequentemente

2. Column Pooling

Riutilizzo oggetti colonna invece di creazione/distruzione continua:

const columnPool = [];
function getColumn() {
  return columnPool.pop() || createNewColumn();
}

3. Throttling

Limita ridisegno quando finestra non è visibile:

if (document.hidden) {
  return;  // Pausa animazione su tab inattiva
}

L’Estetica Matrix

Origini del Digital Rain

L’animazione fu creata da Simon Whiteley, designer produzione di Matrix. L’idea:

Caratteri Giapponesi

Whiteley scelse katakana perché:

Colore Verde

Il verde fosforescente richiama:

Varianti e Easter Eggs

Rainbow Rain

Premi R per attivare modalità arcobaleno con colori variabili.

Reverse Rain

Premi V per invertire direzione (pioggia sale invece di scendere).

Binary Mode

Premi B per mostrare solo 0 e 1 (Matrix come codice binario).

Speed Burst

Premi Shift per accelerazione temporanea (3x speed).

Utilizzi Creativi

Screensaver

Green Rain è perfetto come screensaver:

Background Video

Usato come:

VJ Live Performance

Utilizzato in:

Impatto Culturale

Matrix (1999)

Il Digital Rain è diventato:

Influenza Pop Culture

Apparizioni in:

Hacker Culture

Associato a:

Dettagli Tecnici Film

Processo Originale

Codice “Reale”

Nel film, il Digital Rain rappresenta:

Lettura del Codice

I “liberati” imparano a “leggere” il codice direttamente, visualizzando la Matrix senza interfaccia (scena iconica: “I don’t even see the code anymore”).

Attiva Green Rain sul desktop virtuale aprendo l’icona 🌧 Green dal gruppo Mini Apps.