Machen Sie eine Drehfunktion in Javascript

Question

Ich freue mich auf this website zu lernen, wie man eine benutzerdefinierte rotierende Funktion (einfach zum Spaß) zu machen. Ich lasse meinen Code unter khan academy laufen, weil es für mich einfach ist, natürliche Simulationen mit Code zu üben. Bisher habe ich

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

Die Frage ist eindeutig in meinem

square.prototype.rotate2D 

Funktion. Die Form sollte sich um den x- und y-Wert des Knotens drehen, aber aus irgendeinem Grund scheint sie sich um 0,0 zu drehen. Nicht sicher, warum das ist, habe ich mehrere Stunden damit verbracht, herauszufinden, was das ist. Jede Hilfe wird geschätzt. Auch habe ich das Gefühl, dass meine allgemeine Programmstruktur schlecht ist und ich über unnötigen Code verfüge, also lassen Sie mich wissen, ob es Optimierungen oder eine bessere Struktur gibt, die ich auch verwenden kann.

Answer 1

Endlich herausgefunden. Etwas nah an dem, was Enhzflep gesagt hat.

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