This project isn't technically advanced. It's a social experiment. Rather,
it's a model of a social experiment, representing individuals in a group
as free moving nodes in the area of this svg element. Let's start with the
Each animal is initialized with a speed in range [2,5) px/step, a random
direction, and a random initial position somewhere in the svg.
Each animal has 3 "personality" attributes (which define its identity).
The value of each attribute is in the range [0,256). If you haven't
figured it out already, these attributes are presented as the color (rgb
values) of the animal.
Animals can be happy, angry, fearful, or neutral. A happy animal has a
green border and moves toward the other animal that made it happy. An
angry animal has a red border and moves toward the other animal that
made it angry. A fearful animal has a blue border and moves away from
the other animal that scared it. A neutral animal has no border and
Animals are only aware of other animals within 100px of them. If there
are multiple animals within that range, they only respond to the nearest
animal. If there are no other animals in that range, the animal remains
neutral and continues moving in its current direction.
Animals choose to like or dislike another animal based on the l2
similarity between them:
Let a1 = the first animal
Let a2 = the second animal
similarity(a1, a2) = sqrt( (a1.r - a2.r)2 + (a1.g - a2.g)2 + (a1.b - a2.b)2 )
As such, similarity() is symmetrical. The maximum value of
similarity(a1, a2) is 441.6729559300637. The minimum value is,
Each animal also has a tolerance range, between [50,100), and an
aggression level, in range [0, 1). If similarity(a1, a2) <
a1.tolerance, a1 will like a2 and be happy. If similarity(a1, a2) >
441.6729... - 2 * a1.tolerance, a1 will be angry if a1.aggression >
0.5 or fearful if a1.aggression < 0.5.
If two animals a1 and a2 are touching, a1 is angry, and a1.aggression
> a2.aggression, then a2 will die. Obviously this wouldn't happen in
a real social scenario, but this project is an extended metaphor about
zoo animals, and zoo animals kill each other, so here we are. What this
actually represents is a scenario in which an individual leaves a social
group due to conflict with another individual in that group.
This section really isn't organized - it's just a collection of
observations I've made so far. Essentially, it's a series of the more
interesting (and somewhat obvious) consequences of this kind of animal
behavior. I may keep adding to it. I may not.
If there are three very similar animals clustered together, two will
always be closer together than the other, so that slightly further one
will get left out and quickly leave the cluster while the close two
continue to jitter and chase each other.
If you spam add a bunch of animals and wait long enough, you usually end
up with a large group of green-ish animals roughly grouped together near
If you want your own zoo (for whatever inconceivable reason), just add the
following code to your HTML: