Concept:

For the first time, I had a fixed idea from the beginning of what I wanted to do for this assignment. I wanted to replicate a computer circuit and signals going through and simulate the signals as blood cells going through the veins. I wanted to have a canvas full of randomly generated veins going everywhere and then have each blood cells precisely follow that vein for each veins.

Making Process:

Initially, I created a class of veins and tried to test out printing a single instance of a vein. I needed a function that would create several lines that would consistently build on top of each other to create a single vein going across the canvas. I decided to create an array attribute that stored multiple line parameters(x1,y1,x2,y2) that would add up to create a vein. Each line segment would have a random color between red, green, and blue.

constructor(){
  this.paramArray = [];
  this.initPos = int(random(0,400));
  this.posVar = 0;

...

  let counter = 0;
  if(counter % 2 == 0){
    //storing of initial x value before adding changes and then adding changes
    let tempPosVar = this.posVar;
    this.posVar += (int(random(1,5)) * 10);
    color = this.colorRange[int(random(0,3))];
    this.paramArray.push([tempPosVar, this.initPos, this.posVar, this.initPos, color]);
  }
    else{
      let tempInitPos = this.initPos;
      this.initPos += (int(random(-4,4)) * 10);
      //in case random initPos is 0, to prevent incosistent vein
      if (this.initPos == tempInitPos)
        this.initPos -= 10;
      //push the 5 parameters in the array
      this.paramArray.push([this.posVar, tempInitPos, this.posVar, this.initPos,     color]);
  }
  counter++;
...

 

After I achieved this, I then proceeded to create an entire circuit of 300 sets of veins going from left to right and top to bottom

Then I worked on the blood class for the cells to follow its assigned vein. This part, I am particularly proud of since planning ahead helped me a lot. Since I knew there was going to be instances of two separate classes, I specifically created the attribute of the coordinates for each lines in a vein stored in an array so that I could pass it on to the blood cell instance. Therefore, in the blood class’s display function I can easily pass on the cell’s coordinates based on the lines’ coordinates.

if(this.lineNum < this.veinRoute.length){
        
  //the actual printing of the cell 
  strokeWeight(0);
  fill(60, 100, 100);
  circle(this.x, this.y, 4);
        
  //The cell movement mechanism: the cell position variable will move towards the end of the current line it is on the vein
        
  //For x position
  if(this.x != this.veinRoute[this.lineNum][2]){
    if(this.x < this.veinRoute[this.lineNum][2])
      this.x++;
    if(this.x > this.veinRoute[this.lineNum][2])
      this.x--;
    }
        
  //For y position
  else if(this.y != this.veinRoute[this.lineNum][3]){
    if(this.y < this.veinRoute[this.lineNum][3])
      this.y++;
    if(this.y > this.veinRoute[this.lineNum][3])
      this.y--;
    }
        
      //If the cell is on the end of the line, move on to the next line of the vein
  else
    this.lineNum++;
  }
      
//If the cell had reached the end of the vein, reset to the beginning of the vein
else{
  this.x = this.veinRoute[0][0];
  this.y = this.veinRoute[0][1];
  this.lineNum = 0;
}

Now that my setup for the whole project has finished, I created an array of vein and blood cell instances. Then I changed the coloring a little to make it aesthetically appealing. Instead of the normal RGB that I am used to, I decided to implement the HSB color mode to differentiate the cell and the veins brightness. This is the following result:

I also added another set of cells going backwards on the veins to populate the circuit a little more.

Challenge:

My challenge at this point was that the cells were all initialized at the same moment, which initially creates a recognizable pattern which is a phenomenon that I didn’t like. The reason why this happens is because I initialize and draw the veins and blood cells at the same time

for(let i = 0; i < 300; i++){
  groupOfVeins.push(new veins(i));
}
  
for(let j = 0; j < 300; j++){
  //do the setup for the veins and create the blood cells based on it
  groupOfVeins[j].create();
  groupOfBloodFor.push(new blood(groupOfVeins[j].paramArray, true));
  groupOfBloodBack.push(new blood(groupOfVeins[j].paramArray, false));
}

...

for(let j = 0; j < 300; j++){
  groupOfVeins[j].display();
  groupOfBloodFor[j].display();
  groupOfBloodBack[j].display();
}

At this point, I consulted with Professor Ang and he gave me the advise of a) create and print each vein and cell one by one, b) try to involve less fixed numbers and create a pattern that can be randomized each run therefore creating a new result for each run. So I worked with the first task and successfully made a function that initialize the veins one by one instead of doing the whole thing at once using an array. I also slowed this process using the frameCount variable to show what exactly is going on.

