As you can see in my canvas I have a sine wave that is animated, swaying left and right! What I am trying to achieve is that the start and end points stay fixed however, but am at a loss on trying to achieve that! Any input is much appreciated! Here is the Code Pen
function start() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
drawCurves(context, step);
step += 5;
window.requestAnimationFrame(start);
}
var step = -4;
function drawCurves(ctx, step) {
var width = ctx.canvas.width;
var height = ctx.canvas.height;
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "rgb(66,44,255)";
var x = 4;
var y = 0;
var amplitude = 20;
var frequency = 90;
while (y < height) {
x = width / 2 + amplitude * Math.sin((y + step) / frequency);
ctx.lineTo(x, y);
y++;
}
ctx.stroke();
}
canvas {
background-color: wheat;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="start()">
<canvas id="canvas" width="500" height="2000"></canvas>
</body>
</html>
from Animate sine wave, fixed start and end points
No comments:
Post a Comment