Motion & Variation
Alright so we have a little variation in the form of our spores positions onscreen, but we should add more! and let's get things moving around while we're at it.
Go back to the file SPORES.js and let's take another looks at the Spore constructor function. There's some more things we can randomise, we can change up the size, we can make a visual variant (i.e we'll have 2 varieties of spores now), and we can randomise some motion.
Variety
We'll use tombola.js again to randomise things, 2 new methods this time, rangeFloat(min, max), which returns a float value (decimal value) between min & max, and percent(percentage) which randomly returns true or false given a likeliness. 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));
// randomise other properties //
this.size = tombola.rangeFloat(this.settings.small, this.settings.large);
this.variant = tombola.percent(this.settings.variation);
this.speedX = tombola.rangeFloat(-this.settings.speed, this.settings.speed);
this.speedY = tombola.rangeFloat(-this.settings.speed, this.settings.speed);
}
We've created some new properties of Spore here, including two speeds, one for each axis, x & y. These are what we'll use to create random movement. Here is a good video on this topic.
Motion
Okay let's look at Spore's method named update. Again we have an empty function waiting for us, but this is where we want to create our movement/animation. Much like the draw method, the update method will be called every frame. Update gets called first, It'll slightly modify a spore's position, then draw gets called, drawing each spore at it's new position, creating animation. Fill in the update function like this:
Spore.prototype.update = function() {
// Randomly increase or decrease horizontal & vertical speeds //
this.speedX += tombola.rangeFloat(-this.settings.fluctuation, this.settings.fluctuation);
this.speedY += tombola.rangeFloat(-this.settings.fluctuation, this.settings.fluctuation);
// Cap the max speed so it doesn't get out of control //
this.speedCap();
// Update the position by adding the speed to it //
this.position.x += this.speedX;
this.position.y += this.speedY;
// Wrap around the screen boundaries //
screenWrap(this);
};
The methods speedCap and screenWrap have been pre-written. What we're doing here is adding random numbers to the speeds each frame, so we need to make sure the numbers don't get too big. We also want our organisms to wrap around the screen, so that if one floats offscreen to the left, it'll reappear on the right etc.
Alright, let's update the draw method as well. We'll make it so that if variant = true, we draw a diamond shape for the spore's appearance.
Spore.prototype.draw = function() {
// set color //
ctx.fillStyle = this.settings.color;
ctx.strokeStyle = this.settings.highlight;
// set size //
ctx.lineWidth = 4 * scale;
var s = this.size;
// move to spore position //
ctx.save();
ctx.translate(this.position.x, this.position.y);
// draw //
if (this.variant) {
s *= 2;
ctx.beginPath();
ctx.moveTo(0, -s);
ctx.lineTo(s, 0);
ctx.lineTo(0, s);
ctx.lineTo(-s, 0);
ctx.closePath();
ctx.stroke();
} else {
ctx.fillRect(-s / 2, -s / 2, s, s);
}
// reset drawing position //
ctx.restore();
};
Only one more thing to do here, go back to MAIN.js. Go to the update function this time, and under the comment LOOP THROUGH SPORES... add this loop:
for (var i=0; i<spores.length; i++) {
spores[i].update();
}
Load up index.html in the browser again, you should see a load of spores in two varieties floating around as if drifting in water. We've just made dinner for our next organism!