Karsten Schmidt<p><a href="https://mastodon.thi.ng/tags/HowToThing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HowToThing</span></a> #025 — Sampling, fitting, transforming & plotting 10k data points per frame using a whole bunch of underexposed thi.ng packages:</p><p>- <a href="https://thi.ng/colored-noise" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/colored-noise</span><span class="invisible"></span></a>: using violet noise as fake data source<br>- <a href="https://thi.ng/matrices" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/matrices</span><span class="invisible"></span></a>: fitting/transformation matrix creation<br>- <a href="https://thi.ng/simd" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/simd</span><span class="invisible"></span></a>: WASM-based batch processing<br>- <a href="https://thi.ng/malloc" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/malloc</span><span class="invisible"></span></a>: Memory management for WASM/SIMD data buffers<br>- <a href="https://thi.ng/hiccup-canvas" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/hiccup-canvas</span><span class="invisible"></span></a>: 2D canvas visualization</p><p>As noted in the comments, the SIMD batch processing here is to illustrate the overall usage and handling. In this specific example, the main bottleneck is the actual canvas drawing step (esp. in Firefox, which in this case is ~3.75x slower than Chrome [latter easily manages 60fps]). The SIMD step could handle magnitude(s) more points per frame, also on FF...</p><p>As an aside, this is now already the 140th (!!!) fully documented small example project, bundled as part of the <a href="https://thi.ng/umbrella" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">thi.ng/umbrella</span><span class="invisible"></span></a> monorepo... Please do tell me at which point the prejudice of not having enough starting points & info about these packages will be fading into oblivion... 😅</p><p>Demo:<br><a href="https://demo.thi.ng/umbrella/simd-plot/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">demo.thi.ng/umbrella/simd-plot</span><span class="invisible">/</span></a></p><p>Source:<br><a href="https://github.com/thi-ng/umbrella/tree/develop/examples/simd-plot/src/index.ts" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/thi-ng/umbrella/tre</span><span class="invisible">e/develop/examples/simd-plot/src/index.ts</span></a></p><p>Also big thanks to Maximillian Schulte for sending me off on this topic (as a tangent) via an issue on GitHub... I've been meaning to create more examples for these above packages for a while! Last but not least, hat tip & nerd sniping <span class="h-card" translate="no"><a href="https://mastodon.gamedev.place/@demofox" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>demofox</span></a></span> re: colored noise... 😎🤩</p><p><a href="https://mastodon.thi.ng/tags/ThingUmbrella" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ThingUmbrella</span></a> <a href="https://mastodon.thi.ng/tags/WebAssembly" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebAssembly</span></a> <a href="https://mastodon.thi.ng/tags/SIMD" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SIMD</span></a> <a href="https://mastodon.thi.ng/tags/SharedMemory" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SharedMemory</span></a> <a href="https://mastodon.thi.ng/tags/DataViz" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>DataViz</span></a> <a href="https://mastodon.thi.ng/tags/Noise" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Noise</span></a> <a href="https://mastodon.thi.ng/tags/TypeScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>TypeScript</span></a> <a href="https://mastodon.thi.ng/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.thi.ng/tags/Tutorial" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Tutorial</span></a></p>