Trigonometry Realms | Zona Land Education

When you understand this animated diagram,

You will understand the sin(x) backwards, so a few say.

Here's the code that runs the above animation.

You can change the code, if you like, and then click the following 'Reevaluate code' button. The program will then work as per your changes. Of course, your changes, especially random changes, can introduce errors, miscalculations, and browser crashes. If you need to get things back to their original condition, just reload this page using your browser's reload button.

The intention here is to conveniently show the inner workings of this program so that you understand how the diagram is drawn. Can you figure out how to change things so that the circle is smaller?

Click the 'Code' button again to close this section.

// Unit Circle 1

// For drawing sine graph.
window.deltaAngle = 0.03;

// Two Pi.
window.twoPi = 2.0 * 3.14159265;

// Center of circle.
window.circleCenterX = 100;
window.circleCenterY = 100;

// Radius, diameter for circle.
window.circleRadius   = 90;
window.circleDiameter = 2 * circleRadius;

// Current angle of rotation for radius.
window.circleAngle = twoPi;

// Coordinates on circle at end of radius.
window.circleX;
window.circleY;

// Pixel boundaries and dimensions for graph.
window.graphX1 = 210;
window.graphY1 =   6;
window.graphX2 = 390;
window.graphY2 = 191;
window.graphWidth  = graphX2 - graphX1 + 1;
window.graphHeight = graphY2 - graphY1 + 1;




window.initializeUnitCircle1 = function()
{
	// Set background color.
	canvas.style.background = 'blue';
	
	// Setup the graphics.
	canvasGC.strokeStyle = 'white';
	canvasGC.lineWidth   = 3;
	canvasGC.lineJoin    = 'round';
	
	// Begin animation.
	animationLoop();
};




window.animationLoop = function()
{
	// Calculate for the next frame.
	nextFrame();
	
	// Draw the next frame.
	paint(canvasGC);
	
	// Wait a bit, and then do it again.
	setTimeout(animationLoop, 100);
};




window.nextFrame = function(canvasGC)
{
	// Change the angle of rotation for the radius.
	circleAngle -= deltaAngle;
	
	// Keep angle within one rotation (0 - 2Pi radians), if necessary.
	if(circleAngle <= 0.0)
	{
		circleAngle += twoPi;
	}

	// Calculate new coordinates for the current radius rotation.
	circleX = (circleRadius * Math.cos(circleAngle)) + circleCenterX;
	circleY = (circleRadius * Math.sin(circleAngle)) + circleCenterY;
};




window.paint = function(canvasGC)
{
	// Variables.
	var a;  // Angle used to draw sine graph.
	var x1;
	var y1;
	var x2;
	var y2;
	var xMax;

	// Clear the diagram.
	canvasGC.clearRect(0, 0, 400, 200);
	
	// Draw the circle.
	canvasGC.beginPath()
	canvasGC.moveTo(circleCenterX + circleRadius, circleCenterY);
	canvasGC.arc(circleCenterX, circleCenterY, circleRadius, 0, twoPi);
	canvasGC.closePath();
	canvasGC.stroke();
	
	// Draw the radius.
	canvasGC.beginPath();
	canvasGC.moveTo(circleCenterX, circleCenterY);
	canvasGC.lineTo(circleX, circleY);
	canvasGC.closePath();
	canvasGC.stroke();

	// Draw the x-coordinate (x-component of the radius).
	canvasGC.beginPath();
	canvasGC.moveTo(circleCenterX, circleCenterY);
	canvasGC.lineTo(circleX, circleCenterY);
	canvasGC.closePath();
	canvasGC.stroke();

	// Draw the y-coordinate (y-component of the radius).
	canvasGC.beginPath();
	canvasGC.moveTo(circleX, circleCenterY);
	canvasGC.lineTo(circleX, circleY);
	canvasGC.closePath();
	canvasGC.stroke();
	
	// Draw the graph edge.
	canvasGC.strokeRect(graphX1, graphY1, graphWidth, graphHeight);

	// Draw the circle to graph connecting line.
	canvasGC.beginPath();
	canvasGC.moveTo(circleX, circleY);
	canvasGC.lineTo(graphX1, circleY);
	canvasGC.closePath();
	canvasGC.stroke();
	
	// Draw sine graph.
	x1 = graphX1; // First x-coordinate.
	y1 = circleY; // First y-coordinate.

	// Get current angle of radius rotation.
	a = circleAngle;

	// Max x-coordinate (pixel) for graph.
	xMax = graphX1 + graphWidth;

	// Move through x-coordinates (pixels).
	for(x2 = x1 + 1; x2 <= xMax; x2 += 1)
	{
		// Get current y-coordinate.
		y2 = circleCenterY + (circleRadius * Math.sin(a));

		// Draw from the last point to the newly calculated point.
		canvasGC.beginPath();
		canvasGC.moveTo(x1, y1);
		canvasGC.lineTo(x2, y2);
		canvasGC.closePath();
		canvasGC.stroke();
		
		// The new point becomes the last point.
		x1 = x2;
		y1 = y2;

		// The angle increases for the next y-coordinate calculation.
		a += deltaAngle;
	}
};