Afra Binjerais – Assignment 3

Taking inspiration from a basic car drawing, I started what I thought was an easy assignment. But as the deadline got closer, I realized I had misunderstood the instructions. Even though I spent a lot of time on it, the final result wasn’t what it should’ve been. Still, I decided to include it in my work to show my effort. 🤣🤣🤣🤣🤣

Not giving up, I tried again. This time, I wanted to make something different. This time I created a random canvas, inspired by children’s drawings of random shapes. (since that was what my niece was doing right beside me when I was working on this assignment 🙂 ) 

where each time the mouse clicks a new shape, a new color appears on the place you have clicked. Although it was very simple, since I was rushing, I still managed to include arrays 

class Circle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.diameter = random(30, 100);
    this.color = color(random(255), random(255), random(255));
  }
  
  move() {
    this.x += random(-3, 3);
    this.y += random(-3, 3);
  }
  
  draw() {
    fill(this.color);
    noStroke();
    ellipse(this.x, this.y, this.diameter, this.diameter);
  }
}

class Triangle {
  constructor(x, y) {
    let x2 = x + random(-50, 50);
    let y2 = y + random(-50, 50);
    let x3 = x + random(-50, 50);
    let y3 = y + random(-50, 50);
    
    this.points = [{x: x, y: y}, {x: x2, y: y2}, {x: x3, y: y3}];
    this.color = color(random(255), random(255), random(255));
  }

I had to use class, and the concept of randomness to create this abstract, and noise to create the jittering effect, that adds interactivity to this project, making it more interesting.

 

Looking back, even though I made the huge mistake of skimming through the instructions, I learned a lot from this project. It taught me to pay more attention to details and understand what I needed to do, and I was able to experiment and find a way to trigger the creation of a random object each time the mouse was clicked.