Wednesday, July 03, 2013

Electro-Flock: Modelling Flocks using Simple Electro-Magnetism

Flocks are easy to model if you use physics instead of biology

Look - Its all done with magnets!
Electro-Flock is a simple flocking algorithm that relies only on Coulomb's Law, the single physical equation that describes how electrically charged particles interact. The project uses CoffeeScript, JQuery, HTML5 and Processing.js.

I started this project with the feeling that flocking algorithms were too specific. I wanted to see if I could write a really simply algorithm that didn't know it was meant to be a flocking algorithm. I had a feeling that electro-magnetism might just be the key to a really fundamental, self-organising flock. Was this feeling justified? -  Judge for yourself Play with the Electro-Flock Demo

Saturday, May 04, 2013

Self Organising Fun : A Force Directed Graph in CoffeeScript

Emergent Self Organising Behaviour using CoffeeScript, JQuery and Processing.js

What is a Force Directed Graph and why bother spending time coding one in CoffeeScript? 
A Force Directed Graph is a collection of nodes and links that self-organises until its nodes are as far apart as possible and the links do not cross. They appeal because self-organisation is just so intrinsically fascinating and, more professionally, because the project allowed me to bring together a whole set of exciting web technologies including CoffeeScript, JQuery, HTML5 and Processing.js.

Before reading any further why not Play with the Force Directed Graph Demo

Or if you really want to blow your mind why not take a look at the innovative and beautiful flocking system based solely on the principles of electromagnetism Electro-Flock: Modelling Flocks using Simple Electro-Magnetism.

They did it all by themselves
How did it turn out? 
I started this project wondering if CoffeeScript would be worth learning and finished it vowing never again to write another line of naked JavaScript. I also found the combination of CoffeeScript and JQuery to be a powerful and elegant solution to the problem of coding against the browser. Finally, using the Processing.js library coupled to an Html5 canvas  tag meant I could tap the GPU of the client's graphics card and so achieve the smooth visualisation of forces and vectors I wanted.