Circle inside of a Circle collision resolution in p5.js-CodePudding

I'm creating a program in which a circle bounces around the inside of a larger circle. I have figured out how to calculate when and where the circles collide but not how to calculate the resulting vector on the bouncing circle that should be applied. ANY help would be greatly appreciated.

code below or in the 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>

CodePudding user response：

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>