In this article I am going to draw ellipse with Midpoint Circle algorithm. Find more about Midpoint circle algorithm at http://en.wikipedia.org/wiki/Midpoint_circle_algorithm

CSS :

#ellipse b {
  position:absolute;
  color:rgb(91,111,135);
}

#ellipse {
  position:relative;
  margin:auto;
  width:800px;
  height:400px;
  vertical-align:center;
}

jQuery :

xc, yc : Center of the Circle
rx : Horizontal radius of
ry : Radius of the  Circle
p : This is Radius Error Factor to calculate increment and decrements of X and Y coordinates.
x, y : Variables to calculate Coordinates.

var ry=200, rx=400, xc=400, yc=200;
var x=0, y=ry;
var p=(ry*ry) - (rx*rx*ry) + ((rx*rx) / 4);
while ((2*x*ry*ry) < (2*y*rx*rx)) {
    putpixel(xc + x, yc - y);
    putpixel(xc - x, yc + y);
    putpixel(xc + x, yc + y);
    putpixel(xc - x, yc - y);

    if (p < 0) {
        x=x + 1;
        p=p + (2*ry*ry*x) + (ry*ry);
    } else {
        x=x + 1;
        y=y - 1;
        p=p + (2*ry*ry*x + ry*ry) - (2*rx*rx*y);
    }
}
p=(x + 0.5)*(x + 0.5)*ry*ry + (y - 1)*(y - 1)*rx*rx - rx*rx * ry*ry;

while (y >= 0) {
    putpixel(xc + x, yc - y);
    putpixel(xc - x, yc + y);
    putpixel(xc + x, yc + y);
    putpixel(xc - x, yc - y);

    if (p > 0) {
        y=y - 1;
        p=p - (2*rx*rx*y) + (rx*rx);

    } else {
        y=y - 1;
        x=x + 1;
        p=p + (2*ry*ry*x) - (2*rx*rx*y) - (rx*rx);
    }
}

function putpixel(mx, my) {
    $("#ellipse").append("<b style='left:" + mx + "px;top:" + my + "px'>.</b>");
}

1 comment:

  1. I love this. It is soo informative. Are you also searching for cheap assignment help we are the best solution for you. We are best known for delivering the best services to students without having to break the bank

    ReplyDelete

Blogroll

Popular Posts