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

在javascript中制作旋转功能

1 个答案: