javascriptで回転機能を作成する

Question

私はthis websiteを見ていて、カスタム回転機能（単に楽しみのため）を作成する方法を学んでいます。 khan academyでコードを実行しています。なぜなら、コードを使って自然なシミュレーションを簡単に実行できるからです。これまでのところ、私は

// 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(); 
}; 

を持っている問題は、私の

square.prototype.rotate2D 

機能に明確にあります。形状はノードのxとyの値の周りを回転するはずですが、なんらかの理由で0,0の周りを回転しているようです。これはなぜか、私はこれを理解しようと数時間を費やしてきました。どんな助けもありがとうございます。また、私の一般的なプログラム構造が悪いと感じ、不必要なコードがいくつかあるので、最適化や構造の改善があれば教えてください。

Answer 1

最後に考え出しました。 enhzflepが言ったことにいくらか近い。

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