Selamat siang teman-teman!
Baru-baru ini merevisi "Matrix". Dengarkan apa itu film yang keren (ini hanya berlaku untuk bagian pertama). Sekali lagi saya menarik garis "jatuh" dengan hieroglif di layar mereka (saya sengaja menggunakan kata "mereka" untuk bersenang-senang). Saya berpikir tentang bagaimana ini dapat dilaksanakan ... sesederhana mungkin (karena kemalasan). Itu yang saya dapat.
Selamat datang di Matriks
Markupnya terlihat seperti ini:
<body style="margin: 0; background: #000; overflow: hidden;"> <canvas></canvas> </body>
Inisialisasi kanvas, konteks, lebar dan tinggi kanvas. Kami menjadikan yang terakhir sama dengan lebar dan tinggi jendela browser:
const C = document.querySelector("canvas"), $ = C.getContext("2d"), W = C.width = innerWidth, H = C.height = innerHeight
Kami membuat garis dengan karakter yang akan digunakan untuk visualisasi (saya tidak ingin hieroglif, saya ingin alfabet Cyrillic!). Ubah string ini menjadi sebuah array. Spasi memberikan ruang kosong dalam kolom, dengan efeknya lebih menarik:
const str = "+0-1=2 3 4 5 6 7 8 9 ! ? ., :;", matrix = str.split('')
Kami menentukan ukuran font, jumlah kolom dan membuat array kosong. Kami akan menggunakan array ini untuk menentukan koordinat y:
let font = 11,
Isi array kosong dengan unit dengan jumlah kolom:
for(let i = 0; i < col; i++) arr[i] = 1
Semuanya siap untuk menggambar. Mulai:
function draw() {
Kami memulai fungsi menggambar setiap 123 milidetik (angka acak):
setInterval(draw, 123)
Akhirnya, ketika mengubah ukuran jendela, kami memuat ulang halaman (untuk kemalasan):
window.addEventListener('resize', () => location.reload())
Hasilnya bisa dilihat di
sini .
Ada masalah kecil: dari waktu ke waktu kolom saling menempel, mereka ditarik hampir rata secara horizontal. Ini mempengaruhi persepsi: mata melekat pada pemesanan. Ada kekurangan kekacauan, atau sesuatu. Solusi yang layak belum ditemukan.
Terima kasih atas perhatian anda Semua yang terbaik