- 1429 words -
This is a simulation of Boids: some little digital creatures invented by Craig Renolds. Each Boid has its own perception circle i.e. a limited circle around the creature where it has the ability to see its neighbors and how they behave. In addition to this perception circle all the Boids follow the same basic rules depending on their neighbors behavior.
This kind of simple individual rules allow the emerging of group behaviors which are fascinating to observe -at least to me :)- as they are not lead by a single element of the group but are the result of combined individual behaviors.
This kind of simulation has been used for example to generate crowds of people or flocks of animals in CGI.
TODO: Add a scene of the Uruk Hai walking from LOTR (or something less dorky but still illustrative)
You can play with the different controls over and under the simulation to have a sense of how it works. To get a better understanding you can have a read at the explanation which should help you to understand step by step what is going on here.
The controls of the simulation are not compatible with mobile devices and prevent some features from working. Namely the creation of Boids, by clicking on the screen.
This page is a work in progress which might never get finished as I'm planning another implementation with a different framework, so... to be continued.
| Wiggling | Alignment | Separation | Cohesion |
|---|---|---|---|
Allowed angle {{MAX_WIGGLE_ANGLE}} Intensity {{WIGGLE_ACC_INTENSITY}} Max velocity {{MAX_SPEED}} | Perception distance {{ALIGNMENT_FRIENDS_RADIUS}}px Intensity {{ALIGNMENT_ACC_INTENSITY}}N | Perception distance {{SEPARATION_FRIENDS_RADIUS}}px Intensity {{SEPARATION_ACC_INTENSITY}}N | Perception distance {{COHESION_FRIENDS_RADIUS}}px Intensity {{COHESION_ACC_INTENSITY}}N |
In this part of the page I will detail the different rules followed by the Boids to show how they combine. Each button moves the page to the simulation and sets the rules as I want you to see them when you are reading.
Note that you can use the "Back to explanation" to go back to where you were.
First let's create a single Boid (Click here)
Our Boid is living a monotonous life randomly flying in its 2 dimensional space.
To move, our Boid has two 2 dimensional vectors with a x and y component. One is its speed which allows it to go forward in a direction. And the second vector is its acceleration which is used to change the direction of the speed, allowing the Boid to move smoothly like an actual object on a 2D plan.
We set its allowed wiggling angle to 0° which means that currently the vector representing its acceleration will not change of direction. Consequently our Boid moves in straight lines.
You can change its "Max velocity" setting to see it moving faster or slower
Now let's change its allowed wiggling angle to 50° ( Click here). Our Boid is not moving in straight lines anymore: each time it moves the vector representing its acceleration is randomly rotated which gives it this happy wiggling attitude.
If you increase its max velocity observe how it seems to wiggle less: This is because its speed vector becomes more important than its acceleration vector. To change that in a limited way you can also increase the intensity of the wiggling vector
This is the basic behavior of our Boid, you can click on the screen to add more Boids (or Click here) and you will notice that they all behave as rubber balls bouncing on the edges of the screen... Not really exciting I agree.
To start observing some cool behavior let's enable the first rule: Alignment (Click here)
The green circle around a Boid is the actual representation of its perception circle for the alignment rule: all the neighbors within this circle are "seen" by the Boids and used in the alignment rule
Now we can see that our flock doesn't look as random as before: Boids close to each other start going in the same direction. The alignment rule makes each Boid look at its neighbors' acceleration and incorporate the average of their acceleration it its own. Its acceleration is now a mix of both its own random wiggling and the average acceleration of its neighbors, making them following each other.
This is our first emerging behavior!
As there are only a few Boids on the screen they eventually end up going all in the same direction in a pretty compact group.
Having our Boids going in the same direction is great but they are literally walking (Flying? Crawling?) on top of each other. This is not ideal lets give them some individual space!
To do so we can enable the separation rule (Click here)
The perception circle for this rule is shown in red
This adds a new rule to our Boids behavior: They "see" the position of each of their close neighbors and their acceleration is moved towards the least crowded direction. In other words they continue following the same direction as their friends but they also continually move away from them.
With enough time this gives us the same flock as before but this time it is much more spaced out.
Let's introduce the last rule of our Boids behavior: Cohesion (Click here)
The perception circle for this rule is shown in blue
This rule is not the most obvious to observe right now. It shifts the acceleration of our Boids towards the center of mass of their local flock.
What that means is that each Boids looks at its close neighbors and move towards the center of this group of Boids. This allow the creation of small groups of Boids going in the same direction and staying together (but still not too close to each other, thanks to the separation rule)
That's it! We now have the basic behavior ruling our Boids moves. Now let's add some troubles to their life
To be able observe some emerging behavior let's add a goal to our birds: we will create a target moving randomly on the screen. (Click here).
This target attracts the Boids close to its position: we could see it as a prey like a group of insect for a flock of birds.
Our flock now has a goal! Remember than none of the individual members of the flock is programmed to lead its friends they only obey a list of rules working given what they can see in their circle of perception.
So far our little birds are happily floating in their space and reaching their goal, now let's scare them out!
To make this visualization more interesting let's add some obstacles that our birds can't go through and some predators which will fly through the float and that Boids will try to avoid as much as possible. (Click here)
Look at our Boids! Trying to reach their target while avoiding these mean red circles, aren't they the cutest? 😍
Now that you understand how these little creature behave don't hesitate to play with them!
I did this simulation to allow the user to change the perception circle for each rule as well as its intensity (i.e. how strong it is compared to the other rules and to the birds wiggling). And I have spent a faire amount of time changing all these parameters to create different behaviors... If that is your thing you might have some fun, if it's not you might think that I'm crazy but it's fine because I had a lot of fun creating this page and in the end that is what matters when you code: Having fun!
Here is a bunch of resources I've been using to create this page
Posts in the same category: [p5]