Swarm Intelligence in HTML5 Canvas

Swarm Intelligence – I wanted to visualize different ways of particles following each other for some time now but have never really gotten to the point of doing it until one day, I was browsing through lots of amazing things people have made using HTML5 Canvas. One of these things was Daniel Puhes Liquid Particles canvas thingy which immediately reminded me of my idea and I thought – why not try and do it using HTML5 canvas? I wanted to try canvas out a little bit anyway. So, I asked Daniel for permission to use his code as an “engine” for my idea and he was ok with that. Thanks Daniel! He also made some more pretty cool stuff so go and check that out if you want.

So I took his code, refactored it a fair bit, made it so that particles follow each other instead of following the mouse and that’s how Swarm Intelligence was born. I do know that this is not real AI but I don’t care, I just like to call it that way anyways. :)

At the moment there are three different algorithms that make particles follow each other:

  • swarm – each particle targets a random particle from the swarm and follows it for next 5000-10000 canvas refresh cycles. after that, it randomly finds a new one and follows it for next 5000-10000 refresh cycles and so on
  • tail – each particle targets a different random particle on each canvas refresh cycle and follows it for a single refresh cycle after which it targets a new random particle and then follows than one for a single refresh cycle and so on
  • lead – all particles follow the same (single) particle which moves randomly inside the canvas a bit faster than all the other particles

Algorithms change randomly over time but can also be changed manually by clicking  the left mouse button somewhere inside the canvas. I also introduced some chaos into the system so it wouldn’t stabilize itself over time. For example, every now and then some particles get randomly blown away from the swarm a little bit. Also, after some time all the particles will get blown away at the same time. I plan to add two or three more following algorithms when I get the time. One of them will be following the nearest particle but I will have to come up with one bad-ass algorithm to not kill the performance. Soon I guess. Or not. :D

Algorithm indicator in the top left corner of the canvas introduced some performance problems. Apparently, drawing text inside canvas is very, very poorly implemented in all browsers except Chromium. The problem I had was that I would redraw a line of text inside canvas on each refresh cycle (every 70ms) which slowed it down a fair bit if you tried to run it in anything else except Chromium. Redrawing the text on each cycle wasn’t really necessary since the text stays the same most of the time so what I did was – on top of the old canvas frame I added a new one which redraws text only when the following algorithm gets changed. That turned out to be a pretty good solution.

Nothing more to say about this small experiment I guess.. except – enjoy it! :)