【问题标题】:Circle inside of a Circle collision resolution in p5.jsp5.j​​s中圆碰撞分辨率内的圆
【发布时间】:2021-09-26 06:48:05
【问题描述】:

我正在创建一个程序,其中一个圆圈在一个更大的圆圈内部反弹。 我已经弄清楚了如何计算圆圈碰撞的时间和地点,但不知道如何计算应该应用的弹跳圆圈上的结果向量。任何帮助将不胜感激。

下面或web editor中的代码。

let pos, vel, acc;

function setup() {
  createCanvas(400, 400);
  pos = createVector(width / 2 + 20, height / 2 - 10); //inital position of ball
  vel = createVector(0, 0.5); //inital velocity
  acc = createVector(0.1, 0.1); //inital acc
}

function draw() {
  background(220);
  fill(255)
  //vel.add(acc); //acceleration disabled due to testing
  pos.add(vel); //adds velocity to the position 
  ellipse(pos.x, pos.y, 20); //draws the ball
  noFill();
  circle(width / 2, height / 2, 100); //draws the main ball (border)
  if (dist(pos.x, pos.y, width / 2, height / 2) >= 50 - 10) { //if the ball hits the circle
    theta = atan2(pos.y - height / 2, pos.x - width / 2);
    pX = 50 * cos(theta) + width / 2;
    pY = height / 2 + 50 * sin(theta);
    POI = createVector(pX, pY); //point of intersection vector
    fill(255, 0, 0);
    circle(pX, pY, 2);
    //a vector that when applied, *should* bounce the circle back
    oppositeForceVector = p5.Vector.sub(POI, (width / 2, height / 2));
    vel.add(oppositeForceVector);
    vel.limit(1);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

【问题讨论】:

标签: javascript collision p5.js


【解决方案1】:

let pos, vel, acc;

function setup() {
  createCanvas(400, 400);
  pos = createVector(width / 2 + 20, height / 2 - 10); //inital position of ball
  vel = createVector(0, 0.5); //inital velocity
  acc = createVector(0, 0.1); //inital acc
}

function draw() {
  background(220);
  fill(255)
  vel.add(acc); //acceleration disabled due to testing
  pos.add(vel); //adds velocity to the position 
  ellipse(pos.x, pos.y, 20); //draws the ball
  noFill();
  circle(width / 2, height / 2, 100); //draws the main ball (border)
  if (dist(pos.x, pos.y, width / 2, height / 2) >= 50 - 10) { //if the ball hits the circle
    theta = atan2(pos.y - height / 2, pos.x - width / 2);
    
    // Make our POI coordinates relative to the center of the circle
    let pX = 50 * cos(theta);
    let pY = 50 * sin(theta);
    let POI = createVector(pX, pY); //point of intersection vector
    
    // Find the tangent of the circle at the point of intersection
    let tangent = POI.copy().rotate(PI / 2);
    
    // Check the angle between or velocity, and the vector towards the POI
    let angle = vel.angleBetween(POI);
    // Don't "collide" if the circle is already moving back towards the center
    if (abs(angle) <= PI / 2) {
      // When we collide, or velocity vector should be mirrored, if we were pointing
      // outwards at a 45 degree angle, we should now be pointed inward at a 45
      // degree angle
      vel.rotate(vel.angleBetween(tangent) * 2);
    }
    
    fill(255, 0, 0);
    // when we draw the point of collision, offset from the center of the circle
    circle(pX + width / 2, pY + height / 2, 2);
  }
}
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"&gt;&lt;/script&gt;

【讨论】:

  • 这个解决方案有点黑,可能不是很好的物理学。
  • 谢谢,这是一个很好的解决方案,完全符合我的需求!
猜你喜欢
  • 2021-12-14
  • 2019-10-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-05-20
  • 1970-01-01
  • 2022-09-25
相关资源
最近更新 更多