Как получить скорость перетаскивания объекта мышью в библиотеке P5js - PullRequest
Новая
       52

Как получить скорость перетаскивания объекта мышью в библиотеке P5js

0 голосов
/ 08 февраля 2019

Я пытаюсь создать скрипт с библиотекой P5.js, который позволяет пользователю перетаскивать шар, на который влияет гравитация.Когда пользователь бросает мяч, мне нужно измерить его скорость.Имея эту информацию, я могу действовать двумя различными способами:

  1. Если мяч падает без скорости, он просто падает прямо под действием силы тяжести.
  2. Еслимяч падает при движении по горизонтали, тогда он должен следовать по этой траектории и, конечно, подвергаться воздействию силы тяжести.

Как я могу получить мгновенную скорость мяча?Кто-нибудь может мне помочь?

код: 

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);
    }
}

1 Ответ

0 голосов
/ 08 февраля 2019

Напишите функцию, которая проверяет, находится ли координата 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();
}

В 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>
...