$ JavaScript ile Kayan Yazı LED Tabela Simülasyonu Yapımı

Piyasada sıkça gördüğümüz, araçların arka camlarına veya dükkan vitrinlerine konulan RGB kayan yazı tabelalarını hepimiz biliriz. Peki, böyle bir cihazın çalışma mantığını bir web tarayıcısında, sadece JavaScript ve HTML Canvas ile simüle edebilir miyiz? Cevap evet! Bu makalede, popüler bir model olan "Ayt Powermaster PM-23823" benzeri bir tabelayı nasıl yapabileceğimizi adım adım inceleyeceğiz.

Projenin Arkasındaki Mantık

Bu simülasyonun kalbinde HTML <canvas> elementi yatar. Canvas, JavaScript ile ekrana piksel piksel çizim yapmamızı sağlayan güçlü bir araçtır. Projemiz şu adımlarla çalışır:

1. Sanal Tuval Oluşturma: İlk olarak, metnimizi bir "hafıza tuvaline" yazarız. Bu tuval ekranda görünmez, sadece metnin piksel verilerini elde etmek için kullanılır.
2. Piksel Haritası Çıkarma: Hafıza tuvaline yazdığımız metnin her bir pikselini tarar ve eğer bir piksel metne aitse, konumunu bir diziye kaydederiz.
3. Animasyon Döngüsü: requestAnimationFrame ile saniyede 60 kez tekrarlanan bir animasyon döngüsü başlatırız.
4. Arka Plan Izgarası: Her karede, kapalı LED'leri temsil eden soluk bir ızgara çizeriz. Bu, tabelaya derinlik hissi katır.
5. LED'leri Çizme ve Işıma Efekti: Piksel haritasını kullanarak, metne denk gelen LED'leri çizeriz. Her LED için shadowBlur ve shadowColor özelliklerini kullanarak onlara gerçekçi bir "glow" (ışıma) efekti veririz.
6. Kaydırma: Metnin başlangıç pozisyonunu (x koordinatını) yavaşça sola kaydırırız. Metin ekrandan tamamen çıktığında, döngünün başa dönmesi için pozisyonunu sıfırlarız.