Animating the Euler Spiral

First published: Read time: 2 mins

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.

Euler Spiral using mr doobs three.js
There are a few settings available to change so have a play around.

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.

Note: Try the demo using both Firefox and Chrome; you can really see the difference between the Tracemonkey (FF) and V8 (Chrome) JavaScript engines.

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:

  1. Web Worker threads run asynchronously below the main JavaScript thread, so be careful when trying to use the returned data. Be sure that the data exists by using the ‘worker.onmessage’ callback before you fire any dependencies. If you don’t then expect quite a few “Undefined” error messages!
  2. 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.