Periodic Functions in JavaScript

How to Simulate Sinusoidal Curves in JavaScript

Periodic functions produce an infinite order of sinusoidal curves.
The sine function has the general form y = asinθ;
and the cosine function has the general form y = acosθ + c;
where θ is angle in radians and a is an arbitrary constant that heightens the curve.

Code to Animate a Graphic Object through a Periodic Curve in JavaScript

To make a graphic (dot) travel by the equation of a sine / cosine function, continuously increment θ by some angle interval (in radians), and use the equation to get the corresponding y value; using any c that gives a satisfactory height.

Create a new file; On Notepad++: File, New.
Call it periodic_path.html.
Type out the adjoining JavaScript code for animating an image body through the path of a sine / cosine curve.

Note: To get a cosine curve animation, just replace sin with cos.

JavaScript code for periodic_path.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Trigonometric Track</title>
    </head>
    <body>

        <h3>Move in the Trajectory of a Trigonometric Curve</h3>

        <canvas id="trig_fn" width="500" height="300" style="border: 1px solid #000000;">
            Your browser (version) does not support canvas object; Time to update!
        </canvas>
        <button onclick="moveTrigonometric()">Move</button>

        <script>
            var canvas = document.getElementById("trig_fn");
            var context = canvas.getContext("2d");
            context.translate(0, 150);
            context.fillStyle = "#888888";

            var theta = 0;
            var a = 100; // constant
            // convert theta from degree to radians
            var y = a * Math.sin(theta * Math.PI / 180);

            // draw a dot
            context.beginPath();
            context.arc(theta, y, 5, 0, 2 * Math.PI);
            context.fill();

            function moveTrigonometric() {
                // condition for continuing motion
                if (theta < 495) {
                    y = a * Math.sin(theta * Math.PI / 180);

                    // redraw dot
                    context.beginPath();
                    context.arc(theta, y, 5, 0, 2 * Math.PI);
                    context.fill();

                    theta += 15;
                    setTimeout(function () { moveTrigonometric(); }, 100);
                }
            }
        </script>

    </body>
</html>

I have a better version / See other versions.