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));
  };
}
ezgif.com-video-to-gif.gif

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));
  };
}
ezgif.com-video-to-gif-3.gif

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[0].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);
}
ezgif.com-video-to-gif-4.gif
ICMOlivia KungICM