Kota dalam Botol – Sistem Raycasting 256 Byte

 (frankforce.com)
3 poin oleh GN⁺ 2024-05-21 | 1 komentar | Bagikan ke WhatsApp

City In A Bottle – Sistem Raycasting 256 Byte

  • Pengenalan

    • Hari ini kita akan memperkenalkan engine raycasting kecil dan generator kota yang dimuat dalam file HTML 256 byte.
    • Program ini memadatkan beberapa konsep ke dalam ruang yang sangat kecil, sehingga bisa dipahami seperti memecahkan teka-teki.
    • Komponen utamanya adalah kode HTML, loop pembaruan frame, sistem rendering, engine raycasting, dan kota itu sendiri.

  • Seluruh kode

    • Kode ini bukan sekadar snippet JavaScript sederhana, melainkan program HTML utuh.
    • <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)>

Kode HTML

  • Kode HTML
    • Bagian HTML terdiri dari elemen canvas sederhana dan event onclick.
    • <canvas style=width:99% id=c onclick=setInterval('',t=9)>
    • id dari elemen canvas disetel ke c sehingga bisa diakses dari JavaScript.
    • Event onclick memulai program dan membuat loop pembaruan melalui pemanggilan setInterval.

Kode JavaScript

  • Kode JavaScript

    • Kode JavaScript 199 byte yang dijalankan saat canvas diklik.
    • 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

  • Analisis kode

    • Kode dipecah agar lebih mudah dibaca.
    • 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)
}

  • Penjelasan kode langkah demi langkah

    • c.width = w = 99: menginisialisasi canvas dan menetapkan lebarnya menjadi 99 piksel.
    • ++t: menambah variabel waktu untuk membuat animasi.
    • for (i = 6e3; i--;){}: menentukan kecerahan tiap piksel melalui loop.
    • a = i % w / 50 - 1: menghitung komponen horizontal dari vektor kamera.
    • b = s = 1 - i / 4e3: menghitung komponen vertikal dari vektor kamera.
    • X = t: menggunakan nilai waktu sebagai posisi awal X.
    • Y = Z = d = 1: menginisialisasi nilai Y, Z, dan d.
    • for(; ++Z<w & ...;): sistem raycasting berulang sampai mendeteksi tabrakan.
    • c.getContext2d.fillRect(i%w, i/w|0, 1 - d*Z/w + s, 1): menggambar tiap piksel untuk membentuk gambar akhir.

Pembelajaran tambahan

  • Pembelajaran tambahan
    • Demo ini dipamerkan di demo party Revision 2022 dan dapat dilihat di Pouet.
    • Versi yang diperluas menjadi shader 256 byte dapat dilihat di Shadertoy.
    • Dengan alat interaktif buatan Daniel Darabos, berbagai aspek program dapat dimanipulasi secara real time.

Opini GN⁺

  • Hal yang menarik

    • Program ini menunjukkan cara menghasilkan grafis kompleks dengan kode yang sangat kecil.
    • Hanya menggunakan matematika dasar yang cukup mudah dipahami bahkan oleh software engineer pemula.
    • Ini adalah contoh yang baik tentang optimisasi kode dan minimalisme, dan bisa berguna dalam kompetisi seperti code golf.

  • Sudut pandang kritis

    • Karena kodenya sangat dipadatkan, keterbacaannya bisa menurun.
    • Ini lebih cocok untuk tujuan artistik dan eksperimental daripada aplikasi praktis.

  • Teknologi terkait

    • Untuk proyek serupa, Anda dapat melihat berbagai contoh shader di Shadertoy.
    • Anda juga dapat menjelajahi contoh kode kecil lainnya di platform seperti Dwitter.

  • Pertimbangan adopsi teknologi

    • Saat mengadopsi teknik ini, keterbacaan dan maintainability kode perlu dipertimbangkan.
    • Perlu disadari adanya tantangan optimisasi performa dan debugging saat mengimplementasikan fungsi kompleks dengan kode yang kecil.

Bacaan terkait

1 komentar

 
GN⁺ 2024-05-21
Opini Hacker News

Ringkasan kumpulan komentar Hacker News

  • 1K Pinball Game in JavaScript:

    • "Sungguh mengejutkan bahwa sebanyak ini informasi bisa dimuat dengan kode sekecil ini."
    • "Ini benar-benar keren, tetapi selama membaca artikelnya loop terus berjalan dan laptop saya jadi terlalu panas."
    • "Materi terkait: cara membangun dunia di [Atari 2600] Pitfall, procedural generation, lazy evaluation, dan sebagainya."

  • Procedural generation dan lazy evaluation:

    • "Menyediakan berbagai tautan materi tentang procedural generation."
    • "Pengamatan tentang kemiripan antara lazy evaluation dan algoritme ray tracing."

  • Opini lainnya:

    • "Benar-benar keren! Kerja bagus."
    • "Baik karya maupun artikelnya sama-sama mengagumkan."
    • "Remnants by Alcatraz yang mirip dengan demo MS-DOS 256-byte — termasuk tautan YouTube."
    • "Fakta bahwa ini ditulis dalam JavaScript membuatnya lebih mengesankan."
    • "Sungguh luar biasa."
    • "Menyenangkan untuk dibaca."
    • "Jika Anda menyukai ini, Anda mungkin juga akan menyukai #tweetcart di Twitter. Program seukuran tweet untuk konsol virtual Pico-8."