FtMocks

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

DEMO - Ellipse with jQuery

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>");
}