Geek asks and answers

Javascript and Canvas - Sine Wave Animation

So, I have the following code to animate something up ... it's very simple ...

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

Then the loop itself:

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

This works fine, but I want to change the X-Axis a bit - I can use it Math.random()to get a random direction, but the result is very jerky and quite ridiculous.

I realized that a sine wave will give me a nice smoothing of the X-Axis.

Any ideas ?: (

+3
source share
1 answer

The sine wave should be quite simple:

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

More articles:


All Articles