P5js库中如何获取鼠标拖动对象的速度

Question

我正在尝试使用 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);
    }
}

Answer 1

编写一个函数，检查 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个启动和停止拖动的功能。 start函数设置了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() and mouseReleased() 事件开始和停止拖动 Ball。如果鼠标在球上则表示拖动：

function mousePressed() {
    if ( ball.onBall(mouseX, mouseY))
        ball.startDrag();
}

function mouseReleased() {
    ball.endDrag();
}

在 update 中，您必须实现 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>

Demo

P5js库中如何获取鼠标拖动对象的速度

How to get the speed of an object dragged with the mouse in P5js library

javascript

processing

canvas

p5.js