Overview

For this week’s assignment, I used p5.js to create a drawing of a series of shuriken(a Japanese weapon) vortex. First, I used beginShape(), curveVertex(), and endShape() to design the shuriken. Then I created a class called “object” to represent the shuriken. I put the x,y position of the shuriken in the constructor(), and wrote functions like move(), bounce(), display() to let the shuriken bouncing within the canvas. Then I wrote translate(), scale() and rotate() functions to allow theshuriken to appear to be rotating. Finally, I created a list a wrote a for loop so that there are more shuriken appearing in the canvas. I also changed the (x,y) in the translate() function into (mouseX,mouseY) so that the users are able to draw vortex with their mouse on their own. The code of this project can be found Here.

（Japenese Shuriken)

Porject Presentation:

Technical Problem

My initial idea is to let all of the shuriken moving, bouncing within the canvas, and rotating itself around its center, and the number of it can be determined by the users’ input. But then I found that the center of the shuriken is not as easy to be found as I thought and there always seems to be errors that make it rotate around another point that is not its center and makes the whole image looks weird. Thus, I finally decided to make it rotate around mouseX and mouseY so that the user can be in charge of the whole painting and make drawings on their own.

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. 

This assignment is to create a project that involves object-oriented programming with some interactivity. Inspired by Samantha’s project last week of dandelion, I aimed to develop a project of dandelion the leaves of which will be blown to all directions after the mouse is clicked.

Continue reading “MLNI-Generative Art w/ OOP(Wei Wang)”

FireWorks

This week I developed a simulation of colorful fireworks using p5, in an object-oriented way.

Classes 

I used two classes to implement this effect, Spark and SparkManager .

The previous one is the particle itself and the latter one is the manager of particles.

Spark

In fact, they are circles filling with different colors.

The particle has properties position, velocity, size and color. The color is totally random. In order to produce the effect of explosion, sparks close to the center are larger than sparks with higher initial velocity.

As time goes by, sparks will fall more and more quickly and at the same time, they will become smaller and smaller. Finally all sparks will disappear.

SparkManager

Basically, this class is an array of sparks and some methods to manipulate the array. In practice, this class has only one instance.

Every frame, it will update all sparks and remove sparks that are not visible. Finally it will draw all sparks. Sparks are stored in an array.

Main Process

The main process is quite straightforward. This assignment is simple, however, object-oriented-programming is what we will keep using. OOP is a powerful way to program, especially program relating to visual effects.