I am using the midpoint circle algorithm, also known as Bresenham\’s, to draw concentric circles. The difference between each circle\’s radius and that of the next is always 1, so the final result should be a full circular area.
However, some pixels are left empty, as shown in the attached image.
I\’m using Javascript to paint on an HTML5 canvas, manipulating the canvas.getContext(\”2d\”).getImageData(…).data array.
The circles are alternatively white and red, and the empty pixels are black. You might have to zoom in in order to see what I mean properly.
I\’m trying to add some code to the algorithm so that those pixels are filled when drawing the corresponding arc. There seems to be no reason for any of those pixels to belong to one arc rather than the next one, so I don\’t care if they are filled along with arcs that have an even radius or with arcs that have an odd radius (I hope I\’m making myself clear).
The pixels seem to be following a pattern, but I\’m clueless about what could that be. Could anyone help me find it?
function drawCircles(radius, x, y){
var f = 1 - radius;
var ddF_x = 1;
var ddF_y = -2 * radius;
var x = 0;
var y = radius;
//Colors
var red = 255;
var green = radius%2==0?255:0;
var blue = radius%2==0?255:0;
paintPixel(x, y + radius, red, green, blue);
paintPixel(x, y - radius, red, green, blue);
paintPixel(x + radius, y, red, green, blue);
paintPixel(x - radius, y, red, green, blue);
while(x < y){
// ddF_x == 2 * x + 1;
// ddF_y == -2 * y;
// f == x*x + y*y - radius*radius + 2*x - y + 1;
if(f >= 0)
{
y--;
ddF_y += 2;
f += ddF_y;
}
x++;
ddF_x += 2;
f += ddF_x;
paintPixel(x + x, y + y, red, green, blue);
paintPixel(x - x, y + y, red, green, blue);
paintPixel(x + x, y - y, red, green, blue);
paintPixel(x - x, y - y, red, green, blue);
paintPixel(x + y, y + x, red, green, blue);
paintPixel(x - y, y + x, red, green, blue);
paintPixel(x + y, y - x, red, green, blue);
paintPixel(x - y, y - x, red, green, blue);
}
}
function paintPixel(x, y, red, green, blue){
imageData.data[grid[y][x]] = red;
imageData.data[grid[y][x]+1] = green;
imageData.data[grid[y][x]+2] = blue;
imageData.data[grid[y][x]+3] = 255; //Alpha
}
Rating:
The post javascript – Bresenham concentric circles leaving empty pixels appeared first on Javascript ASK.
via Javascript ASK http://javascriptask.phpfogapp.com/javascript-bresenham-concentric-circles-leaving-empty-pixels.html
No comments:
Post a Comment