Assignment 3: OOP

The task for this assignment was to implement an interactive visual experience using the concepts we learned last week, primarily object-oriented programming and arrays. For this assignment, I wanted to play with the visual perceptions of the audience. I wanted to create a very simple piece, but I also wanted to make it look like the piece has different underlying layers by incorporating a sense of depth. To give the illusion of 3D, I modified how shapes are displayed to include shading and perspective distortion. I introduced a z-axis movement illusion for the shapes. In the draw function, an interactive background changes hue based on mouse position, and shapes are updated and displayed with 3D effects.

class DynamicShape {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.z = random(-20, 20); // Simulate depth
    this.size = size;
    this.rotationSpeed = random(-0.05, 0.05);
    this.color = color(random(360), 80, 80);
    this.type = random(['square', 'circle', 'triangle']);
  }

  // updating the depth
  update() {
    this.z += random(-1, 1);
    this.adjustSizeBasedOnDepth();
  }

  // displaying different shapes
  display() {
    push();
    translate(this.x, this.y);
    scale(map(this.z, -20, 20, 0.8, 1.2)); 
    rotate(frameCount * this.rotationSpeed);
    fill(this.color);
    noStroke();
    switch (this.type) {
      case 'square':
        rectMode(CENTER);
        rect(0, 0, this.size, this.size);
        break;
      case 'circle':
        ellipseMode(CENTER);
        ellipse(0, 0, this.size, this.size);
        break;
      case 'triangle':
        this.drawTriangle();
        break;
    }
    pop();
  }

  // adjusting the depth
  adjustSizeBasedOnDepth() {
    this.size = map(this.z, -20, 20, 10, 50);
  }

  // drawing the triangle
  drawTriangle() {
    triangle(
      this.size * cos(0), this.size * sin(0),
      this.size * cos(TWO_PI / 3), this.size * sin(TWO_PI / 3),
      this.size * cos(TWO_PI * 2 / 3), this.size * sin(TWO_PI * 2 / 3)
    );
  }
}


// draw fucntion
function draw() {
  drawInteractiveBackground();
  shapes.forEach(shape => {
    shape.update();
    shape.display();
  });
}

The most challenging part was for me to figure out the static floral background and how to keep changing the hues to keep track of the depth of the newly created objects. Initially  struggled a bit with the new z-axis movement.