I need to code particles that fall when the mouse is dragged and bounce on the ground. JavaScript, p5.js in VS Code with brackets extension

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Steps to complete

Step 1: Use the JavaScript code provided below. Rename the ball variable to a balls and initialise it as an empty array.

Step 2: Create a for loop inside the draw() function and loop over all balls. Within the loop execute all code that would be previously applied to a single ball. Remember, balls is now an array eventually containing many balls. (Hint: Use the length property of the array to loop over it and an index to access a specific ball in the array.)

Step 3: Create a mouseDragged() function and write within it:

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

in order to push a new ball to the array every time the mouse is dragged. Were not done yet! Notice that the call to create a new ball passes the location of the mouse to the constructor.

Step 4: Modify the constructor of the Ball class in order to take two parameters, x and y. Use these to initialise the location vector in the constructor. If youve done things right, as you drag the mouse you should see many balls being generated and flying off in the same direction.

Step 5: In the constructor set the initial values of velocity to be random from -3 to 3 for both x and y components. Set the size to also be random. If youve done things right, as you drag the mouse you should see many particles of various sizes being initialised.

Step6: create a function buttonPressed() that clears the array when a button is pressed.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

// sketch.js

var ball;

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

function setup() {

createCanvas(600,400);

ball = new Ball();

}

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

function draw() {

background(0);

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

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

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

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

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

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

ball.applyForce(friction);

ball.applyForce(gravity);

ball.run();

}

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

class Ball {

constructor(){

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

this.location = new createVector(width/2, height/2);

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

this.size = 40;

}

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

}

}

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

// index.html