#### Intro

Here's another post in the "canvas drawing series". The previous posts usually had only one example, this one will be about three examples. You can look up the basics of drawing etc. in the previous posts:

#### Oil pump jack

The parts are named after this wiki page describing the functioning of an oil pump jack. On every animation frame the angle of an engine is increased by a fixed amount making the circular motions of the engine. The engine rotation is pretty simple and is using just the cos and the sin mathematical function.

Determining the height of a walking beam is a bit more complicated and needs to be done in two steps. In the first one the joint on the engine crank is found by this code:

var crankJoinX = engineX + Math.cos(angle) * engineCrankL * 0.7; var crankJoinY = engineY + Math.sin(angle) * engineCrankL * 0.7;The second is to determine the pitman arm position. With engineX and engineY being the center of the rotation for the crank. The pitman arm always has a fixed x coordinate. With having a fixed rod length the height is determined by this formula:

var pitmanY = crankJoinY - Math.sqrt(Math.pow(rodLength, 2) - Math.pow(crankJoinX - engineX, 2));

Pump jack's head has a certain curve enabling it to always pull the polished rod straight up. The math behind it is a bit more complicated than calculating the pitman arm position:

ctx.arc( samsonPostX, samsonPostY, beamHalfLength + headWidth, Math.asin((samsonPostY - pitmanY) / beamHalfLength), Math.asin((samsonPostY - pitmanY + headNoseHeight) / beamHalfLength) );Oil pump jack - Codepen

Oil pump jack - GitHub

#### Particle Tornado

This one seems to be a very popular example. It even got mentioned on twitter by David Walsh:

The best demo you'll see all day:codepen.io/msval/pen/yAwGa

— David Walsh (@davidwalshblog) May 19, 2013

Believe it or not it's actually quite easy to code. Everything we need is contained in this function:

Particle.prototype.draw = function () { // change particle position this.angle += angleSpeed; this.h -= verticalSpeed; // if the particle is outside of canvas //make it appear back on random position if (this.h < 0 || this.h > canvas.height) { this.h = Math.floor(canvas.height * Math.random()); } ctx.beginPath(); ctx.fillStyle = singlecolor ? defaultColor : this.color; // single line of code makes it look like 3d var sizeFactor = 0.5 + (Math.sin(this.angle) + 1) / 2; ctx.arc( canvas.width / 2 + Math.cos(this.angle) * (canvas.height - this.h) / widthFactor, this.h, particleSize * sizeFactor, 0, Math.PI * 2); ctx.fill(); };The rest of the code is just fancy stuff mentioned in the previous posts. Particle Tornado - Codepen

Particle Tornado - GitHub

#### Neurons

The neurons have random placing on the canvas. But connecting them at random makes a very "noisy" and ugly example. To avoid this mess a simple algorithm is used. One by one we're finding the nearest neuron having no connection to the current neuron:

for (i = 0; i < this.neurons.length; i++) { for (var j = 0; j < this.neurons.length; j++) { if (i !== j) { // take first neuron not being the current one if (typeof pickedNeuron === 'undefined') { pickedNeuron = this.neurons[j]; } // compare the distances to other neurons if (distance(this.neurons[i], this.neurons[j]) < distance (this.neurons[i], pickedNeuron)) { if (this.neurons[j].soma && this.neurons[j].id !== i) { pickedNeuron = this.neurons[j]; } } } } this.neurons[i].soma = pickedNeuron; pickedNeuron = undefined; }

Every neuron has its own counter making it switch between active and inactive state. To make the example more interesting a firing neuron also fires the neuron connected to it.

Neurons - CodepenNeurons - GitHub

## No comments:

Post a Comment