Javascript and Canvas - Animating a Sine wave

Question

So, I have the following code to animate something upwards... it's very basic...

SetInterval(function() {
   particlesY -= 1;
}, 10);

Then a loop as such:

ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawRect(50, particlesY, 32, 32);

This works fine, but I want a bit of X-Axis variation - I can use Math.random() to get a random direction, but the result is very jerky and pretty much laughable.

I figured that a sine wave would give me a nice smooth X-Axis change.

Any ideas? :(

Answer 1

A sine wave should be fairly straightforward:

ctx.drawRect( Math.sin(particlesY) * 100, particlesY, 32, 32);