"use strict"; let fpsdisp, hitsdisp; var w, h; // next 2 functions are bases on the collision functions by Chris Courses, adapted to P5.js function rotation(velocity, angle) { const rotatedVelocities = { x: velocity.x * cos(angle) - velocity.y * sin(angle), y: velocity.x * sin(angle) + velocity.y * cos(angle) }; return rotatedVelocities; } function resolveCollision(ball, otherBall) { const xVelocityDiff = ball.velocity.x - otherBall.velocity.x; const yVelocityDiff = ball.velocity.y - otherBall.velocity.y; const xDist = otherBall.location.x - ball.location.x; const yDist = otherBall.location.y - ball.location.y; // Prevent accidental overlap of balls if (xVelocityDiff * xDist + yVelocityDiff * yDist >= 0) { // Grab angle between the two colliding particles const angle = -atan2(otherBall.location.y - ball.location.y, otherBall.location.x - ball.location.x); // Store mass in var for better readability in collision equation const m1 = ball.mass; const m2 = otherBall.mass; // Velocity before equation const u1 = rotation(ball.velocity, angle); const u2 = rotation(otherBall.velocity, angle); // Velocity after 1d collision equation const v1 = { x: u1.x * (m1 - m2) / (m1 + m2) + u2.x * 2 * m2 / (m1 + m2), y: u1.y }; const v2 = { x: u2.x * (m1 - m2) / (m1 + m2) + u1.x * 2 * m2 / (m1 + m2), y: u2.y }; // Final velocity after rotating axis back to original location const vFinal1 = rotation(v1, -angle); const vFinal2 = rotation(v2, -angle); // Swap particle velocities for realistic bounce effect ball.velocity.x = vFinal1.x; ball.velocity.y = vFinal1.y; otherBall.velocity.x = vFinal2.x; otherBall.velocity.y = vFinal2.y; } } // blood trail upon collision class Particle { constructor(_x, _y, _speed) { this.x = _x; this.y = _y; this.speed = _speed; } show() { fill(255, 0, 0); stroke(255, 0, 0); ellipse(this.x, this.y, 3) } fall() { this.y += this.speed; this.show(); } } class Ball { constructor(_x, _y, _rad, _speedH, _speedV) { this.location = createVector(_x, _y); this.velocity = createVector(_speedH, _speedV); this.rad = _rad; this.r = 0; this.g = 255; this.b = 0; this.mass = 1; } show() { stroke(this.r, this.g, this.b); strokeWeight(.5); fill(255, 0, 0); ellipse(this.location.x, this.location.y, this.rad); } move() { this.location.add(this.velocity); this.show(); } } var balls = []; var particles = []; var nrBalls = 20; var x, y; var hits=0; function setup() { if (windowWidth > displayWidth) { w = displayWidth; h = displayHeight*0.8; } else { w = windowWidth; h = windowHeight; } createCanvas(w, h); fpsdisp = createSpan().id("Fps"); hitsdisp = createSpan().id("Hits") for (let i=0; i< nrBalls; i++) { const radius = 15; x = random(radius, w-radius); y = random(radius, h-radius); if (i !== 0) { for (let j=0; j= h) particles.splice(index, 1); }); } function checkWalls(ball) { // change direction upon collision if (ball.location.x >= w-ball.rad/2 || ball.location.x <= ball.rad/2) ball.velocity.x *= -1; if (ball.location.y >= h-ball.rad/2 || ball.location.y <= ball.rad/2) ball.velocity.y *= -1; // prevent sticking to walls if (ball.location.x - ball.rad/2 <= 0) ball.location.x = ball.rad/2; if (ball.location.x - ball.rad/2 >= w) ball.location.x = w-ball.rad/2; if (ball.location.y - ball.rad/2 <= 0) ball.location.y = ball.rad/2; if (ball.location.y - ball.rad/2 >= h) ball.location.y = h-ball.rad/2; } function collideCircleCircle(x, y, d, x2, y2, d2) { var distance = dist(x, y, x2, y2); var distance2 = d/2+d2/2; if (distance <= distance2) return true; else return false; } // uses whole window size, even after resize function windowResized() { resizeCanvas(w, h); }

Circle collision [p5.js]