ICM Blog Post 5

Our goal for week 5 was to design an object-oriented sketch. The end goal was to have code in the draw() function that only references objects. I was really unsure what kind of sketch I wanted to create, so I used the ball bouncing sketch from the quiz and class as a starting point. I changed the ball to be some kind of face, similar to the face from week 2, which is why my code has some constant numbers that I made variables in the constructor. I made a single object, the face, in the render() function and then the update() and bounce() functions were used to move the faces around. There are already 10 faces being added to an array of faces in the setup() function, then every time you click the mouse, another face is added to an array. I made it so that the color is determined by the x and y position of the face. Below is a copy of the code, which can also be viewed here, along with a gif of the sketch.

ezgif.com-video-to-gif.gif
let faces = [];

function setup() {
  createCanvas(500, 500);
  for (let i = 0; i < 10; i++) {
    faces.push(new Face(random(width), random(height), random(-4, 4), random(-4, 4)));
  }
}

function draw() {
  background(220);
  for (let f in faces) {
    faces[f].run();
  }
}

function mousePressed() {
  let newFace = new Face(mouseX, mouseY, random(-4, 4), random(-4, 4));
  faces.push(newFace);
}
                         
class Face {
  constructor(x, y, xspeed, yspeed, r1, r2, zero, four, five, six, ten) {
    this.x = x;
    this.y = y;
    this.xspeed = xspeed;
    this.yspeed = yspeed;
    this.r1 = 50;
    this.r2 = 60;
    this.zero = 0;
    this.four = 4;
    this.five = 5;
    this.six = 6;
    this.ten = 10;
  }

  run() {
    this.update();
    this.bounce();
    this.render();
  }

  render() {
    stroke(this.x, this.y, this.r1);
    fill(this.x, this.y, this.r1);
    ellipse(this.x, this.y, this.r1, this.r2);
    stroke(this.zero);
    fill(this.zero);
    ellipse(this.x - this.ten, this.y - this.five, this.five, this.four);
    ellipse(this.x + this.ten, this.y - this.five, this.five, this.four);
    ellipse(this.x, this.y + this.ten, this.four, this.six);
  }

  update() {
    this.x += this.xspeed;
    this.y += this.yspeed;
  }

  bounce() {
    if (this.x > width || this.x < 0) this.xspeed *= -1;
    if (this.y > height || this.y < 0) this.yspeed *= -1;
  }
}
ICMOlivia KungICM