A project to learn rust + web interface . Focus on reactiveness

Hello all!
I am starting to learn rust and I'm doing it by implementing the Fourier transform to obtain the frequency spectrum of a signal (generic numeric sequence, WAV file,...). I know there are plenty of libraries that already do it (also in rust), but I want to do it from scratch. This is the first step, but then I would like to add a web frontend interface to plot nice charts. As a further improvement I would like to plot the spectrum as the file is playing, so, to do this, I need a very fast framework, that draw the spectrum in real time with the data provided by the backend continuously (a kind of pipe). I'm sure you already saw something similar around. Can you suggest a good set of tools to obtain such a result? And maybe some tutorial on the topic? Thank you

I'm sure others will chime in with the Rust-specific angle, but for web rendering if you want best performance then you want to create your own Canvas context, ideally with webgl, and flush your draw calls in a requestAnimationFrame() loop. This is a pretty large topic on its own, especially if you go the webgl route.

You'll probably want to do some level of the audio I/O with the Web Audio API, even if you want to do the number crunching itself in pure Rust. For Rust/WASM you use the web_sys bindings to access all that, including the fancier parts of Web Audio, for example: AnalyserNode in web_sys - Rust

Note that the browser runtime is single-threaded (both JS and WASM), though you can do a form of multi-threading-ish with workers. Realistically though, you won't need this, since all your processing (including rendering) is likely going to fit well under a reasonable time budget of 16ms, and the web audio part itself already runs in a separate thread under the hood.

Sounds like a fun project, feel free to share when you've got something :slight_smile:

This egui demo has some "plots" and other goodies. egui is fast. It has limits, because it does what it does and not much else. But for plotting stuff you might give the sources a look. The demo sources are "easy?" to read. Hard to figure out how it all glues together but the individual demos are readable / short . The whole thing is rust. Runs web or native so you can get web page or binary program. It has some basic widgets.
On my testing with native compile, on a basic computer, and modifying the source of the fractal clock demo, I could get 65535 clock arms to draw per frame before it started to lag.
On my experiments, making sliders and getting numbers from them, egui widgets were smooth and fast.
html <input type="range".. is slow.

Egui is fast you will see when you play with the demo, but it is a work in progress.

As dakom pointed out using canvas and webgl. You can maybe cheat, put a 3d inside egui. I have not tested, but there are some examples
Also as pointed out if doing sound on he web, webaudio is probably a good idea.

Thank you all for the support. I got lot of stuff to work on! :grinning: