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

2019-10-24 20:38:03 阅读：439 来源： 互联网

标签：p5-js canvas javascript processing

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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