# Ideation

For this assignment, I wanted to create something that was colorful and dynamic. My immediate thoughts went to something that would grow on the screen and somehow interact with other objects.

# First iteration – without OOP

First, I just wanted to draw a circle on the screen at a fixed position and have it grow in size.
Once I finished this, I worked on creating an object for the circles so that I can have multiple of them on the screen using an array.

# Second Iteration – OOP

I also wanted to add some randomness to the way the bubbles change, so I used random for creating a different starting position, radius, color, and growth rate. I removed the stroke because it looks neater.

# Bubbles pop!

To make the bubbles pop, I did something similar to a coin flip but with tighter constraints so that they pop slower.

# Pop them yourself

Click on the bubbles to pop them.

Find the code here and below:

```let bubbles = [];

function setup() {
createCanvas(800, 800);

for (let i = 0; i < 100; i++) {
let colorVals = color(
random(255),
random(255),
random(255),
random(100, 150)
);
let growth = random(1.5);
let diameter = random(5);
let timer = random(20);
let x = random(diameter, height - diameter);
let y = random(diameter, width - diameter);
bubbles.push(new Bubble(x, y, diameter, timer, growth, colorVals));
}
}

function draw() {
background(220);

for (let i = 0; i < bubbles.length; i++) {
bubbles[i].run();
}
}

function mousePressed() {
for (let i = bubbles.length - 1; i >= 0; i--) {
let popped = bubbles[i].pop();
if (popped) {
bubbles.splice(i, 1);
break;
}
}
}

class Bubble {
constructor(posX, posY, diameter, timer, growth, colorValues) {
this.color = color(colorValues);
this.size = diameter;
this.timer = timer;
this.growth = growth;
this.x = posX;
this.y = posY;
}

run() {
this.draw();
this.update();
}

draw() {
noStroke();
fill(this.color);
circle(this.x, this.y, this.size);
}

update() {
this.size += this.growth;