根据处理速度创建对象的运动.js
Creating an object's movement based on velocity in processing.js
我正在尝试画鸟,它们的翅膀根据它们的速度摆动。简单地说,我的鸟儿飞得越快,它们的翅膀摆动得越快。
我的完整代码在下面,它没有做我想要的。我为创建振荡所做的是使flyingFactor
根据displayAndMoveWings
函数中velocity
的大小而变化。然而,当我draw
我发现的一切时,因为velocity
一直在变化(即由draw
函数中的随机acceleration
力触发),flyingFactor
也是如此,这意味着我的鸟的翅膀根本不会摆动,看起来很麻烦。
有什么方法可以让它工作吗?我希望我的鸟的翅膀看起来像是自然摆动的,只是随着我的鸟加速或减速而更快和更慢。
提前非常感谢!
angleMode = "degrees";
var Bird = function(m,x,y){
this.mass = m;
this.position = new PVector(x,y);
this.velocity = new PVector(0,0);
this.acceleration = new PVector(0,0);
};
Bird.prototype.applyForce = function(force) {
var f = PVector.div(force, this.mass);
this.acceleration.add(f);
};
Bird.prototype.update = function() {
this.velocity.add(this.acceleration);
this.position.add(this.velocity);
this.acceleration.mult(0);
this.velocity.limit(3);
};
Bird.prototype.displayAndMoveWings = function() {
this.start=-110;
this.stop = this.start + 110;
this.flyingFactor=cos(360+frameCount*this.velocity.mag()*10)*20;
stroke(0, 0, 0);
strokeWeight(2);
noFill();
arc(this.position.x,this.position.y,this.mass,this.mass,this.start-this.flyingFactor,this.stop-this.flyingFactor);
arc(this.position.x+this.mass,this.position.y,this.mass,this.mass,this.start+this.flyingFactor-70,this.stop+this.flyingFactor-70);
};
Bird.prototype.checkEdges = function() {
if (this.position.x > width) {
this.position.x = 0;
} else if (this.position.x < 0) {
this.position.x = width;
}
if (this.position.y > height) {
this.position.y = 0;
} else if (this.position.y < 0) {
this.position.y = height;
}
};
var bird1 = new Bird(15, width/2, height/2);
var draw = function() {
background(255, 255, 255);
bird1.update();
bird1.displayAndMoveWings();
var randomAcceleration = new PVector(random(-3,3),random(-3,3));
bird1.checkEdges();
bird1.applyForce(randomAcceleration);
};
我想
我可能已经发现了一个黑客...在displayAndMoveWings
函数之前,我创建了一个名为 whatIsVelocity
的新全局变量。然后在displayAndMoveWings
年我写了以下内容:
if (frameCount % 60 === 0){
whatIsVelocity = this.velocity.mag();
}
this.flyingFactor=cos(360+frameCount*whatIsVelocity*10)*20;
实际上,这样做是每 60 帧(大约 2 秒)拉动一次速度,并将该速度引入flyingFactor
,这意味着它不会像我上面的代码那样每帧都重新计算。不是超级漂亮,但它达到了我的目的。
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 强制模板刷新ember.js
- 如何编写HTML输入的JS内联
- Angular JS IE9 Hashbang url rewriting
- 使用JS将数组转换为json对象
- JS - 如何在 x 方向上提供平滑的运动
- 使用WebGL和三个.js进行运动模糊
- 狡猾的JS碰撞运动
- 了解从 JS中的event.acceleration 接收的设备运动数据
- JS/CSS 3dtransform 恒定运动
- 如何使上下运动的相位器js没有重力
- 如何在鼠标移动时重新创建Three.js的OrbitControl运动
- 我如何使心跳与3.JS和跳跃运动
- 如何在动能js中创建一个普通的html5文本框,而不创建对象“;运动的文本”;
- 根据处理速度创建对象的运动.js
- Javascript 三.js流畅的摄像机运动
- 在Enchant JS框架中创建一个循环运动的精灵