Live Example
Be warned this uses Raphael for rendering, and underscore for semantic sugar.
I wrote a very small program that kind of meets your requirements. (It was fun).
1 A population is generated, each appearing to possess the same phenotypic attributes initially but differ in their skills (for this, speed).
var Critter = function() {
// default the speed to something random.
this.speed = SPEED + Math.random()*SPEED;
// logic module
var logic = function() { ... }
}
...
// initialize an array of critters.
critters: _.map(_.range(0,COUNT), function() {
return new Critter;
})
Create a constructor function for your population member then populate an array of these guys. I've mapped an array of length count to an array of critters. (Cheeky for loop).
Each critter you create will be similar but have different skills (based on Math.random()) but they will contain the same logic unit.
2 A single food source is generated (the same each time)
// trivial Food object.
var Food = function() {
// rectangle with random x, random y, and SIZE as width / height
this.el = paper.rect(Math.random()*WIDTH, Math.random()*HEIGHT, SIZE, SIZE);
};
The food object constructor just places a square randomly on the screen
3 After about 5 seconds of the environment being set up (steps 1 and 2), the population of organisms need to find a way to get to the food source competitively
Setting the environment up:
_.invoke(this.critters, "start", this.food.el.getBBox(), out_of_bounds);
For each critter you invoke their start method.
this.start = function(food) {
// create a player (circle);
this.el = paper.circle(Math.random()*WIDTH, Math.random()*HEIGHT, SIZE / 2);
// set an interval to run the logic over and over.
loop = setInterval(_.bind(logic, this, food), 25);
};
Each critter simply places itself randomly on the screen then calls its own logic over and over in a loop.
4 Only one organism may reach the food item. Upon reaching it, the environment is reset except the organism who found the food item the previous time is now benefitted and its speed level might increment while the others who did particularly terrible may get even slower or be terminated
var logic = function(food) {
// if you hit food you win
if (this.el.collision(food)) {
this.win();
}
}
// you won
this.win = function() {
console.log("win");
// increase speed
this.speed += Math.random()*5;
// end round
Game.end();
};
The critter will detect whether it has the food in the logic loop. Once it has the food it calls its own win method. This ends the current game round.
When a critter wins it gets a speed boost.
The game will restart itself when you call .end (after removing all current critters)
end: function () {
// tell all critters to end their round
_.invoke(this.critters, "remove");
// remove the food
this.food.el.remove();
// start again !
this.start();
},
5 Process is repeated; the user may observe the traits of the population and see which ones are succeeding evolutionarily, etc.
Watch the live example :)
6 What's next:
- Tweak global numbers and other hard coded numbers
- Implement some AI in the
logic function.
- Go through all the jsfiddles from /1 to /180 and see how it was build up.
- Complain that comments are not detailed enough
- Throw my code away and start from scratch now that you've seen an example.
- The birth code just creates a "basic" Critter. It doesn't breed from two existing
critters and doesn't have increased skills. This means no evolution.
Bonus:
Travels towards food
Warning: The above link does travel towards the food but it's doing something wrong, there's a dodgy bug in there I think. I don't think I'll get round to fixing that.
I'll explain the logic to travel towards the food
// angle between critter and food
var angle = Raphael.angle(
this.el.getBBox().x,
this.el.getBBox().y,
food.x,
food.y) - 135; // the 135 is the default direction (bottom right)
// get a random speed
var rand = Math.random()*this.speed;
// travel towards the food box by rotating your vector by the angle
var points = this.rotateVector([rand, rand], angle);
// move towards the box
this.el.translate(points[0], points[1]);
First rand creates a random vector that looks like this:
![enter image description here]()
The Math.random() determines how far / fast the critter moves. This is pointing towards the bottom right corner.
Because it's pointing towards bottom right corner we have to remove 135 degrees from the angle for this vector
![enter image description here]()
We then have to calculate the angle between the critter and the food. We do this by passing in two points to Raphael.angle and it calculates the angle for us.
![enter image description here]()
Now we have the angle and we want to rotate our movement vector by that angle. The movement vector is currently pointing up (black) and we want to rotate it by the angle to it's new position (red). In the code this is this.rotateVector
![enter image description here]()
Now were pointing in the right direction ! We can just call this.el.translate(points[0], points[1])
