javascript - Javascript と Canvas - 正弦波のアニメーション化

Question

だから、私は何かを上向きにアニメーション化する次のコードを持っています...それは非常に基本的です...

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

次に、そのようなループ：

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

これは問題なく動作しますが、X 軸のバリエーションが少し必要ですMath.random()。ランダムな方向を取得するために使用できますが、結果は非常にぎくしゃくしていて、かなりばかげています。

正弦波を使えば X 軸の変化が滑らかになると思いました。

何か案は？:(

Answer 1

正弦波はかなり単純です。

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