Make a rotate function in javascript

Question

I am looking at this website to learn how to make a custom rotating function (simply for fun). I am running my code at khan academy because it is easy for me to practice natural simulations with code. So far I have

// I would like to try and make 3d objects
//used this as a reference http://petercollingridge.appspot.com/3D-tutorial/rotating-objects


//make nodes
var node = function(x,y){
    this.x = x;
    this.y = y;
};

node.prototype.draw = function(){
    fill(0, 0, 0);
    ellipse(this.x,this.y,5,5);
};


//make and edge
var edge = function(n_1,n_2){//this n_1, and n_2 are arbitrary names for input params
    this.n_1 = n_1;
    this.n_2 = n_2;
};

//draw the edge
edge.prototype.draw = function(){
    fill(0, 0, 0);
    line(this.n_1.x,this.n_1.y, this.n_2.x, this.n_2.y);
};


//a center would be much eaiser... I will make squares with centers and diameters instead!
var square = function(x,y,d){
    this.x = x;
    this.y = y;
    this.d = d;

    //the radius
    var r = this.d/2;

    //make the nodes
    var n1 = new node(this.x -r ,this.y +r);
    var n2 = new node(this.x -r ,this.y -r);
    var n3 = new node(this.x +r ,this.y -r);
    var n4 = new node(this.x +r ,this.y +r);



    var nArray = [n1,n2,n3,n4];

    this.nArray = nArray;

    //make the edges
    var e1 = new edge(n1,n2);
    var e2 = new edge(n2,n3);
    var e3 = new edge(n3,n4);
    var e4 = new edge(n4,n1);


    var eArray = [e1,e2,e3,e4];
    this.eArray = eArray;
};




//make new squares
var s1 = new square(125,15,20);
var s2 = new square(185,15,20);



square.prototype.draw = function() {
    //draw everything
    for(var i = 0; i < this.nArray.length; i++){
        this.nArray[i].draw();
    }

    for(var j = 0; j < this.eArray.length; j++){
        this.eArray[j].draw();
    }
};


square.prototype.rotate2D = function(theta){
    //how much we want it to change is theta
    var sin_t = sin(theta);
    var cos_t = cos(theta);

    //we need the original x and y, since this.x and this.y will be changed
    var x = this.nArray[0].x;
    var y = this.nArray[0].y;

    //remember trig? x' = x * cos(beta) - y * sin(beta)
    //               y' = y * cos(beta) - x * sin(beta) 

    this.nArray[0].x = x * cos_t - y * sin_t;
    this.nArray[0].y = (y * cos_t) + (x * sin_t);

    text(x,200,200);
};



    s2.rotate2D(-3);
    s2.draw();

//draw shapes
draw = function() {
    //fill(255, 255, 255);
    //rect(0, 0, width, height);


    s1.draw();

    //s2.rotate2D(3);
    //s2.draw();
};

The issue is clearly in my

square.prototype.rotate2D

function. The shape should rotate around the x and y value of the node but for some reason it seems to be rotating around 0,0. Not Sure why this is, I have spent several hours trying to figure this out. Any help is appreciated. Also I feel like my general program structure is bad and I have some unnecessary code, so let me know if there are any optimizations or a better structure I can use as well.

That's because all you're doing it rotating. You need to translate to the origin, rotate, then translate back to original pos. Then it will appear to rotate around the point. Worth brushing up on your transformation math perhaps? Here's more on the rotate around a point issue: http://stackoverflow.com/questions/2259476/rotating-a-point-about-another-point-2d — enhzflep, Oct 05 '16 at 07:47

score -1 · Accepted Answer · answered Oct 05 '16 at 17:09

Finally figured it out. Somewhat close to what enhzflep said.

for (var n = 0; n < this.nArray.length; n++) {
    var node = this.nArray[n];
    var x = this.nArray[n].x - this.x;
    var y = this.nArray[n].y - this.y;
    node.x = x * cos_t - y * sin_t + this.x;
    node.y = y * cos_t + x * sin_t + this.y;
}

Make a rotate function in javascript

1 Answers1