How can I split a circle?

Question

I am trying to halve a circle with JavaScript and the <canvas> . I used the formula indicated in the accepted answer to this question to find the points on the edge of the circle, but for some reason, when I give two opposite points on the circle (0 and 180, or 90 and 270, for example). I do not get a line through the center of the circle.

My code, which you can see on JSFiddle , makes a nice Spirograph sample that is cool, except that this is not what I'm trying to do.

How to fix this so that the lines pass through the center?

(Ultimately, I try to draw a circle of fifths , but all I ask is how to do this, get the lines to go through the center. As soon as this works, I will continue the other steps to make the circle of fifths, which obviously will include drawing fewer lines and losing the Spirograph torus.)

Answer 1

The drawing function and the trigonometry function in Math expects the angle to be specified in radius, not degrees.

Demo

Diff with your current code:

 function bisect(context, degrees, radius, cx, cy) { // calculate the point on the edge of the circle var x1 = cx + radius * Math.cos(degrees / 180 * Math.PI); var y1 = cy + radius * Math.sin(degrees / 180 * Math.PI); /* Trimmed */ // and calculate the point on the opposite side var x2 = cx + radius * Math.cos(degrees2 / 180 * Math.PI); var y2 = cy + radius * Math.sin(degrees2 / 180 * Math.PI); /* Trimmed */ } function draw(theCanvas) { /* Trimmed */ // 2 * PI, which is 360 degree context.arc(250, 250, 220, 0, Math.PI * 2, false); /* Trimmed */ context.arc(250, 250, 110, 0, Math.PI * 2, false); /* Trimmed */ // No need to go up to 360 degree, unless the increment does // not divides 180 for (j = 2; j < 180; j = j + 3) { bisect(context, j, 220, 250, 250); } /* Trimmed */ } 

application

This is the full source code for JSFiddle, just in case, save a full copy.

HTML

 <canvas id="the_canvas" width="500" height="500"></canvas> 

CSS

 canvas { border:1px solid black; } 

Javascript

 function bisect(context, degrees, radius, cx, cy) { // calculate the point on the edge of the circle var x1 = cx + radius * Math.cos(degrees / 180 * Math.PI); var y1 = cy + radius * Math.sin(degrees / 180 * Math.PI); // get the point on the opposite side of the circle // eg if 90, get 270, and vice versa // (super verbose but easily readable) if (degrees > 180) { var degrees2 = degrees - 180; } else { var degrees2 = degrees + 180; } // and calculate the point on the opposite side var x2 = cx + radius * Math.cos(degrees2 / 180 * Math.PI); var y2 = cy + radius * Math.sin(degrees2 / 180 * Math.PI); // now actually draw the line context.beginPath(); context.moveTo(x1, y1) context.lineTo(x2, y2) context.stroke(); } function draw(theCanvas) { var context = theCanvas.getContext('2d'); // draw the big outer circle context.beginPath(); context.strokeStyle = "#222222"; context.lineWidth = 2; context.arc(250, 250, 220, 0, Math.PI * 2, false); context.stroke(); context.closePath(); // smaller inner circle context.beginPath(); context.strokeStyle = "#222222"; context.lineWidth = 1; context.arc(250, 250, 110, 0, Math.PI * 2, false); context.stroke(); context.closePath(); for (j=2; j < 180; j = j + 3) { bisect(context, j, 220, 250, 250); } } $(function () { var theCanvas = document.getElementById('the_canvas'); console.log(theCanvas); draw(theCanvas, 50, 0, 270); }); 

Answer 2

Degrees in Javascript are in radians. Instead of checking if it is greater or less than 180, and adding or subtracting 180, do the same with Math.PI radians.

http://jsfiddle.net/7w29h/1/