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