Şişedeki Şehir – 256 Baytlık Bir Raycasting Sistemi

City In A Bottle – 256 baytlık bir raycasting sistemi

• Giriş

  • Bugün, 256 baytlık bir HTML dosyasına sığdırılmış küçük bir raycasting motoru ve şehir üreticisini tanıtıyoruz.
  • Bu program, birden fazla kavramı küçük bir alana sığdırarak bir bulmaca çözer gibi anlaşılabiliyor.
  • Başlıca bileşenler HTML kodu, kare güncelleme döngüsü, render sistemi, raycasting motoru ve şehrin kendisi.

• Tam kod

  • Bu kod, basit bir JavaScript parçacığı değil, başlı başına tam bir HTML programı.

  • <canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)>
    

HTML kodu

• HTML kodu
  • HTML bölümü, basit bir canvas öğesi ve onclick olayından oluşuyor.

  • <canvas style=width:99% id=c onclick=setInterval('',t=9)>
    

  • Canvas öğesinin id değeri JavaScript tarafından erişilebilmesi için c olarak ayarlanmış.
  • onclick olayı programı başlatıyor ve setInterval çağrısıyla güncelleme döngüsünü oluşturuyor.

JavaScript kodu

• JavaScript kodu

  • Canvas'a tıklandığında çalışan 199 baytlık JavaScript kodu.

  • for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a
    

• Kod analizi

  • Kod, okunmasını kolaylaştırmak için parçalarına ayrılıyor.

  • c.width = w = 99
    ++t
    for (i = 6e3; i--;){
      a = i%w/50 - 1
      s = b = 1 - i/4e3
      X = t
      Y = Z = d = 1
      for(; ++Z<w &  (Y < 6 - (32<Z & 27<X%w && X/9^Z/8)*8%46 ||  d | (s = (X&Y&Z)%3/Z, a = b = 1, d = Z/w));) {
        X += a
        Y -= b
      }
      c.getContext`2d`.fillRect(i%w, i/w|0, 1 - d*Z/w + s, 1)
    }
    

• Kodun adım adım açıklaması

  • c.width = w = 99: Canvas'ı başlatır ve genişliğini 99 piksel olarak ayarlar.
  • ++t: Zaman değişkenini artırarak animasyonu oluşturur.
  • for (i = 6e3; i--;){}: Döngü aracılığıyla her pikselin parlaklığını belirler.
  • a = i % w / 50 - 1: Kamera vektörünün yatay bileşenini hesaplar.
  • b = s = 1 - i / 4e3: Kamera vektörünün dikey bileşenini hesaplar.
  • X = t: Zaman değerini başlangıç X konumu olarak kullanır.
  • Y = Z = d = 1: Y, Z ve d değerlerini başlatır.
  • for(; ++Z<w & ...;): Raycasting sistemi çarpışma tespit edene kadar döngüyü sürdürür.
  • c.getContext2d.fillRect(i%w, i/w|0, 1 - d*Z/w + s, 1): Her pikseli çizerek nihai görüntüyü oluşturur.

Ek öğrenme

• Ek öğrenme
  • Bu demo, Revision 2022 demoparty'sine gönderildi ve Pouet üzerinde görülebiliyor.
  • Shadertoy üzerinde 256 baytlık shader'a genişletilmiş bir sürüm de görülebiliyor.
  • Daniel Darabos'un hazırladığı etkileşimli araçla programın çeşitli yönleri gerçek zamanlı olarak değiştirilebiliyor.

GN⁺ görüşü

• İlgi çekici noktalar

  • Bu program, son derece küçük bir kodla karmaşık grafiklerin nasıl üretilebildiğini gösteriyor.
  • Yeni başlayan yazılım mühendislerinin de anlayabileceği temel matematikten yararlanıyor.
  • Kod optimizasyonu ve minimalizm için iyi bir örnek; code golf benzeri yarışmalarda faydalı olabilir.

• Eleştirel bakış

  • Kod çok sıkıştırılmış olduğu için okunabilirlik düşük olabilir.
  • Pratik uygulamalardan çok sanatsal ve deneysel amaçlara daha uygun.

• İlgili teknolojiler

  • Benzer projeler için Shadertoy üzerindeki çeşitli shader örneklerine bakılabilir.
  • Dwitter gibi platformlarda başka küçük kod örnekleri de keşfedilebilir.

• Teknolojiyi benimserken dikkat edilmesi gerekenler

  • Bu teknolojiyi kullanırken kodun okunabilirliği ve bakım kolaylığı göz önünde bulundurulmalı.
  • Küçük bir kodla karmaşık işlevler gerçekleştirmeye bağlı performans optimizasyonu ve hata ayıklama zorluklarının farkında olunmalı.

[GN⁺]

Hacker News görüşü

Hacker News yorumlarından derlenmiş özet

• JavaScript ile 1K Pinball Game:

  • "Bu kadar az kodla bu kadar çok bilgi sığdırılabilmesi şaşırtıcı."
  • "Bu gerçekten çok havalı ama makaleyi okurken döngü sürekli çalıştığı için dizüstü bilgisayarım aşırı ısındı."
  • "İlgili kaynaklar: [Atari 2600] Pitfall'un dünya kurma yöntemi, prosedürel üretim, lazy evaluation vb."

• Prosedürel üretim ve lazy evaluation:

  • "Prosedürel üretimle ilgili çeşitli kaynak bağlantıları paylaşılıyor."
  • "Lazy evaluation ile ray tracing algoritmasının benzerliğine dair bir gözlem."

• Diğer görüşler:

  • "Gerçekten çok havalı! Eline sağlık."
  • "Hem çalışma hem de makale etkileyici."
  • "256 baytlık MS-DOS demosuna benzeyen Alcatraz imzalı Remnants - YouTube bağlantısı da var."
  • "JavaScript ile yazılmış olması daha da etkileyici."
  • "Gerçekten şaşırtıcı."
  • "Okuması çok keyifli."
  • "Bunu sevdiyseniz Twitter'daki #tweetcart'ı da seversiniz. Pico-8 sanal konsolu için tweet boyutunda programlar."