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.

Answer 1

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