View Full Version : Circle Algorithm Problem

mburt

02-04-2007, 05:54 PM

I made an algorithm for creating circles, but for some reason the pixels start skipping in the middle. Here's the 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.

mburt

02-04-2007, 06:27 PM

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

shachi

02-04-2007, 06:30 PM

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

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

mburt

02-04-2007, 06:33 PM

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

shachi

02-04-2007, 06:56 PM

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.

mburt

02-04-2007, 07:07 PM

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

boxxertrumps

02-04-2007, 09:42 PM

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

Bob90

02-07-2007, 12:13 AM

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:

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

boxxertrumps

02-07-2007, 12:24 AM

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

mburt

02-07-2007, 01:32 AM

Wow, thanks Bob90. Much appreciated.

Bob90

02-07-2007, 04:04 PM

Just an update.

I remember seeing some time ago a script that draws shapes using divs and javascript that optimises the number of divs for each shape.

It can be found here

www.walterzorn.com/jsgraphics/jsgraphics_e.htm (http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm)

and is actually a good read for any graphics designer.

:)

Powered by vBulletin® Version 4.2.2 Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.