我正在尝试使用P5.js库制作一个脚本,该脚本允许用户拖放受重力影响的球.当用户放下球时,我需要测量球的速度.
有了这些信息,我就能以两种不同的方式采取行动:
>如果球无速度掉落,它只会掉落
受重力影响.
>如果球在水平移动时掉落,则它必须遵循该轨迹,并且当然会受到重力的影响.
如何获得即时球速?有人能帮我吗?
代码是:
function Ball() {
this.diameter = 50;
this.v_speed = 0;
this.gravity = 0.2;
this.starty = height/2 - 100;
this.ypos = this.starty;
this.xpos = width/2;
this.update = function(){
this.v_speed = this.v_speed + this.gravity;
this.ypos = this.ypos + this.v_speed;
if (this.ypos >= height-this.diameter/2){
this.v_speed *= -1.0; // change direction
this.v_speed = this.v_speed*0.9;
if ( Math.abs(this.v_speed) < 0.5 ) {
this.ypos = this.starty;
}
}
}
this.show = function(){
ellipse(this.xpos, this.ypos, this.diameter);
fill(255);
}
}
解决方法:
编写一个函数,该函数检查XY坐标是否在球上:
this.onBall = function(x, y) {
let dx = x - this.xpos;
let dy = y - this.ypos;
let dist = Math.sqrt(dx*dx, dy*dy)
return dist <= this.diameter/2;
}
以及2个开始和停止拖动的功能.启动函数已设置this.v_speed = 0并注意鼠标的当前x和y坐标:
this.startDrag = function() {
this.drag = true;
this.v_speed = 0;
this.mousex = mouseX;
this.mousey = mouseY;
}
this.endDrag = function() {
this.drag = false;
}
使用mousePressed()
和mouseReleased()
事件开始和停止球的拖动.如果鼠标在球上,则表示拖动:
function mousePressed() {
if ( ball.onBall(mouseX, mouseY))
ball.startDrag();
}
function mouseReleased() {
ball.endDrag();
}
在更新中,您必须实现2种情况:1用于拖动,1用于重力:
this.update = function() {
this.minY = this.diameter/2;
this.maxY = height-this.diameter/2;
this.minX = this.diameter/2;
this.maxX = width-this.diameter/2;
if (this.drag) {
// ... draging
} else {
// ... gravity
}
在“拖动”的情况下,将球的位置设置为鼠标位置.此外,您还必须更新初始水平速度this.v_speed_x和垂直速度this.v_speed.释放球后(拖动结束),速度取决于侧向运动:
this.xpos = Math.max(this.minX, Math.min(this.maxX, mouseX));
this.ypos = mouseY;
this.v_speed_x = this.v_speed_x/2 + (mouseX - this.mousex);
this.v_speed = this.v_speed/2 + (mouseY - this.mousey);
this.mousex = mouseX;
this.mousey = mouseY;
在“重力”情况下,必须计算到目前为止的跌落和反弹.另外,必须应用减少的侧向移动:
// calculate gravity
this.v_speed = this.v_speed + this.gravity;
this.ypos = this.ypos + this.v_speed;
if (this.ypos >= this.maxY){
this.ypos = this.maxY;
this.v_speed *= -1.0; // change direction
this.v_speed = this.v_speed*0.9;
}
// the following has to be skipped if the ball is allowed to be thrown
// up to the sky (out of the screen at the top)
if (this.ypos <= this.minY){
this.ypos = this.minY;
this.v_speed *= -1.0;
this.v_speed = this.v_speed*0.9;
}
// calculate side movement
this.xpos = this.xpos + this.v_speed_x;
if ( this.xpos <= this.minX){
this.xpos = this.minX;
this.v_speed_x *= -1;
}
if ( this.xpos >= this.maxX){
this.xpos = this.maxX;
this.v_speed_x *= -1;
}
this.v_speed_x = this.v_speed_x * 0.99;
参见示例:
function Ball() {
this.diameter = 80;
this.v_speed = 0;
this.gravity = 0.2;
this.ypos = height/2 - 100;
this.xpos = width/2;
this.drag = false;
this.v_speed_x = 0;
this.onBall = function(x, y) {
let dx = x - this.xpos;
let dy = y - this.ypos;
let dist = Math.sqrt(dx*dx, dy*dy)
return dist <= this.diameter/2;
}
this.startDrag = function() {
this.drag = true;
this.mousex = mouseX;
this.mousey = mouseY;
}
this.endDrag = function() {
this.drag = false;
}
this.update = function() {
this.minY = this.diameter/2;
this.maxY = height-this.diameter/2;
this.minX = this.diameter/2;
this.maxX = width-this.diameter/2;
if (this.drag) {
this.xpos = Math.max(this.minX, Math.min(this.maxX, mouseX));
this.ypos = mouseY;
this.v_speed_x = this.v_speed_x/2 + (mouseX - this.mousex);
this.v_speed = this.v_speed/2 + (mouseY - this.mousey);
this.mousex = mouseX;
this.mousey = mouseY;
} else {
// calculate gravity
this.v_speed = this.v_speed + this.gravity;
this.ypos = this.ypos + this.v_speed;
if (this.ypos >= this.maxY){
this.ypos = this.maxY;
this.v_speed *= -1.0;
this.v_speed = this.v_speed*0.9;
}
if (/*false &&*/ this.ypos <= this.minY){
this.ypos = this.minY;
this.v_speed *= -1.0;
this.v_speed = this.v_speed*0.9;
}
// calculate side movement
this.xpos = this.xpos + this.v_speed_x;
if ( this.xpos <= this.minX){
this.xpos = this.minX;
this.v_speed_x *= -1;
}
if ( this.xpos >= this.maxX){
this.xpos = this.maxX;
this.v_speed_x *= -1;
}
this.v_speed_x = this.v_speed_x * 0.99;
}
}
this.show = function(){
ellipse(this.xpos, this.ypos, this.diameter);
fill(255);
}
}
var ball;
function mousePressed() {
if ( ball.onBall(mouseX, mouseY))
ball.startDrag();
}
function mouseReleased() {
ball.endDrag();
}
function setup() {
createCanvas(600, 600);
ball = new Ball();
}
function draw() {
background(0);
ball.update();
ball.show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>