Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

159
Views
Circle inside of a Circle collision resolution in p5.js

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>

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!