# ICM Blog Post 4

Our goal for week 4 was to re-organize our code. We were tasked to keep `setup()` and `draw()` as clean as possible and create new functions that would hold calculations, drawings, and other code. I started by familiarizing myself with object oriented programming. I also worked with Chenyu so that we could combine our code. We individually came up with different functions and combined them at the end. I decided to draw a simple rectangle that changed location and size randomly using a separate function. As each rectangle is generated, the color randomly changes as well. Below is a copy of the code, which can also be viewed here, along with a gif of the sketch.

```let square1;

function setup() {
createCanvas(500, 500);
frameRate(5);
rectMode(CENTER, CENTER);
}

function draw() {
background(220);
square1 = new squares();
square1.rect();
square1.random();
}

function squares() {
this.x1 = random(width);
this.y1 = random(height);
this.x2 = random(50);
this.y2 = random(50);

this.rect = function() {
rect(this.x1, this.y1, this.x2, this.y2);
};

this.random = function() {
fill(random(255), 0, random(255));
};
}```

Then I added multiple rectangles. I also wanted to add some other shapes, so I added ellipses into the squares() function. Below is a copy of the code, which can also be viewed here, along with a gif of the sketch.

```let square1, square2, square3;

function setup() {
createCanvas(500, 500);
frameRate(5);
rectMode(CENTER, CENTER);
}

function draw() {
background(220);
square1 = new squares();
square2 = new squares();
square3 = new squares();
square1.rect();
square1.random();
square2.rect();
square2.random();
square3.rect();
square3.random();
}

function squares() {
this.x1 = random(width);
this.y1 = random(height);
this.x2 = random(50);
this.y2 = random(50);
this.circlex1 = random(width);
this.circley1 = random(height);
this.circlex2 = random(20);
this.circley2 = random(20);

this.rect = function() {
rect(this.x1, this.y1, this.x2, this.y2);
ellipse(this.circlex1, this.circley1, this.circlex2, this.cricely2);
};

this.random = function() {
fill(random(255), 0, random(255));
};
}```

Although this is a simple generation of shapes, I wanted to familiarize myself with creating other functions and the syntax of objects. Then Chenyu and I combined our code to produce this. Below is a copy of the code, which can also be viewed here, along with a gif of the sketch.

```var Balls = [];
let square1, square2, square3;

function setup() {
createCanvas(600, 600);
frameRate(40);
rectMode(CENTER, CENTER);
for (var i = 0; i < 30; i++) {
//let x = i/100-10;
Balls[i] = new ball(200, 200, random(10, 40));
}
}

function draw() {
background(220);
square1 = new squares();
square2 = new squares();
square3 = new squares();
square1.rect();
square1.random();
square2.rect();
square2.random();
square3.rect();
square3.random();
Balls.show();
}

function squares() {
this.x1 = random(width);
this.y1 = random(height);
this.x2 = random(50); //if rect
this.y2 = random(50);
this.circlex1 = random(width);
this.circley1 = random(height);
this.circlex2 = random(20);
this.circley2 = random(20);

this.rect = function() {
rect(this.x1, this.y1, this.x2, this.y2);
ellipse(this.circlex1, this.circley1, this.circlex2, this.cricely2);
};

this.random = function() {
fill(random(255), 0, random(255));
};
}
class ball {
constructor(g, dia, bounce, x, y, speedY) {
this.g = random(1.5, 2);
this.g = 1.2;
this.dia = random(10, 70);
this.bounce = random(0.6, 0.86);
this.bounce = map(this.dia, 10, 50, 0.6, 0.86);
this.x = random(this.dia / 2, 700 - this.dia / 2);
this.y = 0;
this.speedY = 0;
}
show() {
for (var i = 0; i < Balls.length; i++) {
Balls[i].speedY += Balls[i].g;
Balls[i].y += Balls[i].speedY;
if (Balls[i].y >= (height - Balls[i].dia / 2)) {
Balls[i].speedY = -(Balls[i].speedY * Balls[i].bounce);
Balls[i].y = height - Balls[i].dia / 2;
}
ellipse(Balls[i].x, Balls[i].y, Balls[i].dia, Balls[i].dia);
noStroke();
fill(Balls[i].y - 80, Balls[i].x + 150, Balls[i].x);
}
}
}

function mousePressed() {
//let r = random(10,100);
let b = new ball(mouseX, mouseY, 20);
Balls.push(b);
//background(200);
}```
ICMOlivia KungICM