Sine Wave Animation

Generate different animation with same amplitude and frequency

Background

I have been learning a creative coding field as my personal project. Whenever I saw wonderful graphics with motion, they always intrigues me and drive me to write such creative codes. However, creating cool animation is not easy for me. I realised what I have to learn at first. That’s a basic knowledge of sin and cos algorithms. In this post I explain how the animation by sin wave is changing.

Draw Basic Sin Wave

First of all, I researched on how sin wave draws.

As you can see above code, sine wave consists of a large number of dots. The main code is:

for (let i = 0; i < window.innerWidth / 2; i += step) {
 ctx.beginPath();
 const x = i;
 const y = wave.y + Math.sin(i * wave.length) * wave.amplitude;
 ctx.ellipse(x, y, 2, 2, Math.PI / 4, 0, 2 * Math.PI);
 ctx.stroke();
}

The more step variable is smaller, the closer the distance between dots are, which becomes single line as a sine wave. In short, to make sine wave, what we need is to drop dots along with mathematic sine method. Then instead of dropping dots, if we connect between…