O projektu
DotWave.js je JavaScriptová knihovna, kterou jsem vytvořil pro své stránky. Když už jsem ji vytvářel, rozhodl jsem se ji rovnou nahrát na GitHub a alespoň trochu zdokumentovat, abych se o ni podělil s ostatními.
Ukázka
Jak to funguje
Kód používá IIFE (zkratka pro "Immediately Invoked Function Expression"), díky čemuž nebude narušovat globální proměnné a funkce. Po inicializování DotWave knihovna vytvoří canvas element, připojí ho k vybranému kontejneru a nastaví pro něj správné rozměry. Poté vygeneruje tečky s náhodnými vlastnostmi, přidá funkci na detekci pohybu myši a změnu velikosti okna, a spustí smyčku, která tečky animuje.
Vlastnosti teček
- Pozice (souřadnice x, y)
- Hloubka (hodnota z, kde 0 = daleko, 1 = blízko)
- Velikost (poloměr v pixelech)
- Průhlednost (založená na hloubce)
- Rychlost (vx a vy pro pohyb)
- Znásobení rychlosti (hlubší tečky se pohybují pomaleji)
Postup animace
- Vymaže canvas
- Pro každou tečku vypočítá vzdálenost od kurzoru
- Přídá rychlost a směr podle kurzoru myši
- Přidá trochu náhodnosti
- Podle tření se tečky zpomalí
- Aktualizuje pozici tečky
- Vykreslí tečku na nové pozici