Search code examples
javascriptgraphics2dgeometrycurve

Why it isn't circle?

I'm learning about 2D graphics and I'm trying to draw circle, but I get some strange curve. 

function rotatePoint (point, centerPoint, theta) {
    point[0] = point[0] - centerPoint[0];
    point[1] = point[1] - centerPoint[1];
    point[0] = point[0]*Math.cos(theta)-point[1]*Math.sin(theta);
    point[1] = point[0]*Math.sin(theta)+point[1]*Math.cos(theta);
    point[0] = point[0] + centerPoint[0];
    point[1] = point[1] + centerPoint[1];
}

Formula seems fine, but... I don't know, I can't figure it out :/ ... Thanks for help. http://jsfiddle.net/nQvGT/173/

Solution

  • You are changing one value and then using that in the calculation of the other value. You have to first calculate both values using the original values, then set them:

    var p0 = point[0]*Math.cos(theta)-point[1]*Math.sin(theta);
var p1 = point[0]*Math.sin(theta)+point[1]*Math.cos(theta);
point[0] = p0;
point[1] = p1;

    Demo: http://jsfiddle.net/Guffa/nQvGT/174/