Tento skript sice také není k ničemu, ale ukazuje, že lze použít Webassembly i bez jakýchkoli grafických knihoven, pokud jde jen o vykreslování čar (ale třeba i kroužků - nakreslit kruh jde i bez trigonometrických funkcí, jen pomocí násobení a sčítání, je ale potřeba trochu znát vlastnosti unitárních matic). Sice to není hezké, ale zato je to hodně malé. Možná i rychlé, ale o to zde moc nešlo. Spíš šlo o to použít něco, co by bylo v samotném javascriptu pomalé nebo neohrabané. Zde je to řešení soustavy nelineárních diferenciálních rovnic metodou Runge-Kutta 4.řádu. To je v C++ prosté, rychlé a poměrně přesné. Wasm část trajektorie vyklesluje do paměti, problém je to zpátky zobrazit. Je potřeba z toho udělat obrázek a k tomu je nutný pomocný canvas, což docela zdržuje. Je tu ukázána (celkem zbytečně) i metoda jak vytvořit obrázek pozadí a přes to překreslit samotné trajektorie - vrchní obrázek musí být průhledný. I když ty transformace dat asi nejsou udělány nejlépe, funguje to celkem svižně, lze udělat 60fps při zatížení procesoru 80%. Přitom v každém kroku je možné udělat až 200 iterací rovnic a na zatížení se to moc neprojeví. Zřejmě to nejvíc zabíjí to zobrazování. Je to jedna z mála možností, kde by wasm kód mohl mít alespoň trochu smysl. Měl jsem to samé uděláno v Qt (tedy i pro Webassembly), ale celé to zabralo 13MiB, tohle má celkem jen asi 82 KiB. A to je docela znát.
25.01.2023 - upraveno jako bare bone modul, tzn. není potřeba emscripten, jen clang. To potlačilo hodně zbytečného lepidla v javascriptu, takže teď to má celkem jen asi 13 KiB. To sice není zase tak podstatné, ale zkusil jsem udělat postupné stmívání vykreslované čáry tak, jak by to dělal třeba analogový osciloskop s dlouhým dosvitem (i když ten není obvykle barevný). Dost dlouho jsem si lámal hlavu, jak tohle udělat. Nakonec se ukázalo jako nejjednodušší udělat neprůhledný podklad (ta síť) a přes to plácnout obrázek do kterého se to vykresluje s tím, že jeho průhlednost je řízena. Řízení je vlastně jednoduché - při každé iteraci se snižuje hodnota (a) v barvě (rgba) až na nulu. Sice to zabírá dost procesorového času (je třeba prolézt všechny pixely), ale není to zase tak hrozné, takže i to se dá počítat ve smyčce událostí.
I když jsou v tom chyby a zřejmě to není optimálně napsáno, přibalím i zdrojáky.