Confession: I really don't know much about physics. To say my understanding is basic would probably be an overstatement. The last time I knew anything remotely complex about physics was 11 years ago. I was 17 and I knew exactly enough to get a B+ on my high school senior physics exam, after which I immediately emptied all such information from my brain to make room for more important things like all of the lyrics in the album Nellyville by Nelly.

Fast forward to 2013 and I discover that I could actually have used some of that physics math to create cool animations with the canvas. Darn it! Fortunately I figured out pretty quickly that I didn't need to revise my highschool education and could instead cheat.


Hack physics

I like to call this sort of thing hack physics because we're taking a very basic understanding of vectors and writing JavaScript that kind of replicates those vectors but in no way represents a real physics environment. The beauty of hack physics is that you don't even really need to understand the physics theory behind it. You just need to understand how to use it to animate stuff.

Vectors

A vector is a mathematical object described by a magnitude and a direction. Velocity and acceleration are vectors. If you were to say that you’re going to drive 35mph in a North East direction you’d basically be describing a vector.

Creating velocity with JavaScript

You probably already know what velocity is but I’ll tell you anyway, velocity is a vector that consists of speed and direction. When we’re replicating velocity in JavaScript we split it in to two vectors, velocity in the x direction, and velocity in the y direction. We’re dealing with pixels and JavaScript animation here, so we can describe our velocity in terms of pixels per frame. The square below is assigned a velocity in the x direction of 2 pixels every frame, and a velocity in the y direction of 2 pixels every frame. The result is linear diagonal movement.

Creating acceleration with JavaScript

Acceleration is the rate of change of velocity of an object. So how do we replicate this in JavaScript? We have our velocity vx and vy, we can add the acceleration in the x and y direction on each frame. So, if the acceleration is 0.5 pixels, we will add 0.5 pixels to the velocity x and velocity y on every frame. This will cause the square to accelerate.


A super simple and super fun example - let’s make a particle fountain!

A particle fountain was the first hack physics effect I ever animated. It was actually using Flash and ActionScript but we can now do the same thing with JavaScript and canvas. I’m actually going to use a Particle object to create the fountain. If you don’t really follow the JavaScript that is being used to draw the particles to the canvas here, I suggest you first check out my blog post explaining how to do that.

So, to create the fountain, we’ll need to generate some particles. Each particle needs a position and a velocity (vx and vy). We will make the starting position in the center of the canvas, and then we’ll randomize the velocity of the particles so they ‘spray’ out of our fountain.

  function Particle(x, y, vx, vy, size, color, opacity) {

  this.update = function() {
    x += vx;
    y += vy;
  }

  this.draw = function() {
    ctx.globalAlpha = opacity;
    ctx.fillStyle = color;
    ctx.fillRect(x, y, size, size);
  } 
}

function createParticle(i) {
  // initial position in middle of canvas
  var x = width*0.5;
  var y = height*0.5;
  // randomize the vx and vy a little - but we still want them flying 'up' and 'out'
  var vx = -2+Math.random()*4;
  var vy = Math.random()*-3;
  // randomize size and opacity a little & pick a color from our color palette
  var size = 5+Math.random()*5;
  var color = colors[i%colors.length];
  var opacity =  0.5 + Math.random()*0.5;
  var p = new Particle(x, y, vx, vy, size, color, opacity);
  particles.push(p);
}


That will create something like this (you might need to hit rerun to see them).


The particles just keep spraying up and never come down. We need to add some ‘gravity’ to pull the particles down. We already know how to do that because gravity can actually just be represented as an acceleration in the y direction (down)! Let’s set a gravity (acceleration) of 0.04px. Also, we'll reduce the opacity a little on each frame so each particle eventually fades in to nothing. Then, we'll put in a check for 0 opacity, at which point we'll "reset" our particle to the center of the fountain. This way we have a never-ending spraying of particles!


Our particle fountain is working! You just gone and physicsed, and it is glorious!

Soon I will write part 2 were I will talk about using trigonometry to calculate vector direction, as well as an intro to spring physics!


If you have a question or a topic you would like me to write about next, please leave a comment for me a below, send me a tweet at @rachsmithtweets or flick me an email at contact at rachsmith dot com.


35,487 18 196