Week 3 – Object-Oriented Programming

Concept

For this artwork, I wanted to use the ball example that we did in class and talked about. I wanted to take the basic idea and make it more interactive by giving the user more ways to interact with the artwork. Basically, when the user presses the screen, a new ball is created at the position where they clicked. Each ball has its own different properties, such as its speed, size, gravity, bounce, and color. Because these properties are randomly generated, every ball is slightly different from the others. I also added another interaction where the user can press C to change the color of all the balls. This makes the artwork change even after the balls have already been created. I wanted the artwork to feel like something the user is creating themselves rather than something that is completely automatic.

References and Inspiration

I first got my idea from this video from The Coding Train: [LINK]. I liked the concept of creating and moving objects, and I wanted to use a similar idea but add more interactivity to it. I also used the W3Schools website to understand more about arrays and references and to learn about things that I could use to improve my Object-Oriented Programming: [LINK] [LINK].

Code

//array for balls
let balls = [];

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(240);
//some instructions
  fill(0, 0, 0, 40);
  textAlign(CENTER);
  textSize(16);
  text("Click the screen to create a ball!", 250, 30);
  textSize(10);
  text("Press C to change color", 250, 60);

  line(0, 450, 500, 450);

  // Update every ball in the array
  for (let ball of balls) {
    ball.update();
    ball.display();
  }
}


// Click the mouse to create a new ball
function mousePressed() {

  let newBall = new Ball(mouseX, mouseY);
  balls.push(newBall);

  console.log("New ball:", newBall.color, newBall.speed);
}


// Press C to change the color of all the balls
function keyPressed() {

  if (key == 'c' || key == 'C') {

    for (let ball of balls) {
      ball.changeColor();
    }
  }
}

//Ball Class
class Ball {

  constructor(x, y) {

  this.x = x;
  this.y = y;

  this.size = random(20, 60);
  this.speed = 0;

  this.gravity = random(0.1, 0.3);
  this.bounce = random(0.85, 0.95);

  this.color = color(
    random(255),
    random(255),
    random(255),
    128
  );
}
//updates the balls movements
  update() {

    this.speed = this.speed + this.gravity;
    this.y = this.y + this.speed;


    if (this.y + this.size / 2 >= 450) {

      this.y = 450 - this.size / 2;
      this.speed = -this.speed * this.bounce;
    }
  }

  display() {

    noStroke();

    fill(this.color);

    circle(this.x, this.y, this.size);
  }

  
  //change the color of the ball
  changeColor() {

    this.color = color(
      random(255),
      random(255),
      random(255),
      128
    );
  }
}

Embedded Sketch

Problems I Ran Into

One of the main things I had to figure out was how to make every ball have its own properties while still using the same Ball class. I solved this by giving each new ball random values for its size, gravity, bounce, speed, and color inside the constructor. I also had to figure out how to change the color of all the balls at the same time. Since all of the balls are stored inside an array, I used a loop to go through every ball and call the changeColor() function when the user presses C. Another part I had to understand was how the balls could keep updating and displaying themselves while being stored in the array. I used the update() and display() functions for this, which made the code more organized.