자바 스크립트에서 회전 기능 만들기

Question

나는 재미있는 사용자 정의 회전 기능을 만드는 방법을 배우려면 this website을보고 있습니다. khan academy에서 코드를 실행하고 있는데, 코드로 자연스러운 시뮬레이션을 쉽게 할 수 있기 때문입니다. 지금까지 나는 문제는 내

square.prototype.rotate2D 

기능에 명확하게

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

있습니다. 모양은 노드의 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; 
}