Plot the Sine Y of X on canvas

Question

I'm trying to get a simple rect to follow a sinusoidal path along the x axis of time. I've got the x axis value, but the y value is a bit tricky and I think there's a problem with my sine formula. Also, I want the y value to start and end at 0, but in this case, 0 should be canvas.height/2 - 5 (to offset the rect).

In the following function, period and amplitude appear to be working, but I don't know how to apply frequency or phase.

function sineY(x){
    var amplitude = 2.5; // wave amplitude
    var period = 4; // period
    var freq = 1; // frequency or w
    var phase = 20; // phase angle

    //Asin(wt);
    return amplitude * Math.sin(period * (Math.PI * (dotX/180)));
}

Here's the fiddle: http://jsfiddle.net/5wevQ/1/

Answer 1

As your code is not time bound (in order for real-time frequency to work) you need to first define how much width represents one cycle (@ 1 Hz, or one second if you will).

Lets say the whole canvas width represents one cycle then we can do this:

var period = x / canvas.width; // period (one cycle)

To use that value change the formula slightly to:

return amplitude * Math.sin(freq * 2 * Math.PI * period);

If your frequency is 1 Hz one cycle will be drawn in the canvas area, if 2 Hz two cycles and so on.

The next thing you need to adjust is how you use the returned sine value. As of now you are simply accumulating the value. This will create a lag so the better approach is to treat the returned value as an absolute value since you're already using amplitude with it.

So change this line:

dotY += sineY(dotX);

to

dotY = canvas.height * 0.5 - 2.5 + sineY(dotX);

Now the dotY will draw the current sine value relative to the axis which means 0° will start at the axis' 0 position. You can now adjust amplitude etc.

This fiddle shows 20 cycles per canvas width as the frequency is set to 20 Hz.

FIDDLE

(ps: I did not address phase here)

Hope this helps!