# Circle Algorithm Problem

Show 40 post(s) from this thread on one page
• 02-04-2007, 05:54 PM
mburt
Circle Algorithm Problem
I made an algorithm for creating circles, but for some reason the pixels start skipping in the middle. Here's the code:
Code:

```<html> <head> <script type="text/javascript"> function draw(x,y) { var div = document.createElement("DIV") div.className = "px" div.style.left = x div.style.top = y document.body.appendChild(div) } var x, y, r2; var radius = 25 var xCenter = 155 var yCenter = 155 r2 = radius * radius; window.onload = function() { for (x = -radius; x <= radius; x++) {         y = Math.sqrt(r2 - x*x) + 0.5         draw(xCenter + x, yCenter + y);         draw(xCenter + x, yCenter - y);         } } </script> <style type="text/css"> .px { width:1px; height:1px; overflow:hidden; position:absolute; background:black } </style> </head> <body> </body> </html>```
I've been working on this for a week now, and I still don't understand why it's "skipping". It's hard to say what I mean by "skipping", but if you test the code I think you'll understand.
• 02-04-2007, 06:27 PM
mburt
I think it has something to do with the float values (not integers) and converting it to pixel values... any ideas?
• 02-04-2007, 06:30 PM
shachi
I don't think it does(I already tried parseInt()).

Code:

```<html> <head> <script type="text/javascript"> function draw(x,y) { var div = document.createElement("DIV") div.className = "px" div.style.left = x + "px"; div.style.top = y + "px"; document.body.appendChild(div); } var x, y, r2; var radius = 25; var xCenter = 155; var yCenter = 155; r2 = radius * radius; window.onload = function(){ for(x = -radius; x <= radius; x++) {         y = Math.sqrt(r2 - x*x) + 0.5;         draw(parseInt(xCenter + x), parseInt(yCenter + y));         draw(parseInt(xCenter + x), parseInt(yCenter - y));         } } </script> <style type="text/css"> .px { width:1px; height:1px; overflow:hidden; position:absolute; background:black; } </style> </head> <body> </body> </html>```
here, gives the same output.
• 02-04-2007, 06:33 PM
mburt
Yes. There's probably something wrong with the loop index
• 02-04-2007, 06:56 PM
shachi
I think that this is because as the for loop goes on, it's the difference in number that creates it. Instead of adding a constant value(0.5) I think you should also dynamically increase/decrease the value.
• 02-04-2007, 07:07 PM
mburt
I thought about that, but I couldn't come up with a formula for it. I tried dividing x by radius' decimal places and that didn't work either...
• 02-04-2007, 09:42 PM
boxxertrumps
the equation for a circle is r^2 = x^2 + y^2 assuming the center is at 0,0

all you'll need to draw the circle is use this equation:

y = sqrt(r^2 - x^2)

while 0 < x < r

then draw it once, then with -x, then -y, then both -x and -y...
there you go... a mathematically precise circle...

ive taken a look at your js... and i cant find any flaw in your logic...
• 02-07-2007, 12:13 AM
Bob90
Mathmatically Correct, but logiaclly flawed
Mathematically the circle can't just be described by a line, which is a crude approximation of what the original code was doing.

The central code could be replaced by this:

Code:

```var x, y, r2; var radius = 50 var xCenter = 200 var yCenter = 300 var xold = -1 var yold = -1 r2 = radius * radius; window.onload = function() { for (var i = 0; i <= 360; i+=(50/radius)) {         x = parseInt(xCenter+(radius*Math.sin(i*(Math.PI/180)))+0.5)         y = parseInt(yCenter+(radius*Math.cos(i*(Math.PI/180)))+0.5)         if(xold!=x || yold!=y)                 {                 xold = x;                 yold = y;                 draw(x, y);                 }         } }```
It uses the same inputs as before, but follows the path of a circle from the top most point clockwise.
It also has a value added feature.
An 'if' condition to only write new divs to the page. The old code would write a new div even if there was already one there!

Wooo! First post :)
• 02-07-2007, 12:24 AM
boxxertrumps
I vote for this fine specimen of a coder to be upgraded to regular coder status...
• 02-07-2007, 01:32 AM
mburt
Wow, thanks Bob90. Much appreciated.
Show 40 post(s) from this thread on one page