Tes Canvas

Prompt

# ROLE & OBJECTIVE Kamu adalah Senior Creative Technologist, WebGL/Three.js Graphics Engineer, dan Generative Audio Developer. Tugasmu adalah menulis kode lengkap, siap pakai, dan bebas bug (Zero-Placeholder Policy) untuk proyek "SYNAPSE // WIKI-OSINT" — sebuah aplikasi web real-time Data Sonification & 3D Cybernetic Art. Jangan berikan penjelasan panjang lebar di awal. Langsung hasilkan kode lengkap dalam satu file `index.html` (Single-File Architecture) yang memuat HTML, CSS, dan JavaScript modular melalui CDN. # TECHNICAL STACK (CDN) Gunakan library berikut via CDN yang stabil: 1. Three.js (beserta OrbitControls, EffectComposer, RenderPass, dan UnrealBloomPass untuk efek cahaya neon/glow). 2. Tone.js (untuk Web Audio Synthesizer prosedural murni tanpa file audio eksternal). 3. Native Browser `EventSource` API yang terhubung langsung ke `https://stream.wikimedia.org/v2/stream/recentchange`. # SYSTEM ARCHITECTURE & FEATURES ## 1. Real-Time OSINT Data Stream & Filtering - Buka koneksi SSE ke `https://stream.wikimedia.org/v2/stream/recentchange`. - Buat mekanisme *Throttling / Queue Limiter* (maksimal memproses 8-12 event per detik) agar visual dan audio tidak mengalami overload atau clipping meskipun stream sedang sangat deras. - Tambahkan filter opsional di UI (All Wikis, English Wiki `enwiki`, Indonesian Wiki `idwiki`, atau Global Commons). - Ekstrak data penting dari JSON: `title`, `user`, `bot` (boolean), `server_name`, `type`, dan selisih `length.new - length.old` (byte diff). ## 2. 3D Generative Visuals (Three.js + Bloom) - Buat ruang 3D gelap pekat (`#030508`) dengan kamera `OrbitControls` (auto-rotate halus). - Di tengah ruang, buat struktur inti berupa wireframe icosahedron/sphere halus yang berdenyut mengikuti amplitudo audio (FFT Analyzer dari Tone.js). - Ketika event data masuk:   - Munculkan partikel/node bercahaya pada koordinat bola (Spherical Coordinates) di sekitar inti. Ukuran node bergantung pada besarnya perubahan byte (`Math.abs(byteDiff)`).   - Buat garis koneksi melengkung atau lurus (Synapse Line) dari inti ke node baru, atau antar-node yang muncul berdekatan, yang perlahan memudar (fade out) seiring waktu agar FPS tetap 60fps stabil (gunakan Object Pooling atau hapus geometri lama secara bersih dari memori). - Skema Warna Cyberpunk:   - Human Edit (`bot: false`, diff >= 0): Cyan/Electric Blue (`#00f3ff`).   - Bot Edit (`bot: true`): Neon Purple (`#b026ff`).   - Large Deletion / Potential Revert (diff < -200): Crimson Red (`#ff0055`) + efek getaran/pulsasi cepat.   - Major Expansion / New Article (diff > 1000): Gold/Amber (`#ffbe0b`). - Wajib aktifkan `UnrealBloomPass` agar semua partikel dan garis memancarkan glow neon yang tajam. ## 3. Generative Ambient Audio Engine (Tone.js) - Karena aturan browser, buat tombol overlay awal bertuliskan `[ INITIALIZE NEURAL LINK ]` untuk mengaktifkan `Tone.start()` dan memulai stream. - Gunakan efek master: `Tone.Reverb` (decay panjang ~4-6 detik untuk atmosfer luar angkasa) + `Tone.FeedbackDelay` + `Tone.Compressor` + `Tone.Limiter`. - Gunakan skala nada **D Minor Pentatonic** (`["D2", "F2", "G2", "A2", "C3", "D3", "F3", "G3", "A3", "C4", "D4", "F4", "A4"]`) agar seluruh bunyi yang tumpang tindih selalu terdengar harmonis dan sinematik. - Instrumen Prosedural:   - **Human Edit:** `Tone.PolySynth(Tone.Synth)` dengan envelope lembut (attack agak lambat, release panjang) memainkan nada tengah-atas.   - **Bot Edit:** `Tone.FMSynth` atau `Tone.PluckSynth` dengan nada tinggi pendek yang renyah (glitchy blip), volume lebih pelan agar tidak berisik.   - **Major Expansion (diff > 1000):** Memicu `Tone.MembraneSynth` atau `Tone.MonoSynth` di oktaf rendah (`D1` / `A1`) sebagai dentuman Sub-Bass yang dalam.   - **Large Deletion (diff < -200):** Memainkan dua nada dissonant/minor secara bersamaan dengan filter agak tajam. ## 4. Cybernetic HUD / OSINT Terminal UI (HTML/CSS Overlay) Buat antarmuka HUD transparan bergaya Sci-Fi/Watch_Dogs di atas canvas 3D (gunakan font monospace): - **Kiri Atas (Telemetry Stats):** Menampilkan FPS, Event/sec, Total Human vs Bot Ratio (dalam persentase bar), dan Total Bytes Changed. - **Kiri Bawah (Live OSINT Feed):** Log terminal yang terus bergulir (maksimal 15 baris terakhir) menampilkan: `[TIMESTAMP] [WIKI] [USER/IP] -> [ARTICLE TITLE] (+/- BYTES)` dengan warna sesuai kategori. Jika judul artikel diklik, buka URL artikel tersebut di tab baru. - **Kanan Atas (Control Panel):**   - Slider Volume Master & Tombol Mute.   - Slider Stream Speed (Rate Limiter: Chill / Normal / Chaos).   - Dropdown Filter Bahasa/Server (`All`, `en.wikipedia.org`, `id.wikipedia.org`, `wikidata.org`).   - Toggle Bloom Intensity. # CODING STANDARDS - Tulis seluruh kode secara LENGKAP dari `<!DOCTYPE html>` hingga `</html>`. Dilarang keras memotong kode dengan komentar seperti `// ... kode selanjutnya` atau `// implementasikan sisanya`. - Pastikan manajemen memori WebGL (`geometry.dispose()`, `material.dispose()`) berjalan sempurna agar aplikasi tidak mengalami memory leak jika dibiarkan menyala berjam-jam.