javascript-如何在P5js库中用鼠标拖动对象的速度

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

标签：p5-js,canvas,javascript,processing
来源： https://codeday.me/bug/20191024/1923276.html