Weekly Assignment #3 – OOP and Array

Introduction:

Being an extrovert doesn’t come in as easy as it seems to be. Everyday we meet new people at different places, be it at the bus stand, mall, university, etc. With some of these, we end up forming some sort of relationship, whilst with some, that meeting ends that very day of having met them. I love talking to new people and getting to know them. Some people resonate with the same energy and others simply happen to pass over the opportunity.

Inspiration and ideation (Basic Hand-Drawn Sketch):

With this assignment, I wanted to communicate the idea of our lives ‘circling around the lives of others’. Sometimes it circles for longer, sometimes for very short period of time. During class we learnt how to draw balls bouncing within a confined space. I wanted to use the same aesthetics, represent people’s lives with circles. However, there is a catch! The circles themselves should circle around other circles circling inside a circle! Unintentional tongue twister? I guess so! I drafted a basic sketch on my iPad and hoped right onto my computer to code my idea.

The basic sketch I drew:

The static drawing couldn’t fill my appetite, so I switched over to using math. I recall watching certain tutorial video by our beloved ‘Coding Train’ youtube channel. You can watch the video by clicking on the link. I borrowed some coding inspiration from him, but had to draft my own coding logic to adapt to a much more dynamic style of spiral. I used the following mathematical logic to construct the clockwise spiral:

How to interact:

The program starts off with just ten spirals. Upon mouse click, it adds 5 more spirals (peoples) into our lives. The black canvas color represents the back of our mind.

Result:

Code I am proud of:

let spirals = []; // global array variable
let totalSpirals = 10; //start wtih 10 spirls.
// The Spiral class draws shapes along an outward spiral path
class Spiral {
  constructor(xpos, ypos) {
    // Center of the spiral
    this.cx = xpos;
    this.cy = ypos;
    // Starting angle and radius
    this.angle = random(TWO_PI);
    this.radius = 0; // begins with a zero radius
  
    this.rotationSpeed = random(0.05, 0.2); // speed of the spiral
    this.radiusIncrement = random(1, 3); // increases the cirlce radius
    
    this.shapeDim = random(10, 30); // size of each circe
   
    this.r = floor(random(255)); // random color assigned
    this.g = floor(random(255));
    this.b = floor(random(255));
  }
  
  update() {
    this.angle += this.rotationSpeed;
    this.radius += this.radiusIncrement;
    
    //math formula to calculate the circular movement
    let x = this.cx + this.radius * cos(this.angle);
    let y = this.cy + this.radius * sin(this.angle);
    
    if (x < 0 || x > width || y < 0 || y > height) {
      this.radius = 0;
      this.cx = random(width); // when circle moves.  out of the scren,
                              // randomly place it 
      this.cy = random(height);
    }
  }
  
  display() {
    
    let x = this.cx + this.radius * cos(this.angle);
    let y = this.cy + this.radius * sin(this.angle);
    
    noStroke();
    fill(this.r, this.g, this.b);
      circle(x, y, this.shapeDim); // drawing circle
  }
}

function setup() {
  ///
}

function draw() {
//
  
}

function mouseClicked() {
 //
}

In particular, the class and constructor function is something I got right after debugging and going through trial and error. To be even more precise, increase the angle depending on the speed as well planting a new circle  is my greatest achievement in this assignment, demonstrated by the following code :

  update() {
    this.angle += this.rotationSpeed;
    this.radius += this.radiusIncrement;
    
    //math formula to calculate the circular movement
    let x = this.cx + this.radius * cos(this.angle);
    let y = this.cy + this.radius * sin(this.angle);
    
    if (x < 0 || x > width || y < 0 || y > height) {
      this.radius = 0;
      this.cx = random(width); // when circle moves.  out of the scren,
                              // randomly place it 
      this.cy = random(height);
    }
  }
  

My mental state:

Future Improvements:

Make the trail pattern more visible, and use a different color scheme to give a glowing neon-like effect.