Week 3 MLNI – Generative Art w/ OOP (Cherry Cai)

Project: Reduce Light Pollution

For this week’s assignment, I created a generative art that utilizes object-oriented programming concept and interactivity with the mouse.

Presentation of the Project

Inspiration

This project is inspired by light pollution (aka photo pollution), which is the presence of anthropogenic and artificial light in the night environment. Cities like Shanghai, New York, and London are nowadays hardly witnessing any stars in the night due to all kinds of artificial light resources.

Code

vertex()

I started by drawing the generative art of a star.

//divided a circle into 5 part
let angle = TWO_PI / 5;

//defined a halfAngle
let halfAngle = angle / 2.0;

fill(255);
translate(x, y);

beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
 //cos() Values are returned in the range -1~1.
 let sx = 0 + cos(a) * 20;
 //sin() Values are returned in the range -1~1
 let sy = 0 + sin(a) * 20;
 vertex(sx, sy);
 sx = 0 + cos(a + halfAngle) * 10;
 sy = 0 + sin(a + halfAngle) * 10;
 vertex(sx, sy);
}
endShape(CLOSE);

class

Then I wrote it as a class so that I will be able to call it multiple times by creating an array. Also, in order to simulate the night sky, I wrote another class which embedded with little twinkle stars.

class Star {
  constructor() {
   this.x = random(width);
   this.y = random(height);
   this.size = random(0.25, 3);
   this.t = random(TAU); //TAU = TWO_PI
  }

  draw() {
   this.t += 0.1;
   var scale = this.size + sin(this.t) * 2;
   noStroke();
   fill(255);
   ellipse(this.x, this.y, scale, scale);
  }
}

class click{
  
  constructor() {
    this.x = width/2;
    this.y = height/2;
    this.angle = TWO_PI / 5;
    this.halfAngle = this.angle / 2.0;
    this.size = random(0.25, 0.5);
    this.t = random(TAU);
  }
  
  drawStar() {
    this.t += 0.1;
    //sin() Values are returned in the range -1 to 1
    var scale1 = this.size + sin(this.t) * 0.5;
    
    translate(this.x, this.y);
    rotate(frameCount * 0.01);
    scale(scale1);
    fill(255,255,0);
    
    beginShape();
    for (let a = 0; a < TWO_PI; a += this.angle) {
      let sx = 0 + cos(a) * 20;
      let sy = 0 + sin(a) * 20;
      vertex(sx, sy);
      sx = 0 + cos(a + this.halfAngle) * 10;
      sy = 0 + sin(a + this.halfAngle) * 10;
      vertex(sx, sy);
    }
    endShape(CLOSE);
  }
}

mouseClicked()

After all the elements in this project all settled, I created the interactive part by using mouseClicked().

I identified the original background color as white in the global variable let gray = 255 (to symbolize the night with artificial light) and then in the mouseClicked() function I gradually decrease the light by gray -= 20, so that the background of the canvas will be turning darker gradually as the user click their mouse on the canvas.

Reflection

Overall, the coding process was smooth. I was a little bit stuck at the initial stage of generating the art graphic of the star. In the beginning, I was using direct numbers in the vertex() function and the graphic looks crappy and hard to be manipulated. So I searched online for a more mathematical way to depict the star and successfully generate the congruent star at last. The interactive might be a little bit confusing if the user has little knowledge of the intention, so maybe next time I will be adding some guidance into the project and make it more well-rounded as a whole.

Leave a Reply Cancel reply