Screenshot of the thi.ng/colored-noise readme section about violet noise, showing 4 ASCII-art histograms using different configurations

Notices where this attachment appears

1. Embed this notice
   Karsten Schmidt (toxi@mastodon.thi.ng)'s status on Tuesday, 24-Oct-2023 00:22:06 JST Karsten Schmidt

   #HowToThing #025 — Sampling, fitting, transforming & plotting 10k data points per frame using a whole bunch of underexposed thi.ng packages:

   - https://thi.ng/colored-noise: using violet noise as fake data source
   - https://thi.ng/matrices: fitting/transformation matrix creation
   - https://thi.ng/simd: WASM-based batch processing
   - https://thi.ng/malloc: Memory management for WASM/SIMD data buffers
   - https://thi.ng/hiccup-canvas: 2D canvas visualization

   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...

   As an aside, this is now already the 140th (!!!) fully documented small example project, bundled as part of the https://thi.ng/umbrella 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... 😅

   Demo:
   https://demo.thi.ng/umbrella/simd-plot/

   Source:
   https://github.com/thi-ng/umbrella/tree/develop/examples/simd-plot/src/index.ts

   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 @demofox re: colored noise... 😎🤩

   #ThingUmbrella #WebAssembly #SIMD #SharedMemory #DataViz #Noise #TypeScript #JavaScript #Tutorial