ProcessingJS 物理模拟中的惯性和重力不准确

Question

所以，我正在尝试在 Processing JS 中进行基本的物理模拟。我希望用户能够通过拖动来控制球。他们应该能够移动它并通过释放它来将它抛向空中。没有别的，只有这些东西，当然还有 canvas 周围的墙壁，我可以轻松地自己编程。我在动量和重力方面遇到了一些问题，我找不到一个好的方法来处理我正在使用的当前系统。

我已经尝试过使用 pmouseX 和 mouseX 以及它们对应的 Y 轴。但是，如果用户按下屏幕并四处移动，它会重置球的加速度和速度。我在 mouseDragged() 函数中完成了所有这些工作。接下来，我尝试使用 mouseReleased 函数在拖动完成时执行这些操作，但这没有用，因为它检测到所有点击并重置加速度和速度或将它们设置为高得离谱的数字。对于这两者，我也遇到了阻力、空气阻力和摩擦力的问题。我无法轻易地将它们与现有代码和引力结合起来。到目前为止，我一直在使用 PVector 作为速度。

我已经完成了这两种方法的某种组合，这就是我目前所做的。

int x = 150;
int y = 150;
PVector v;
v = new PVector(0,0);
int pmousex2 = 0;
int pmousey2 = 0;
void draw() {  // this is run repeatedly.  
    background(255,255,255);
    x += v.x;
    y += v.y;
    v.set((v.x/1.0125), ((v.y/1.0125)+3));
    ellipse(x,y,12,12);
    pmousex2 = pmouseX;
    pmousey2 = pmouseY;
    if (y>294){
        v.set((v.x/1.5),(((-1*v.y)/1.5)));
    }
    if (y<6){
        v.set((v.x/1.5),(((-1*v.y)/1.5)+3));
    }
    if (x>294){
        v.set(((-1*v.x)/1.5),v.y);
    }
    if (x<6){
        v.set(((-1*v.x)/1.5),v.y);
    }
}
void mouseReleased(){
    if (mouseX>(x-20) && mouseX<(x+20) && mouseY>(y-20) && mouseY<(y+20)){
        v.set((pmouseX - pmousex2)/4, (pmouseY - pmousey2)/4);
    }
}
void mouseDragged(){
    if (mouseX>(x-20) && mouseX<(x+20) && mouseY>(y-20) && mouseY<(y+20)){
        x=mouseX;
        y=mouseY;    
    }
}

我遇到过几个问题，尤其是上面描述的问题。我也遇到过拖动时球移动很小的情况。最后，主要问题。当重力将球向下拉时，我无法让球静止不动。如果我完全加强重力，球最终会从地板上掉下来。如果我减弱重力，球将永远不会停止弹跳。我想知道是否有不同的方法来解决这个我还没有想到的问题。非常感谢。

Answer 1

关于上一期正题。最常见的方法是根据重力矢量对球的速度和位置进行矢量加法：

let canvas
let pos
let ground
let gravity
let speed

function setup() {
  canvas = createVector(500,500)
  pos = createVector(200,150)
  ground = createVector(0,470)
  gravity = createVector(0,2.5)
  speed = createVector(0,0)
  createCanvas(canvas.x,canvas.y)
}

function draw() {
    // update
    speed.add(gravity)
    pos.add(speed)
    if (pos.y >= ground.y - 8) {
      pos.y = ground.y - 8
      if (speed.mag() > 3.0) {
        speed.mult(-1)
      }
      else {
        speed = createVector(0,0)
        gravity = createVector(0,0)
      }
    }
    // draw
    background(200,200,220)
    fill(170, 100, 50);
    noStroke();
    rect(0,ground.y,canvas.x,canvas.y-ground.y)
    stroke(50)
    fill(100, 150, 150);
    ellipse(pos.x,pos.y,16,16)
}

function mouseReleased(){
    speed = createVector(0,0)
    gravity = createVector(0,2.5)
    pos.set(mouseX, mouseY)
}

DEMO

因此，使用这种方法，您将习惯向量代数运算，这在计算机图形开发中需要大量，并且您的解决方案将最符合运动学定律。

ProcessingJS 物理模拟中的惯性和重力不准确

Inaccurate inertia and gravity in ProcessingJS physics simulation

physics

p5.js

processing.js