Plotting a sine wave while traversing the unit circle using Javascript

Question

I want to plot a sine wave while traversing the unit circle. I want to use it for educational purposes. The plot I want to have is similar to the one below:

Besides, I want x axis' tick labels to involve π/2, π, 3π/2, 2π. It may support some math I want to say.

How can I plot such a unit circle and a corresponding xy-plot using Javascript? Which library should I use? Could you provide a starting point?

Answer 1

Drawing

There are two good ways to "draw" arbitrary shapes using javascript.

• The first option is an HTML canvas element. Like an artists canvas, an html canvas provides a region in which you can draw arbitrary shapes, lines, etc. using javascript.
• The second option is a SVG drawing. SVG is a language similar to HTML which allows you to define lines, shapes, etc. There are good libraries for drawing out SVG code using javascript (e.g. raphael.js)

So both options let you draw to the screen with javascript. I would recommend using SVG, as it gives you more ability to modify elements you have already drawn, attach event handlers to elements in your drawing, etc.

Animation

Once you have the ability to draw, you need to animate your drawing. The short answer is you want to use requestAnimationFrame to tell the browser you would like to have a function called periodically to draw a frame of your animation. Each time that function is executed, you will update your drawing appropriately.

Answer 2

First, notice that with the points you are wanting something shown at some time t. That is, x and y are functions of time or parametric equations.

Ignoring scale factors, your circle would be

x(t) = cos(t)
y(t) = sin(t)

and your wave would be

x(t) = t
y(t) = sin(t)

Where t ranges from 0 to 2pi. Javascript supports trigonometric operations via the Math object.

The html5 canvas is a pixel based representation of what has previously been drawn on it or erased from it. That is, it doesn't remember any of the shapes that are drawn to it, either something is drawn and pixels get changed, or not.

One thing that's useful about the html5 canvas is that you can define a set of statements to draw some particular object, and then if you need to draw that object at some particular location, scale, and/or rotation or reflection, you can save the state of the canvas to a stack (provided by the API), set up the transform, draw the object, and revert from the stack to continue doing what else needs to be done.

One thing to remember is that (without transform) the canvas coordinate (0,0) starts up at the top left hand corner with the y coordinate increasing going down, whereas the Cartesian coordinate system has the y coordinate increasing going up.

To draw text labels, the canvas api does allow for drawing with fonts with multiple neat effects with any font loaded (say from some web font foundary) or on your system.

You mentioned that this was to be done for "educational purposes", but it isn't clear to me if those purposes are for students to learn about some mathematical concepts, or for you to learn some programming concepts. If it's for the latter, I fear giving you an example directly using html5 canvas might be a bit too much (it's often better to discover things on your own with aid only requested for when you get stuck) and using d3.js might be a bit overkill, unless, of course, you want to learn about d3.js. I'd still recommend some practice at the fundamental manipulations of the html5 canvas first. If it's for the former, well, utilizing d3.js might be quite fine. After all, it might be fun to play with something equivalent to Jason Davies Animated Bézier Curves related to sine waves and circles or something similar.

Edit: Oops, I somehow got into mind that d3 used canvas, but it's clearly more svg based now that I've rechecked at it. Html5 canvas "fundamentals" aren't necessarily related to d3.js, so I struck that line.