Then I applied changed for suggestion B where I set colors for horizontal veins as red and vertical veins for blue. I also set a random parameter that changed the range of the veins each run which somewhat makes a new pattern each time it runs

if(frameCount % 75 == 0){
  if(counter < maximumNumber){
    initialize();
  }
  else{
    counter = -1;
    resetCanvas();
  }
  counter++
}

...

function initialize(){
  groupOfVeins.push(new veins(counter));  
  groupOfVeins[counter].create();
  groupOfBloodFor.push(new blood(groupOfVeins[counter].paramArray, true));
  groupOfBloodBack.push(new blood(groupOfVeins[counter].paramArray, false));
}

 

Finally I made a version where the color of the veins would be black so only the cells would be seen which makes it look like a swarm of fireflies dancing in the dark

Reflection:

Overall through this project, I was able to learn new things about OOP using p5js especially regarding using attributes and passing them. At first I was somewhat annoyed that each time I had to use the attribute I had to put “this.” in front of the attribute name to use it which caught me aback the first hour but later on I was so glad that p5js was very lenient with passing attributes of one instance for another of different class. I also learned how to use the HSB color scheme which added the sprinkle on top of my project’s aesthetics.

This was also an assignment where I liked each variation of my work since each variation kept its uniqueness which all looked cool to me in different ways. This ended up making my documentation super long but in the end I thought it was a good thing for me try different things on this project.

Concept & Inspiration:

This code creates a graphical representation of a moon with an orbit. The code defines a class called “Moon” that creates an instance of a moon with given x, y coordinates, width, and height. The class has a method called “draw” which draws the moon on the canvas. The code also defines a class called “Square” which creates a square with given x, y coordinates, size and color. This class also has a method called “draw” which draws the square on the canvas.The code uses an array “squares” to store instances of the square class and uses a loop to draw multiple squares in an orbit around the moon. The squares are positioned using the cosine and sine functions to make them move in a circular motion.The code also allows for the creation of stars by making an array “stars” and using a loop to draw 50 small circles on the canvas. The stars can be displayed by clicking on the canvas.The function “setup” initializes the canvas, sets the frame rate and creates the instances of the moon and squares.The function “draw” displays the moon and squares on the canvas. The function “mouseClicked” changes the display of stars when the mouse is clicked on the canvas.

This code captures the essence of a celestial body inspired by the rings of Saturn. The inspiration for this code came from an image of the moon surrounded by clouds, which gave the illusion of it having its own set of rings. With a creative and imaginative approach, the goal was to bring to life a moon with an animated orbit. The picture of the image is shown below.

Code:

let star = false; // when there are no stars
let stars = []; //making an array for storing stars
class moon{ // class for making a moon
  constructor(xm, ym, wm, hm,cm) {
    this.xm = xm; // x coordinate of moon
    this.ym = ym; // y coordinate of moon
    this.wm = wm; // width of moon
    this.hm = hm; //height of moon
  }
  
  draw() {
    // drawing the moon itself with craters 
    fill("lightgrey");
    ellipse(this.xm, this.ym, this.wm, this.hm);
    noStroke();
    fill("#adadad");
    ellipse(this.xm + 20, this.ym-10, this.wm/5, this.hm/4);
    ellipse(this.xm -15, this.ym+10, this.wm/5, this.hm/4);
    ellipse(this.xm -10 , this.ym-20, this.wm/5, this.hm/5);
    ellipse(this.xm +15 , this.ym+12, this.wm/5, this.hm/5);
  }

}
class Square { // making a class for squares for the orbit 
  constructor(x, y, size, colors) {
    this.x = x; // x coordinate 
    this.y = y; // y coordinate 
    this.size = size; // size of squares
    this.colors = colors; //color of square
  }

  draw() { //drawing a square 
    strokeWeight(1);
    fill(this.colors);
    rect(this.x, this.y, this.size, this.size);
  }
}

let squares = []; //array of squares to store them 
let angle = 0;
let angleStep = 5;
let radius = 1;
let xoffset = 0;
let yoffset = 0;


let moon_obj = new moon(200,200,75,75,100,200); //making a moon with the help of a moon class


function setup() {
  createCanvas(400, 400);
  frameRate(50);
  //making the orbit with squares which are very tiny and using sin and cos functions to make them move in a particular motion
  for (let i = 0; i < 1000; i++) {
    let x = width/2 + radius * cos(angle);
    let y = height/2 + radius * sin(angle);
    let size = 2;
    let colors = (random(200), random(200), random(255));
    squares.push(new Square(x, y, size, colors));
    
    angle += angleStep;
    radius += 0.01;
    
  }

  // to make stars which appear upon clicking on the canvas
  for (let i = 0; i < 50; i++) {
    stars[i] = {
      x: random(0, width),
      y: random(0, height)
    };
  }
}

