Matrix’teki yeşil kod yağmuru nedir, nereden geliyor?

3 dk okuma #yazılım

1999 yapımı The Matrix’i izlemeyenler bile yukarıdan aşağı akan yeşil karakterleri bilir. “Dijital yağmur” (digital rain) denen bu görüntü, filmin simüle edilmiş dünyasının görsel imzası oldu. Bu yazıda efektin kim tarafından, nasıl tasarlandığına, sık anlatılan suşi tarifi hikâyesinin ne kadarının doğru olduğuna ve aynı efektin bir web sayfasında nasıl çizildiğine bakıyorum. Bu sitenin ana sayfasındaki yağmur da aşağıdaki yöntemle çiziliyor.

Tasarımı kim yaptı?

Efektteki karakterlerin yazı tipini Simon Whiteley tasarladı. 2017’de CNET’e verdiği bir röportajda Matrix’in kodunun Japon suşi tariflerinden oluştuğunu söylemeyi sevdiğini anlattı. Bu tasarıma eşinin Japon olmasından yola çıktığını da belirtiyor.

Hikâyeyi kelimesi kelimesine almamak gerek. Whiteley’in sözü bir espriyle karışık anlatım ve Wikipedia da bu iddianın bazı kişilerce çürütüldüğünü not ediyor (kaynak göstermeden). Ekranda gördüğümüz şey, tarif sayfalarının taranmış hali değil, tasarlanmış bir karakter seti.

Karakterler neyden oluşuyor?

Yazı tipi, yarım genişlikli katakana karakterlerinin ayna görüntüleri ile Latin harfleri ve rakamların karışımı. Yani Japonca ve İngilizce öğeler tek bir görsel sistemde birleşiyor.

Resmî bir yazı tipi dosyası yayımlanmış değil. Bu yüzden internette dolaşan “Matrix fontları” taklit ya da yorum. Efektin ekran koruyucuları (XScreenSaver’daki GL Matrix gibi) ve Unix terminalinde çalışan cmatrix programı gibi gayriresmî sürümleri var.

Web’de kod yağmuru nasıl çizilir?

Mantık şaşırtıcı derecede basit. Sayfaya bir canvas koyuyorsun ve ekranı sütunlara bölüyorsun. Her sütun için bir “damla” konumu tutuyorsun. Her adımda üç şey oluyor:

  • Önceki kare, üzerine yarı saydam siyah bir dikdörtgen çizilerek sönükleştirilir. Karakterlerin arkasında kalan iz buradan gelir.
  • Her damlanın ucuna rastgele bir karakter yazılır ve damla bir satır aşağı iner.
  • Damla ekranın altına inince, küçük bir olasılıkla yukarı sıfırlanır. Böylece sütunlar birbirinden bağımsız ve düzensiz akar.

Ana fikri gösteren çalışır bir taslak:

const ctx = canvas.getContext('2d');
const boyut = 16;
const sutun = Math.ceil(canvas.width / boyut);
const damla = Array(sutun).fill(0);
const glif = 'ｱｲｳｴｵｶｷｸｹｺ0123456789';

function adim() {
  ctx.fillStyle = 'rgba(2, 5, 3, 0.1)';   // önceki kareyi söndür
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#00ff41';
  ctx.font = boyut + 'px monospace';
  damla.forEach((y, i) => {
    const ch = glif[Math.floor(Math.random() * glif.length)];
    ctx.fillText(ch, i * boyut, y * boyut);
    damla[i] = (y * boyut > canvas.height && Math.random() > 0.975) ? 0 : y + 1;
  });
}
setInterval(adim, 50);

Bu sitedeki sürümde buna birkaç ekleme yaptım: karakter kümesi yarım genişlikli katakana (Unicode’da U+FF66 ile U+FF9D arası), rakamlar ve birkaç simge; katakana karakterleri filmdeki gibi aynalamak için ctx.scale(-1, 1); damlanın ucu açık yeşil, arkası koyu yeşil.

Performans ve erişilebilirlik

Sürekli hareket eden bir arka plan, özenli yapılmazsa pil ve dikkat tüketir. Kullandığım önlemler:

  • Saniyede yaklaşık 20 kare ile çiziyorum, 60 değil.
  • Canvas ekranda görünmüyorken ya da sekme arka plandayken çizimi durduruyorum.
  • Tarayıcı “hareketi azalt” (prefers-reduced-motion) ayarındaysa yağmur varsayılan olarak kapalı başlıyor ve tek bir sabit kare çiziliyor.
  • Üstteki menüde kırmızı ve mavi hap düğmesi var: kırmızı yağmuru açar, mavi sakin moda geçirir. Tercih tarayıcında saklanır.

Kaynaklar

← tüm yazılar