THINGS MOVING WITH CANVAS

particle system

Vector

Particle

Atractor

var Vector = function(x, y) {
    this.x = x;
    this.y = y;
};

motion = location + velocity

var location = new Vector(10, 10);
var velocity = new Vector(1, 3);


location.x += velocity.x;
location.y += velocity.y;
// Motion!

Vector

Particle

Atractor

var Particle = function(x, y) {
    this.position = new Vector(x, y);
    this.velocity = new Vector();
    this.acceleration = new Vector();
    

    this.size = 1;
    this.fillStyle = "#fff";
};

Particle.prototype = {
    draw: function(context) {
        // Whatever you want it to look like here!
        context.fillStyle = this.fillStyle;
        context.fillRect(this.position.x, this.position.y, this.size, this.size);
    }
};

Vector

Particle

Atractor

An object at rest stays at rest and an object in motion stays in motion...

Newton's first law

...at a constant speed and direction unless acted upon by an unbalanced force.

function applyForce(force) {
   force.div(mass);
   acceleration.add(force);
}

friction

Must read

natureofcode.com

tools

pixijs.com

wellcaffeinated.net/PhysicsJS/