Below is code for creating a canvas of falling, bouncing particles (balls), when mouse is dragged over canvas.

I have learned the following about collision detection:

Point is inside circle: If distance between center of circle and point is less than radius of circle

if (dist (pointX, pointY, circleX, circleY) < circleRad) { }

Point is outside circle: if distance between center of circle and point is more than radius of circle

if (dist (pointX, pointY, circleX, circleY) > circleRad) { }

Question: code below needs be adapted to include box in the middle of the canvas and when particles pass through the box they should change color to red. For this, the collision detection algorithm needs be applied.

Use p5.js library, Javascript, in VS code with Brackets extension.

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

js.sketch

------------

var balls = [];

///////////////////////////////////////////////

function setup() {

createCanvas(600,400);

}

///////////////////////////////////////////////

function draw() {

background(0);

// for loop inside the draw function to loop over all balls in the "balls" array

for (let i = 0; i < balls.length; i++) {

var gravity = createVector(0, 0.1); // this is force that is pulling ball down

// add friction so that ball does not infinitely bounces up and down

var friction = balls[i].velocity.copy(); // this is force that is slowing ball down

friction.mult(-1); // getting opposite force, opposite direction

friction.normalize(); // sets size of friction to 1

friction.mult(0.01); // tiny force of opposite direction

balls[i].applyForce(friction);

balls[i].applyForce(gravity);

balls[i].run();

}

}

///////////////////////////////////////////////

class Ball {

constructor(x, y){

this.velocity = new createVector(random(-3, 3), random(-3, 3));

this.location = new createVector(x, y);

this.acceleration = new createVector(0, 0);

this.size = random(10, 50);

}

run(){

this.draw();

this.move();

this.bounce();

}

draw(){

fill(125);

ellipse(this.location.x, this.location.y, this.size, this.size);

}

move(){

this.velocity.add(this.acceleration);

this.location.add(this.velocity);

this.acceleration.mult(0);

}

bounce(){

if (this.location.x > width-this.size/2) {

this.location.x = width-this.size/2;

this.velocity.x *= -1;

} else if (this.location.x < this.size/2) {

this.velocity.x *= -1;

this.location.x = this.size/2;

}

if (this.location.y > height-this.size/2) {

this.velocity.y *= -1;

this.location.y = height-this.size/2;

}

}

// accumulation of forces

applyForce(force) {

this.acceleration.add(force);

}

}

// mouseDragged function to create a new ball at the location of the mouse and push it to the "balls" array

function mouseDragged() {

balls.push(new Ball(mouseX, mouseY));

}

// buttonPressed function to clear the "balls" array when a button is pressed

function buttonPressed() {

balls = [];

}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

index.html

--------------------