Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Circle Algorithm Problem

  1. #1
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

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

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

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

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

    Default

    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. #4
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

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

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

    Default

    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. #6
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

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

  7. #7
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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...
    - Ryan "Boxxertrumps" Trumpa
    Come back once it validates: HTML, CSS, JS.

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

    Default 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. #9
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    I vote for this fine specimen of a coder to be upgraded to regular coder status...
    - Ryan "Boxxertrumps" Trumpa
    Come back once it validates: HTML, CSS, JS.

  10. #10
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Wow, thanks Bob90. Much appreciated.
    - Mike

Bookmarks

Posting Permissions

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