I'm experiencing an issue with a code designed to display a sine wave on the screen. Unfortunately, nothing shows up on the canvas and I suspect it may have something to do with the requestAnimFrame function.
In the draw function, the variable y should represent a simple sine wave function of Asin(kx - omega*t), where k is the wavenumber equal to 2pi divided by wavelength.
Javascript:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cx = 0,
t = 0,
Amp1 = 200,
Wav1 = 100,
omega = 0.01;
function draw(x, t) {
var y = Amp1 * Math.sin((x * 2 * Math.PI / Wav1) - omega * t) + 999;
ctx.beginPath();
ctx.moveTo(t + 100, y);
ctx.lineTo(t + 100, y + 1);
ctx.stroke();
ctx.closePath();
}
window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 100);
};
}());
function animate() {
setInterval(function () {
window.requestAnimFrame(animate);
var newX = cx,
newT = t;
cx += 0.5;
t += 0.5;
draw(newX, newT);
}, 50);
}
animate();
EDIT: Curious as to why Amp1 and Wav1 are highlighted in cyan?