Rust & WebAssembly Chaotic Attractor
Visualizing Performance with Rust and WebAssembly
Following up on my previous JavaScript implementation of Clifford A. Pickover's chaotic attractor, I decided to recreate the computationally heavy inner loop of the attractor in Rust and compile it to WebAssembly (WASM).
The core idea behind this project is to use the chaotic attractor as a visual benchmark. It allows users to directly visualize the performance differences between an ES6 JavaScript implementation and a compiled Rust-WASM module, running in real-time in their own browser and on their own hardware.
The Mathematics
Just like the original project, the image is generated by computing a histogram of the points visited by continuously iterating the chaotic attractor equations in the background.
The attractor is defined by the following equations:
x = sin(b*y) - c*sin(b*x)
y = sin(a*x) + d*cos(a*y)
where a, b, c, and d are floating-point variables that define each unique attractor. For each new image, these four variables are chosen at random. The point (x, y) is continuously updated, and the corresponding pixel intensity is modified to slowly reveal a beautiful, never-before-seen picture.
Why WebAssembly?
By refactoring the inner loop into a Rust module, the parent Vue application can now dynamically switch between using the native JavaScript module or the WebAssembly module to compute the next frame's pixels. This serves as an excellent demonstration of how WASM can be seamlessly integrated into modern web applications to accelerate CPU-intensive tasks without sacrificing the UI flexibility of a JavaScript frontend framework.
Source Code
You can explore the source code for the Rust/WASM module on GitHub: dmaynard/rust-wasm-attractor