Earlier this week I came across a very interesting site by Mike Kamermans which had a demonstration of the Euler spiral (also known as the Cornu or Fresnel spiral) using processing.js. Very interesting! After a quick read of the wikipedia article (and discovering my Maths is rusty) I decided to create a version of my own using my current favourite toy: Three.js by Mr doob.
I’ve put together a few user controls using jQuery UI that you can use to change certain aspects of the animation:
- Scaling: Scale along the X and Z-axis.
- Y axis increment: Add some depth along the Y-axis.
- Selective particle freeze: Exclude certain particles from the animation.
- Y-Axis target: Adjust the camera target in the Y direction.
- Freeze all particles: Exclude all particles from the animation.
It’s amazing what a simple set of mathematical equations can achieve. In terms of web technology, my next step is to add a version using the HTML5 Web Worker API (see update below) that will take the calculations off the UI thread allowing for a more responsive browser UI when animating a large number of particles.
Why not have a play with the demo and let me know what you think!.
Update: I’ve now added a version using Web Workers located here. A couple of things to note from this demo:
- While using the Workers for the animation data I’ve had to limit the animation to 10fps (down from 60fps). Surprisingly enough browsers don’t like it when you spawn 60 worker threads per second :)
I’ll be sticking to using the main thread for calculation in the future as there’s no advantage to using Web Workers, but it was interesting proof of concept.