function draw() { // displaying my creative idea of a moon with an orbit 
  if(star==false)
  {
     background(0);
  
  for (let i = 0; i < squares.length; i++) {
    squares[i].x = squares[i].x + xoffset + sin( frameCount*0.01+i*0.1);
    squares[i].y = squares[i].y + yoffset + cos(frameCount * 0.05 + i * 0.1);
    squares[i].draw();
  }
   moon_obj.draw();
  }
  
  
  else // if clicked displaying moon as imagined by many
  {
     background(0);
  moon_obj.draw();
fill("white");
  for (let i = 0; i < 50; i++) {
    ellipse(stars[i].x, stars[i].y, 1, 1);
  }
  }
 
 
}


function mouseClicked() {
  
  if(star==false)
  {
    star =true;
  }
  else
    star =false;
}

Reflection / Future Improvements:

The project was really fun to work on as I learned how to deal with classes and arrays. Making the entire thing function was hard and took a lot of time to understand the concept better. The code creates a beautiful representation of a moon with rings similar to that of Saturn. The code uses classes for the moon and the rings to make it organized and reusable. The rings are created using a series of small squares that are animated in an orbital pattern around the moon. The use of sin and cos functions adds a touch of realism to the motion of the rings. Additionally, the user can toggle between a starry night sky or a moon with rings with a single mouse click.

However, there are a few areas for improvement in this code. First, the color scheme of the moon and the rings could be made more dynamic by using random colors or a gradient effect. Second, the stars in the starry night sky could be made better to make it look more realistic. Lastly, the motion of the rings could be made more dynamic by adding an acceleration or deceleration effect. These improvements would enhance the overall look and feel of the code and make it even more visually appealing.

Inspiration & Thought Process:

During the class discussion facilitated by Saamia and Yerk, we discussed various emotions and how they can be depicted through art. As they displayed the brush strokes on the canvas, I could sense the chaos and anger that the artist was attempting to express. In class, I argued that digital art could not accurately represent emotions, and thus I disregarded the idea of attempting to recreate a similar artwork. However, while looking for inspirations on the internet I came across this picture:

As soon as I encountered this task, the entire classroom discussion came to mind and I realized I had to challenge myself to determine if digital art could effectively convey emotions just as traditional art can. The challenge then became choosing which emotions to depict. After careful consideration, I chose to depict chaos and sadness, as these emotions best reflected my state of mind over the past four days. The chaos in my project symbolizes the numerous assignments and tight deadlines I was facing, which contributed to a sense of being overwhelmed. Meanwhile, the sadness in my project represents my feelings of homesickness and illness, both of which were constantly present in my thoughts. I wanted to bring these emotions to life in my project, to provide a visual representation of my innermost thoughts and feelings.

Work Process and Code:

To begin, I had to brush up on the basics of Object Oriented Programming and familiarize myself with the syntax differences in p5js compared to other languages. It took me almost two days to figure out the best way to depict my emotions. I conducted various experiments, trying out both emotions separately in different p5js files and adjusting different elements to see what worked best. For the chaos aspect, I created a “Circle” class that took in the x and y coordinates, as well as the diameter, of the circles as parameters. This class also had a display() function that filled the circles with random colors with each iteration of the draw() loop, and then created a circle at the specified location with varying diameters. The update() function in the Circle class updated the x and y coordinates of the circles randomly, based on a specified speed, to display chaotic behavior. In the setup() function, a for loop was used to append a large number of Circle class objects (150 in this case) to an array passing random x coordinates, y coordinates and diameters. The code for the Circle class looked like this:

class Circle //circle class
{
  constructor(x, y, diameter) //pass three parameters to the constructor
  {
    //update the variables that define size and position
    this.x_cord = x;
    this.y_cord = y;
    this.diameter = diameter;
    this.speed = 10;
  }

  display() 
  {
    noStroke();
    fill(random(255), random(255), random(255)); //random colored circles e  every iteration of the draw loop
    ellipse(this.x_cord, this.y_cord, this.diameter, this.diameter); //circles
  }

  update() 
  {
    //update the x and the y value randomly between speed value left and right (or up and down)
    this.x_cord += random(-this.speed, this.speed);
    this.y_cord += random(-this.speed, this.speed);
  }
}

