1. ## 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>
<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 xCenter = 155
var yCenter = 155
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>
<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.  Reply With Quote

2. ## I think it has something to do with the float values (not integers) and converting it to pixel values... any ideas?  Reply With Quote

3. Senior Coders Join Date
Aug 2005
Posts
971
Thanks
0
Thanked 0 Times in 0 Posts

## I don't think it does(I already tried parseInt()).

Code:
```<html>
<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 xCenter = 155;

var yCenter = 155;

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>
<body>
</body>
</html>```
here, gives the same output.  Reply With Quote

4. ## Yes. There's probably something wrong with the loop index  Reply With Quote

5. Senior Coders Join Date
Aug 2005
Posts
971
Thanks
0
Thanked 0 Times in 0 Posts

## 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.  Reply With Quote

6. ## 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...  Reply With Quote

7. ## 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...  Reply With Quote

8. Regular Coders Join Date
Feb 2007
Location
England
Posts
254
Thanks
0
Thanked 5 Times in 5 Posts

## 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 xCenter = 200
var yCenter = 300
var xold = -1
var yold = -1

for (var i = 0; i <= 360; i+=(50/radius)) {
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   Reply With Quote

9. ## I vote for this fine specimen of a coder to be upgraded to regular coder status...  Reply With Quote

10. ## Wow, thanks Bob90. Much appreciated.  Reply With Quote

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•