CODEWITHSUNDEEP
javascriptcanvastrigonometry
Barrie Reader
Barrie Reader

Reputation: 10713

Javascript and Canvas - Animating a Sine wave

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? :(

Upvotes: 3

Views: 2124

Answers (1)

bharling
bharling

Reputation: 2850

A sine wave should be fairly straightforward:

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

Upvotes: 2

Related Questions