Ive been learning javascript and i cant get it to draw a half circle.
here is the code i came up with

<HTML>
<HEAD>
<TITLE>
Divisions in jscript
</TITLE>
<script language = "javascript">
var mx; //users x value
var my; //users y value
var mr; //users radius
var sy; //solve for y
var i; //for loops
var a; //misc. var
var b; //misc. var
var c; //misc. var
var d; //misc. var
sy = 1;
mx = 100;
my = 100;
mr = 30;
//draw a half circle using the equation y = sqrt(r^2-(x-j)^2-k^2); where (j, k) is the center of the circle
for (i = 100; i < 131; i = i + 1)
{
a = Math.pow(mr, 2);
b = i - mx;
c = Math.pow(b, 2);
sy = a - c;
sy = Math.floor(Math.sqrt(sy) + my);
document.write("<div id = m["+i+"] STYLE = 'POSITION: ABSOLUTE; TOP: "+sy+"; LEFT: "+i+";'><img src = 'reddot.jpg'></DIV>");
// document.write("a is "+a+"... b is "+b+"... c is "+c+"... d is "+d+"... sy is "+sy+"<BR>"); //this line may be used to see the value of each variable dependant on the loop
}
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
does anyone see the problem???

February 24th, 2004, 12:06 AM

kryptonite0110

EDIT:
The equation in the comment is wrong, but the one in the actual script is right, i think

February 24th, 2004, 01:08 PM

jdenny

Hi, I'm not sure I've seen that equation before.

Usually for drawing a circle I use this equation:

sx = x + radius * sin(i);
sy = y + radius * cos(i);
where
(x, y) is the center of the circle
radius is the radius of the circle
i is the running angle (0 - 180 degrees for half circle)
(sx, sy) is the running pixel coordinate

and use i as the loop counter.

Note that in JavaScript's Math.sin() and Math.cos(), angle is expressed in radians instead of degrees, so you need to convert degrees to radians with this equation:
radian = degree * PI / 180