p5.js 中的 Circle 碰撞解决方案中的 Circle inside

Question

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

下面或 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>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

p5.js 中的 Circle 碰撞解决方案中的 Circle inside

Circle inside of a Circle collision resolution in p5.js

javascript

collision

p5.js