The task of depicting the second emotion proved to be more challenging than the chaos emotion. Initially, the representation of rain appeared flat and the background lacked a gloomy atmosphere. After several hours of research and watching YouTube videos, I discovered the “map()” function, which allowed me to effectively depict the rain droplets as I desired. The process of using Object-Oriented Programming was similar to that of the Circle class. Another array was used to store objects of the “Drop” class. The constructor of the Drop class ensured that each drop had a random x value within the canvas, while the y value of the raindrops was randomly placed above the canvas to create the illusion of actual rain. The “z_coordinate” variable influenced the depth, size, and speed of each raindrop. If the drop was closer to the screen, it appeared thicker, longer, and faster compared to drops that were farther away from the screen. The Drop class looks like this:

class Drop 
{
  constructor() 
  {
    this.x_cord = random(width);
    this.y_cord = random(-500, -50); //this will start at various different locations above the canvas
    this.z_cord = random(0, 20); //this is to add depth effect to the rain
    this.len = map(this.z_cord, 0, 20, 10, 20); //length of the drop will be corresponding to the depth of the drop
    this.yspeed = map(this.z_cord, 0, 20, 1, 20); //the depth will also influence the speed of the drop
  }

  fall() 
  {
    this.y_cord = this.y_cord + this.yspeed; //falling
    let grav = map(this.z_cord, 0, 20, 0, 0.2); //more depth will be less speed
    this.yspeed = this.yspeed + grav;

    if (this.y_cord > height) //when the drops go out of canvas
    {
      this.y_cord = random(-200, -100); //respawn them by changing their y coordinates to above frame
      this.yspeed = map(this.z_cord, 0, 20, 4, 10); //map their speed again depending on the depth
    }
  }

  display() 
  {
    let thick = map(this.z_cord, 0, 20, 1, 3); //thickness also depends on the depth of the rain drop. more depth means less thick drop
    strokeWeight(thick);
    stroke(200, 200, 0);
    line(this.x_cord, this.y_cord, this.x_cord, this.y_cord + this.len); //rain drops are basically lines of different lengths
  }
}

Finally, I combined both classes into one p5js file, included suitable royalty-free sounds, and implemented the feature where clicking anywhere on the canvas changes the song and the emotion. I struggled to create a gloomy background for the second emotion, so I searched the web for an image and set it as the background. To ensure all assets were loaded before the start of the drawing loop, I utilized the preload() function. The final result appears as follows:

CLICK IN THE CANVAS TO CHANGE EMOTION

Reflection:

My viewpoint on representing emotions through digital art underwent a significant transformation after completing this task. I feel like I was able to accomplish most of what I wanted to convey. I am particularly pleased with how the rain droplets turned out, as they required a lot of effort to create a convincing depth effect. I faced some challenges with the audio, where one sound would not stop when the other started playing, but it was eventually resolved. For future assignments, I hope to improve by creating my own original background, instead of using a pre-existing image. I also intended to include a joyful emotion, but I was unable to create a rotating sun with precisely angled triangle rays. Maybe with more practice, I would be able to do that as well. In the future, I plan to continue working on this project to add more emotions such as scared and surprised.

Concept 

Using object oriented programming, I was able to create a piece of art which resembles everyday pressure and stress. Each circle, gets a randomly assigned color from the blue end of the spectrum. This is to symbolize the blues everyone faces every once in a while. Additionally, I wanted to implement something which takes away this pressure and so I did.

Code 

This assignment was tricky to some extent as it was the first time I was facing OOP. However, by revising the class material and looking over online resources along with the p5js Reference, I was able to tackle it. I created a class for the circles and included four arguments in the constructor: x and y coordinates, radius and color.  Then using a for loop, I created a program which assigns a random value to these arguments. This was done by this following code:

// Create 100 circles with random positions, sizes, and colors
for (let i = 0; i < 100; i++) {
  let x = random(width);
  let y = random(height);
  let r = random(10, 15);
  let c = color(random(30), random(70), random(255));
  let circle = new Circle(x, y, r, c);
  circles.push(circle);
}

Additionally, as I wanted to add the option of clearing the canvas and resetting the animation, I wrote an if statement using some of the p5js built in functions. This allowed for the animation to be restarted just by pressing space bar. Following is the if statement I used:

function keyPressed() {
  if (key === "space") {
    circle.reset();
  } 
}

Finally, I was left with the final version of my artwork which can be seen below:

Reflection

For this assignment, I felt like I was not able to fully express my creative thought as I was not familiar with the technical aspect of OOP. However, I am glad I was able to finish it and I am eager to learn more about the implications of OOP in generative art.