# Thread: Circle Algorithm Problem

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>
<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.

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

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>
<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.

4. Yes. There's probably something wrong with the loop index

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.

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...

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...

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 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

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

10. Wow, thanks Bob90. Much appreciated.

#### Posting Permissions

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