Week 3 – OOP

Concept:

With this assignment, I wanted to further familiarize myself with objects and methods, which I feel like was accomplished. In my last assignment, the backbone of the piece was essentially just a grid of quadrilaterals, and there was really no way to switch it up between other shapes. Learning about OOP has broadened the creative liberty we have and so I experimented to make another grid piece, but this time with random shapes, making each shape an object.

Sketch:

Code Highlight:

With this assignment, I also learned to use the Case conditional statement which I utilized to assign a random shape to the object depending on the argument passed to it in the constructor. I also attempted translation and rotation, and made use of the push() and pop() functions to reset the grid after translations.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
show() {
fill(random(255), random(255), random(255), 180);
strokeWeight(0.1);
switch (
this.Sides //using a conditinal case statement to assign a random shape to the this.Sides attribute depending on the value it holds between 2 and 4
) {
case 2:
push();
circle(this.X, this.Y, 20);
pop();
break;
case 3:
push();
translate(this.X, this.Y); // translating the grid so the triangle is centered
rotate(1);
triangle(0, -9, -10, 10, 10, 10);
pop();
break;
case 4:
push();
translate(this.X, this.Y);
rotate(0.5);
rectMode(CENTER);
rect(0, 0, 20, 20);
pop();
break;
}
}
}
show() { fill(random(255), random(255), random(255), 180); strokeWeight(0.1); switch ( this.Sides //using a conditinal case statement to assign a random shape to the this.Sides attribute depending on the value it holds between 2 and 4 ) { case 2: push(); circle(this.X, this.Y, 20); pop(); break; case 3: push(); translate(this.X, this.Y); // translating the grid so the triangle is centered rotate(1); triangle(0, -9, -10, 10, 10, 10); pop(); break; case 4: push(); translate(this.X, this.Y); rotate(0.5); rectMode(CENTER); rect(0, 0, 20, 20); pop(); break; } } }
  show() {
    fill(random(255), random(255), random(255), 180);
    strokeWeight(0.1);
    switch (
      this.Sides //using a conditinal case statement to assign a random shape to the this.Sides attribute depending on the value it holds between 2 and 4
    ) {
      case 2:
        push();
        circle(this.X, this.Y, 20);
        pop();
        break;
      case 3:
        push();
        translate(this.X, this.Y); // translating the grid so the triangle is centered
        rotate(1);
        triangle(0, -9, -10, 10, 10, 10);
        pop();
        break;
      case 4:
        push();
        translate(this.X, this.Y);
        rotate(0.5);
        rectMode(CENTER);
        rect(0, 0, 20, 20);
        pop();
        break;
    }
  }
}

Reflection:

I would like to go back and figure out how to rotate the shapes where the rotation continues from the same stage even when the shapes change. I would also like to experiment with more methods in this class. I do think this captures the essence of OOP, making use of classes every time the loop iterates.

Leave a Reply