The first assignment on the worksheet

https://editor.p5js.org/billybil30/full/azXZ8sZop

with this code

let pillars = [];
let pillarNum = 10;

function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < pillarNum; i++) {
    pillars.push(false); // Initialize all pillars as off (white)
  }
}

function draw() {
  background(220);
  
  let pillarWidth = width / pillarNum;
  
  for (let i = 0; i < pillarNum; i++) {
    if (pillars[i]) {
      fill(255, 0, 0); // Red for on state
    } else {
      fill(255); // White for off state
    }
    rect(i * pillarWidth, 0, pillarWidth, height);
  }
}

function mousePressed() {
  let pillarWidth = width / pillarNum;
  let clickedPillar = floor(mouseX / pillarWidth);
  
  if (clickedPillar >= 0 && clickedPillar < pillarNum) {
    pillars[clickedPillar] = !pillars[clickedPillar]; // Toggle pillar state
  }
}

The second assignment

https://editor.p5js.org/billybil30/full/Qm-QK-5OP

let balls = [];

function setup() {
  createCanvas(600, 400);
  for (let i = 0; i < 2; i++) {
    let x = random(width);
    let y = random(height);
    let r = random(10, 50);
    let b = new Ball(x, y, r);
    balls.push(b);
  }
}

function draw() {
  background(0);
  for (let i = 0; i < balls.length; i++) {
    balls[i].move();
    balls[i].bounce();
    balls[i].show();
  }
}

// class for the Balls
class Ball {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.xSpeed = random(1, 3);
    this.ySpeed = random(1, 3);
  }

  move() {
    this.x += this.xSpeed;
    this.y += this.ySpeed;
  }

  bounce() {
    if (this.x > width - this.r || this.x < this.r) {
      this.xSpeed *= -1;
    }
    if (this.y > height - this.r || this.y < this.r) {
      this.ySpeed *= -1;
    }
  }

  show() {
    fill(255);
    ellipse(this.x, this.y, this.r);
  }
}

The assignment 3 only makes it 20, so I just changed the i value

https://editor.p5js.org/billybil30/full/f4dBVDV2P

let balls = [];

function setup() {
  createCanvas(600, 400);
  for (let i = 0; i < 20; i++) {
    let x = random(width);
    let y = random(height);
    let r = random(10, 50);
    let b = new Ball(x, y, r);
    balls.push(b);
  }
}

function draw() {
  background(0);
  for (let i = 0; i < balls.length; i++) {
    balls[i].move();
    balls[i].bounce();
    balls[i].show();
  }
}

// class for the Balls
class Ball {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.xSpeed = random(1, 3);
    this.ySpeed = random(1, 3);
  }

  move() {
    this.x += this.xSpeed;
    this.y += this.ySpeed;
  }

  bounce() {
    if (this.x > width - this.r || this.x < this.r) {
      this.xSpeed *= -1;
    }
    if (this.y > height - this.r || this.y < this.r) {
      this.ySpeed *= -1;
    }
  }

  show() {
    fill(255);
    ellipse(this.x, this.y, this.r);
  }
}

modified it for the 4th assignment

https://editor.p5js.org/billybil30/full/jPfNLHVq4

the 5th assignment a bit too confusing for me because I don’t see it in the coding train 7th series (sorry), so I skipped to the 6th one:

https://editor.p5js.org/billybil30/full/S9CmTcRUp

let balls = [];

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);
  for (let ball of balls) {
    ball.move();
    ball.bounce();
    ball.show();
  }
}

function mousePressed() {
  let ballRemoved = removeBall();
  if (!ballRemoved) {
    addBall();
  }
}

function addBall() {
  let r = random(10, 50);
  let b = new Ball(mouseX, mouseY, r);
  balls.push(b);
}

function removeBall() {
  for (let i = balls.length - 1; i >= 0; i--) {
    if (balls[i].contains(mouseX, mouseY)) {
      balls.splice(i, 1);
      return true;
    }
  }
  return false;
}

class Ball {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.xSpeed = random(-3, 3);
    this.ySpeed = random(-3, 3);
  }

  move() {
    this.x += this.xSpeed;
    this.y += this.ySpeed;
  }

  bounce() {
    if (this.x > width - this.r / 2 || this.x < this.r / 2) {
      this.xSpeed *= -1;
    }
    if (this.y > height - this.r / 2 || this.y < this.r / 2) {
      this.ySpeed *= -1;
    }
  }

  show() {
    fill(255);
    ellipse(this.x, this.y, this.r);
  }

  contains(px, py) {
    let d = dist(px, py, this.x, this.y);
    return d < this.r / 2;
  }
}