在javascript中创建一个旋转函数
Make a rotate function in javascript
我正在看这个网站学习如何使自定义旋转功能(只是为了好玩)。我在可汗学院运行我的代码,因为用代码练习自然模拟对我来说很容易。目前我有
// 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)旋转。不知道为什么会这样,我花了几个小时试图弄清楚。任何帮助都是感激的。此外,我觉得我的一般程序结构是坏的,我有一些不必要的代码,所以让我知道,如果有任何优化或更好的结构,我也可以使用。
终于想通了。和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;
}
相关文章:
- 禁用旋转木马中的下一个按钮和上一个按钮
- 在引导程序旋转木马中显示下一个图像
- 如何在猫头鹰旋转木马中滑动所有可见项目,而不是使用上一个/下一个按钮
- 在拉斐尔中将对象作为一个组旋转
- Jquery幻灯片中的列表,连接第一个和最后一个列表元素以创建旋转木马
- D3.js-围绕一个点旋转svg文本
- 如何停止多次单击下一个以破坏我的图像旋转器
- 在一组旋转器中,当一个旋转器的值发生变化时,更新其他旋转器的最大值
- 如何对齐一个旋转的轮子停止在中心位置,而不是使用javascript随机位置
- jQuery图库正在重复第一张图片的一个旋转
- 如何用CSS3和jQuery创建一个旋转齿轮
- js -制作一个旋转动画
- 使用javascript在HTML页面中构建一个旋转控件
- 在javascript中创建一个旋转函数
- 创建了一个旋转木马,但如果有多个旋转木马就会出错.(包括小提琴)
- 使引导旋转木马子弹滑动另一个旋转木马
- 在之前的画布上画一个旋转的圆
- 当我们进行ajax调用并等待响应并阻塞页面时显示一个旋转器
- Matter.js创建一个旋转平台
- 如何以及何时显示一个旋转器