Adding Organisms
The first organism we'll create is called "spore". These spores are tiny and just kind of drift around in our ecosystem, like simple plankton. In your project, open the folder js and open the file named SPORES.js.
At the top of the file you'll see an object containing a bunch of pre-filled-out settings. We'll be using settings like this to customise the behaviour and appearance for each organism, so you can easily tweak them as as we go.
Randomness
Under the header INITIALISE, you'll see an existing function called Spore. We'll be adding to this, its going to be our constructor function, used to set up each new spore instance.
function Spore() {
this.settings = sporeSettings;
}
Much of the behaviour and variety of our scene will be created by generating random numbers. Javascript has an inbuilt method for generating (pseudo) random numbers, in the form of Math.random(). You can read more about generating numbers this way here.
For this workshop we'll be using a small javascript library (already included in the project files) called tombola.js, which contains a set of premade functions for generating random numbers and chance events.
Let's Code!
So the first thing we want to do to our spores is give them a randomised position on the screen. We can use the method tombola.range(min, max) to give us a random number between a min & max value. We can use it twice, once for the x axis, and once for the y axis, to give us a randomised position between two co-ordinates. Update the function Spore to look like this:
function Spore(x1, y1, x2, y2) {
this.settings = sporeSettings;
// randomise position //
this.position = new Point(tombola.range(x1, x2), tombola.range(y1, y2));
}
*Point is an object containing x & y properties. It, along with a few other common maths functions we'll use, have already been defined in the file UTILS.js.
We have some more to do to the function Spore, but let's jump ahead to creating some instances and drawing them, so we can see what we've got.
Under the header DRAW you'll find an empty function. This is going to be a method of Spore, its going to get called every frame to display and animate our spore instances.
Spore.prototype.draw = function() {
};
For now we'll do some simple Canvas drawing. Here is a great primer on Canvas and how it works. Modify the draw function to look like the below snippet. You can find out more about the translate method here.
Spore.prototype.draw = function() {
// set color //
ctx.fillStyle = this.settings.color;
// move to spore position //
ctx.save();
ctx.translate(this.position.x, this.position.y);
// draw dot //
ctx.fillRect(-1, -1, 2, 2);
// reset drawing position //
ctx.restore();
};
Okay so we have a simple draw method, it moves to an instance's position on the screen, and draws a dot there with a given color which comes from the settings.
Creating Instances
We're now going to move to a different file, open up MAIN.js. This file contains an init function which is called when the page loads, as well as our main animation loop for the app.
Under the heading GENERATE you'll find an empty function called generateSpores. We're going to fill out this function to take a number, and two sets of co-ordinates, and it will use a for loop generate a bunch of instances of Spore within those co-ordinates, saving them to an array called spores:
function generateSpores(n, x1, y1, x2, y2) {
for (var i=0; i<n; i++) {
spores.push( new Spore(x1, y1, x2, y2) );
}
}
Now we want to call this function when our page loads. Go to the function init. within it, under the comment GENERATE ORGANISMS (line 38) we'll add the below code, to create 60 instances of Spore randomly position on the screen:
generateSpores(60, 0, 0, width, height);
One more thing we want to do here, and that's loop through all of the instances of Spore we've created, and call their draw method.
Still in MAIN.js, scroll down to the function called draw. This is a main draw loop for the app which gets called 60 times per second. Under the comment LOOP THROUGH SPORES... add this loop:
for (var i=0; i<spores.length; i++) {
spores[i].draw();
}
Alright! that's probably a lot to digest for now, but load up