Question

Say I want a ball bouncing at 5 frames per second and only want to have a square bouncing at 2 frames per second, how is this possible?

return setInterval(draw,10) is used in the current simulation to move 1000 particles around, but I also want to draw a radial gradient on a second canvas which gets data from the particle simulation. I cant figure out how to draw the gradient a frame per second and the particles at another framerate

Answer 1

What i do is create a Timer constructor, and everytime I make something animate, i make a var animateThing = new Timer().

It may not be necessary to do this, but it can be a useful peice of code as you get deeper into canvas with more moving parts.

Update
So something sorta like this.

function Timer(fps, callback) {
  return setTimout(callback, 1000 / fps);
}

var timer1 = new Timer(33, callback1);
var timer2 = new Timer(55, callback2);

Now that’s probably not gonna work, but it’s the idea.