Drawing a sine wave from top right to bottom left

user_16169684 0
Viewed 160

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

html5-canvas canvas javascript
1 Answers

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.

user_171013850
Related