Week 3 – Assignment – Optical Illusion

For this assignment, we had to experiment with concepts of object-oriented programming and arrays. I have made two sketches, both involving these concepts in different ways.

The first sketch is inspired by the example of the bouncing ball done in class. This sketch involves white lines produced on clicking against a colorful background, created using the random function. The movement in the lines is achieved using the noise() function. Finally, the mousePressed() function is used to produce interactivity, allowing the users to control the frequency of creation of the lines.

Applying object-oriented programming, I have defined a class called Shapes within which the required function Line() is defined. An array called ‘list’ stores each line as it is created.

Line() {
    stroke(255);
    strokeWeight(5);
    line(this.n,0,this.n,400);
    //xoff is the variable used for the argument of noise()
    this.xoff+=0.01;
    //the values are enhanced by a factor equivalent to the height
    this.n=noise(this.xoff-this.x)*height;
  }

The second sketch helped me achieve what I had initially hoped to create. It involves an illusion created using a for loop that produces rectangles of different sizes, all rotating at a certain angle. An if condition involving the mouseIsPressed Boolean variable results in the addition of color to the sketch. I wanted the sketch to include specific colors, so I created an array to store the color values, which are randomized and used as an argument for fill.

class Shapes{
  constructor(){
    this.angle=0;
    this.i=0;
    this.colors=["rgb(226,200,126)","rgb(239,165,83)","rgb(236,143,99)","rgb(239,119,110)"]; //array storing colors used as an argument for fill
    
 }
  
  Rectangle(){
    translate(width/2,height/2); //shifts the origin to the center of the canvas
    rectMode(CENTER);
    
    //for loop to decrease the size of squares
    
    for (let x=width; x>=0; x-=20){
      fill(int(random(0,130)));
      if (mouseIsPressed){
        fill(this.colors[this.i]);
        this.i=int(random(this.colors.length));
      }
      rotate(this.angle);
      rect(0,0,x,x);
      fill(int(random(150,255)));
      
      if (mouseIsPressed){
        fill(this.colors[this.i]);
        this.i=int(random(this.colors.length)); //stores a random value from the colors array
      }
      rotate(45);
      rect(0,0,x+20,x+20);
      this.angle+=1;
    }
  } 
}

During the assignment, I encountered several challenges with defining functions within a class and ran into errors while creating the loops. These errors were mainly due to the difference in the syntax used within a class.

Reflecting of the process, I feel both the above sketches involved relatively basic concepts of object-oriented programming, and I hope to enhance my learning by exploring further on these topics.