CODEWITHSUNDEEP
javascriptcanvashtml5-canvas
Un Jin Jang
Un Jin Jang

Reputation: 55

Drawing a sine wave from top right to bottom left

I'm trying to design a small project using canvas and I want to design a sine wave in such a way that the wave is generated from the top right corner to the left bottom corner infinitely if possible.

Something like an inverse sine graph.

All I can do is make the sine wave go from left to right but making this work from top right to bottom left is very difficult.

This is my code at the moment

It's looking very sad...

const canvas = document.querySelector(".canvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth - 5;
canvas.height = window.innerHeight - 5;

window.addEventListener("resize", () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

const wave = {
  y: canvas.height / 2,
  length: 0.02,
  amplitude: 100,
  frequency: 0.01,
  yOffSet: canvas.height,
};

let increment = wave.frequency;

function animate() {
  requestAnimationFrame(animate);
  ctx.fillStyle = "rgb(0,0,0)";
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(0, canvas.height);
  for (let i = 0; i < canvas.width; i++) {
    ctx.lineTo(Math.sin(i / wave.length + increment) * wave.amplitude + wave.yOffSet, 0);
  }
  ctx.stroke();
  increment += wave.frequency;
}

animate();
body {
  margin: 0;
  padding: 0;
}
<div>
  <canvas class="canvas"></canvas>
</div>

Desired Output
My goal

Upvotes: 2

Views: 427

Answers (1)

Christian
Christian

Reputation: 307

The problem is in this line:

ctx.lineTo(Math.sin(i / wave.length + increment) * wave.amplitude + wave.yOffSet, 0);

You are only moving in the x co-ordinate. I have added the motion in the y co-ordinate and rewrote on three lines just for clarity.

    x=i+wave.amplitude*Math.sin(i/wave.length);
    y=canvas.height-(i-(wave. amplitude * Math.sin(i/wave.length)));
    ctx.lineTo(x,y);

The result it produces is like what you describe, if I understood correctly. There are many more waves than you show in the drawing, but that can be cahnged by the wave.length parameter.

Upvotes: 1

Related Questions