Cara Membuat Animasi Hujan dengan Kode Huruf Matrix Untuk Blogspot serta Filosofi dibalik Ceritanya

Salam blogger teman teman semua. Ayo siapa yang tidak mengenal efek hujan kode digital berwarna hijau yang mengalir vertikal di layar komputer? Efek visual ikonik yang dikenal sebagai "Matrix Digital Rain" yang telah menjadi salah satu simbol budaya popular paling dikenal di dunia teknologi dan perfilman sejak debut film The Matrix pada tahun 1999.

Namun, tahukah teman teman blogger semuanya cerita menarik di balik pembuatan kode legendaris ini? Ternyata, inspirasinya berasal dari tempat yang sangat tidak terduga. Langsung saja ulasannya, cekidot wae!

Inspirasi dari Buku Resep Masakan

Banyak orang mengira kode hijau tersebut merupakan barisan enkripsi komputer tingkat tinggi atau algoritma pemrograman yang rumit. Faktanya, pencipta efek visual ini, Simon Whiteley, mengungkapkan bahwa kode tersebut berasal dari buku resep masakan Jepang milik istrinya.

Saat proses produksi film, sutradara The Wachowskis menginginkan sebuah desain pembuka yang merepresentasikan perpaduan antara teknologi modern dan elemen organik tersembunyi. Whiteley kemudian membawa buku resep tersebut ke kantor, memindai (scan) karakter di dalamnya, dan menyusunnya menjadi barisan kode yang mengalir turun.

Tutorial Cara Membuat Animasi Hujan dengan Kode Huruf Matrix Seperti Ngerapik Blog

Nah, bagi teman teman yang mau membuat kode ini tampil seperti tampak pada gambar dibawah ini atau saat teman teman berkunjung ke blog Ngerapik ini, berikut cara pemasangan dan pengaplikasiannya di blogger kesayangan teman teman semua.

PENERAPAN KODE HTML

Masuk ke EDIT HTML Template sobat blogger lalu cari dengan CNTR F kode </body> dan tempelkan kode dibawah ini tepat di atas atau sebelum kode </body>

Kode Hujan Matrix:

</> Kode Matrix

<style>
  .matrix-side-container {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 150px; /* Lebar area hujan disesuaikan dengan teks yang lebih besar */
    height: 100vh; /* Tinggi penuh mengikuti layar browser hingga footer */
    z-index: 99999; /* Tetap berada di lapisan paling depan */
    overflow: hidden;
    pointer-events: none; /* Klik pengunjung menembus animasi, menu/iklan aman */
    opacity: 0.22; /* Kecerahan teks dinaikkan sedikit agar lebih jelas terlihat */
  }
  #matrix-left-layer { left: 0; }
  #matrix-right-layer { right: 0; }
  .matrix-canvas-element {
    width: 100%;
    height: 100%;
    display: block;
  }
  /* Otomatis sembunyikan di tampilan HP agar tidak berantakan */
  @media screen and (max-width: 1150px) {
    .matrix-side-container { display: none !important; }
  }
</style>

function resizeCanvas() {
        canvas.width = canvas.parentElement.offsetWidth;
        canvas.height = canvas.parentElement.offsetHeight;
    }
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);

// Karakter pilihan agar terlihat bagus saat ukurannya besar
    const chars = "ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ1234567890X@#$".split("");
    
    // UKURAN FONT DIUBAH DI SINI (Sebelumnya 11, sekarang dinaikkan menjadi 18 agar besar)
    const fontSize = 18; 
    const columns = Math.floor(canvas.width / fontSize) + 1;
    const drops = [];
    
    // Posisi jatuh acak awal
    for (let x = 0; x < columns; x++) {
        drops[x] = Math.random() * -60; 
    }

function drawRain() {
        ctx.fillStyle = 'rgba(255, 255, 255, 0.05)';
        
        // Deteksi warna latar belakang gelap/hitam
        const bodyBg = window.getComputedStyle(document.body).backgroundColor;
        const rgb = bodyBg.match(/\d+/g);
        if (rgb && (parseInt(rgb) + parseInt(rgb) + parseInt(rgb)) < 300) {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; 
        }
        
        ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#00FF00'; // Warna hijau neon khas
        ctx.font = 'bold ' + fontSize + 'px monospace'; // Menggunakan format cetak tebal (bold)

for (let i = 0; i < drops.length; i++) {
            const text = chars[Math.floor(Math.random() * chars.length)];
            
            ctx.fillText(text, i * fontSize, drops[i] * fontSize);

if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
                drops[i] = 0;
            }
            drops[i]++; 
        }
    }
    // Kecepatan gerak turun disesuaikan (30 milidetik) agar pas dengan ukuran font besar
    setInterval(drawRain, 30);
}

document.addEventListener('DOMContentLoaded', () => {
    startMatrixRain('canvas-left-side');
    startMatrixRain('canvas-right-side');
});
//]]>
</script>

Setelah itu klik SAVE Edit HTML Template sobat blogger semua.

Komposisi Karakter Kode Matrix

Jika kita perhatikan secara jeli pada animasi yang baru saja kita pasang di template blog, barisan karakter tersebut tidak menggunakan alfabet latin biasa. Desain asli Matrix menggunakan campuran dari tiga elemen utama:

Karakter Katakana: Huruf Jepang (seperti ｱ, ｲ, ｳ, ｴ, ｵ) yang dibalik atau diputar posisinya.
Angka Numerik: Deretan angka dari 0 sampai 9 yang terus berganti secara acak.
Simbol Khusus: Beberapa tanda baca untuk menambah kesan misterius pada aliran teks.

Gabungan komponen ini menciptakan ilusi visual seolah-olah komputer sedang memproses data realitas buatan berskala raksasa dalam hitungan milidetik.

Makna Filosofis di Balik Warna Hijau

Pemilihan warna hijau neon (`#00FF00`) di atas latar belakang hitam pekat bukanlah tanpa alasan. Warna ini merujuk pada tampilan monitor komputer jadul berbasis tabung sinar katode (CRT) atau terminal monokrom yang populer pada era 1970-an hingga 1980-an.

Dalam konteks cerita filmnya, warna hijau melambangkan bahwa dunia yang dilihat oleh karakter di dalamnya hanyalah sebuah simulasi komputer, memberikan kontras yang kuat dengan dunia nyata yang digambarkan dengan palet warna yang lebih dingin dan kebiruan.

Kesimpulan KODE dan Filosofinya

Animasi Hujan dengan Kode Huruf Matrix sangat mudah bukan teman teman di aplikasikan dan sangat menambah kesan exlusif untuk tampilan blog kita. Dan dari Filosofi Kode Efek visual hujan digital Matrix inilah contoh sempurna bagaimana kreativitas sederhana dari sebuah buku memasak bisa bertransformasi menjadi karya seni digital ikonik yang tak lekang oleh waktu. Menambahkan efek ini pada situs blogspot atau website kita tidak hanya memberikan sentuhan retro yang estetik, tetapi juga membangkitkan nostalgia masa kejayaan dunia fiksi ilmiah klasik. Akhir kata saya ucapkan terimakasih kepada sobat blogger semuanya yang telah berkunjung ke sini, Salam Ngerapik Blog!