Skip to content

Instantly share code, notes, and snippets.

@iceener
Created September 11, 2023 10:26
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iceener/2626f66078f8d52d72448e1663e577d9 to your computer and use it in GitHub Desktop.
Save iceener/2626f66078f8d52d72448e1663e577d9 to your computer and use it in GitHub Desktop.
Wave Function on Canvas
class Wave {
constructor(canvasId) {
this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas.getContext('2d');
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
}
drawWave() {
let waveLength = 0.01;
let amplitude = 100;
let frequency = 0.01;
this.ctx.beginPath();
for(let i = 0; i < this.canvas.width; i++) {
let y = this.canvas.height / 2 + amplitude * Math.sin(waveLength * i + frequency);
this.ctx.lineTo(i, y);
}
this.ctx.strokeStyle = '#f0f0f0';
this.ctx.lineWidth = 5;
this.ctx.stroke();
}
}
window.onload = () => {
const wave = new Wave('wave');
wave.drawWave();
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment