JS ile Winamp benzeri görselleştirici uygulaması

MOD: Evolving Chaos

FPS: 60

🖰 Tıkla: Tam Ekran (ESC: Çıkış)

HTML5 Canvas ve Web Audio API ile Winamp Tarzı Sonsuz Görselleştirici (Visualizer)

90'ların ve 2000'lerin efsanevi medya oynatıcısı Winamp, sadece müzik çalmasıyla değil; ekranda müziğin ritmine göre biçimden biçime giren o büyüleyici Milkdrop ve AVS görselleştiricileriyle hafızalarımıza kazındı. Yukarıda çalışan uygulama, hiçbir dış kütüphane kullanılmadan saf HTML5 Canvas ve JavaScript ile hazırlanmış sonsuz bir görselleştiricidir.

🚀 Öne Çıkan Özellikler

• Sonsuz ve Evrimsel Görseller: Algoritma 8 saniyede bir simetri, renk paleti, dönüş hızı ve geometrik formül parametrelerini değiştirir. Bu sayede görseller asla birebir kendini tekrar etmez.
• Tam Ekran Desteği: Görselin herhangi bir yerine veya "Tam Ekran" butonuna dokunarak uygulamayı tam ekrana geçirebilir, ESC tuşuyla çıkabilirsiniz.
• Müzik ve Mikrofon Duyarlılığı: "Ses / Mikrofon Başlat" butonuna tıkladığınızda Web Audio API devreye girer; şekiller ortamdaki sesin/müziğin ritmine göre genleşir ve parlar.
• Sentetik Otomatik Mod: Mikrofon erişimi olmadığında bile sistem matematiksel dalga fonksiyonlarıyla (trigonometri) kendi ritmini üreterek çalışmaya devam eder.

🛠️ Kodun Teknik Çalışma Mantığı

1. Kapsül Yapı ve Ekran Adaptasyonu

Kod bloğu, Blogger veya diğer içerik yönetim sistemlerinin temalarıyla çakışmaması için bağımsız bir kapsayıcı (.blogger-winamp-container) ve IIFE (Self-Executing Function) yapısı kullanır. Ekran veya tam ekran boyutu değiştikçe resize() fonksiyonu tuval çözünürlüğünü otomatik olarak yeniden hesaplar.

2. Ses Analiz Motoru (Web Audio API)

AudioContext ve AnalyserNode kullanılarak ortamdaki ses 256 parçalı frekans dizisine bölünür. Elde edilen ses enerjisi (audioEnergy), çizimlerin kalınlığını, parlaklığını (glow efekti) ve hareket hızını doğrudan etkiler.

3. Matematiksel Çizim ve Akıcı Geçişler (Lerp)

Sistemde 4 farklı kutupsal matematik modeli tanımlıdır:

Spirografik Türev

Sinüs ve kosinüsün çarpışmasıyla oluşan iç içe halkalar.

Harmonic Rose

Gül eğrisi trigonometrisi ile simetrik yapılar.

Akışkan Lissajous

Üstel fonksiyonlarla organik ve kıvrımlı kelebek formları.

Hiperbolik Tünel

Tangent (tan) fonksiyonu ile derinlik hissi veren optik tünel.

Modlar arası geçişlerde şekillerin aniden sıçramasını önlemek için Doğrusal İntrapolasyon (Lerp) tekniği kullanılır. Şekiller bir biçimden diğerine sıvı gibi akar.

4. Motion Blur / Işık İzi Efekti

Her çizim karesinde Canvas tamamen silinmez; üzerine yarı saydam siyah bir örtü çekilir (decay parametresi). Bu işlem, Winamp'ın klasik neon ışık izi ve akıcılık efektini oluşturur.