Today, after a little over eight years, I present a sequel to NetKernel PingPong. Like it’s predecessor, FlockingBoids aims to find that delicate balance between executive toy and technology demo. Finding cool new technologies was the easy part - we’ve got HTML5 (canvas and websockets), JSON, Box2D, and of course NetKernel, your rock solid high performance plumbing. Finding time for executives to play was a little harder…
What it does
FlockingBoids is a web app that performs a mathematical simulation of autonomous boids which interact in a two dimensional world according to realistic laws of physics. The boids have a direction and have powered flight in the direction they point. In addition to obeying these basic physical laws the boids also exhibit some, if not intelligent then, smart behaviour. By observing their surroundings they can decide to turn and/or slow down. There has been quite a bit of research in this area and it has been shown that by following three simple rules quite sophisticated behaviour that is very similar to observed behaviour in a range of real lifeforms can emerge.
Each boid is autonomous and follows these rules:
- Avoidance - by looking for other boids or obstructions within a certain range and then taking evasive action to avoid them.
- Alignment - by looking for other boids within a certain range and determining their mean bearing, then having a tendency to orient themselves to this mean bearing.
- Attraction - by looking for other boids with a certain range, then having a tendency to move towards the center of the group.
Each of these three rules are applied simultaneously with weightings that can be configured with slider controls within the app. In addition to these behavioural rules there are controls to all the physical parameters. You can vary the world size, the number of obstructions and their positions. Full details of all the controls is documented within the app but with 17 sliders to play with there is plenty to explore.
In the top left of the page there is a presets section. I have setup a few examples to show a range of behaviours and currently I’ve left it open for you to create new ones. This feature is obviously open to abuse so I might need to throw the switch and make it read-only - be warned!
How it works
Each client that connects to the HTTP server gets served a page which initiates a websocket back to the server. The server limits the number of concurrent connections because of the relatively high bandwidth requirements. This can be up to 200KB/s depending upon the number of active boids. Once the connection is established the server sends a JSON message back to the client with the default world configuration. This sets the sliders and draws the world. On the server a Box2D physics simulation is setup unique to the client and 40 times every second the boids process their rules and the simulation is time-stepped. It’s in interesting fact that these kinds of physics engines run with discrete and configurable time-steps. When they detect collisions and other time/position critical events that may happen part way between steps they then interpolate. After processing the simulation the current state is sent back to the client as a JSON message with the positions and directions of each boid. The client has two HTML5 canvases on top of each other. The lower one contains the background and the top one is cleared each frame and has the boids drawn onto it.
Events from the client from things such as moving sliders or dragging the obstructions are send back to the server over the same websocket. These then update the simulation in realtime.
Presets are stored in Persistent Data Store PDS (NetKernel’s abstracted data storage mechanism)
Give it a try
We’ve hosted FlockingBoids so give it a try now!