Overview:

For this assignment, I tried to utilize the typography concepts learned in class in combination with WebGL (Web Graphics Library), to create an interactive generative text.

Concept:

I’m really into typography and generative text art, so I particularly enjoyed working on this assignment. I was surfing though Pinterest for inspiration, and was inspired by the works below. Unable to choose between those two works, I decided to combine them.

The concept of this work is self-love and simplicity. I like setting these kind of photos as my phone wallpaper as a reminder to not compare my journey with other’s journey, because it’s hard to forget it or ignore it when it’s right in front of my nose 🙂 Therefore,  I decided to create my own wallpaper using the code.

Since the concept is “self-love”, I relied on the colors associated with love, such as red, white and black (as they’re basic colors). I also played around with the opacity of the text, and created a fade-away effect for the text as it progresses down the row.

Code:

The major highlights of my code are the sine-wave text and heart made of the word “love”. First, I created a sine-wave by using by displaying the string character by character and using sin() function to make y-value dependent on the x-value of the text.

To draw the heart, I used the mathematical formula based on the polar coordinates which is described in this video. However, I adapted the formula used there to my code so that instead of the vertices, my shape will consist of  the words “love”. I used beginShape() and endShape() to connect the words together to form a heart shape, and I used push() and pop() to limit the rotation only to the heart. To make the rotation effect, I utilized the rotateY() function of the WEBGL library, which allows us to rotate the shape around the y-axis.

I also tried to integrate some interactivity to this work: the user would be able to change the “mode” of the artwork from bright to dark by pressing the mouse (when the mode changes, the main text also changes). Also, the user can control the rotation by stopping or continuing it through the key “s”.

Here are the parts of the code I referenced:

//draw the heart
  let letter= "love";
  textSize(sizeHeart);
  
  //create a shape to be able to rotate it later
  beginShape();
  //use push and pop to apply the rotation only to the heart shape
  push();
  
  if(toStop==false){
    //rotate the heart around the y-axis
      rotateY(millis() / 1000);
  }

  
  //opacity of the heart is modifiable
  fill(210, 4, 45,heartOpacity);
   stroke(0);
  
  //if we set a to be 0.01, we will get a heart with densely located letters 
  for(let a=0; a<TWO_PI; a+=0.05){
    let r=10;
    let x= r*16*pow(sin(a),3);
    let y=-r*(13*cos(a) - 5*cos(2*a) - 2*cos(3*a) - cos(4*a))
    text(letter,x,y);
  }
  pop();
  endShape();

//draw the text
  let textLength = msg1.length;
  let tWidth = textWidth(msg1);
  noStroke();
  textSize(sizeMsg);
  
  //plce the text in the center
  let textStart_x = 0 - (tWidth / 2) + 20;
  
   //make the characters of the string follow a sine wave pattern
  for(j=0; j<5; j++){
    
    //since we have 5 rows of the same text, each of the rows will start at different y locations
    let textStart_y = -20 + j*20;
    
    for(i=0; i<textLength; i++){
      
      //change the text and its opacity when the mouse is pressed
      if(mouseIsPressed){
        fill(255,255,255,80*(j+1));
        msg1="trust yourself trust yourself trust yourself trust yourself trust yourself";
      }
      else{
        fill(0,0,0, 30*(j+1));
        msg1="love yourself love yourself love yourself love yourself love";
      }
      
      //print the text by printing characters one by one
      text(msg1[i],textStart_x+i*10, textStart_y+10*sin((textStart_x+i*10)/30));
    }
  }

Reflection and future Improvements:

Overall, I really enjoyed working on this assignment (I enjoyed it as much as making my self-portrait, haha) and I’m content with how my work turned out as well. One of the suggestions for further improvement would be using more heart shapes of different size and making them rotate in different pace and direction to emulate the heart-shaped medallion. Also, playing around with the color of the text and applying different colors to different rows or characters is also one suggestion.

Concept:

Upon looking at a bunch of open source data sets, I found a data set for Exoplanets that have been documented outside our solar system by NASA: https://www.kaggle.com/datasets/adityamishraml/nasaexoplanets

I thought this would be pretty cool to implement as a form of data visualization as I don’t think I’ve seen any examples of data visualization for astronomy or space hence, I decided to implement this into my assignment.

Process and Planning:

For visualizing the exoplanets, I didn’t want to simply draw an ellipse as I thought it wouldn’t look that great and it would be too simple. Hence, I found some nice planet art online and used some of them to visualize some of the exoplanets:

I used a few of these planets and put them into some img variables and then put them all into an array of planet designs so that I could access any design I wanted from this array anytime I wanted. I also loaded the entire exoplanets.csv dataset into an array called exoplanet_data which I would plan to use later in my code.

function preload() {
  exoplanet_data = loadStrings("exoplanets.csv");

  planet1_img = loadImage("Planet1.png");
  append(planet_designs, planet1_img);
  
  planet2_img = loadImage("Planet2.png");
  append(planet_designs, planet2_img);
  
  planet3_img = loadImage("Planet3.png");
  append(planet_designs, planet3_img);
  
  planet4_img = loadImage("Planet4.png");   
  append(planet_designs, planet4_img);
  
  planet5_img = loadImage("Planet5.png");
  append(planet_designs, planet5_img);
}

I knew that I would have to create a class in which each exoplanet would be its own object, hence I made one here:

class ExoPlanet {
  constructor() {
    this.x;                  //X coordinate for the planet                    
    this.y;                  //Y coordinate for the planet 
    this.planet_radius;      //Radius of the planet image
    this.design_num;         //Type of planet design from planet_designs
    this.data;               //String data of the planet
    this.data_split;         //Splits the data into an array of its data
    
    this.init();
    this.printData();
  }
  
  //This function initializes all the variables for each exoplanet.
  init() {
    this.design_num = int(random(5));
    this.planet_radius = planet_designs[this.design_num].width/10;
    
    this.x = mouseX;
    this.y = mouseY;
    
    this.data = exoplanet_data[data_count];
    this.data_split = split(this.data, ',');
    if(data_count != exoplanet_data.length) {
      data_count++;
    }
    else {
      print("All planets printed!");
    }
  }
  
  //This function takes a random planet image and draws it at a random (x,y) coordinate on the canvas
  draw() {
    image(planet_designs[this.design_num], this.x, this.y, planet_designs[this.design_num].width/5, planet_designs[this.design_num].height/5);   
  }
  
  displayData() {
    fill(255, 255, 180);
    rect(mouseX, mouseY, 500, 120);
    
    textAlign(LEFT);
    fill("black");
    
    text("Planet Name:", mouseX+10, mouseY+30);
    text("Distance from Earth (ly):", mouseX+10, mouseY+55);
    text("Stellar Magnitude (brightness):", mouseX+10, mouseY+80);
    text("Planet Type:", mouseX+10, mouseY+105);
    
    fill("red");
    text(this.data_split[0], mouseX+140, mouseY+30);
    text(this.data_split[1], mouseX+235, mouseY+55);
    text(this.data_split[2], mouseX+290, mouseY+80);
    text(this.data_split[3], mouseX+125, mouseY+105);
  }
  
  //This function is for debugging and code checking to ensure everything runs smoothly.
  printData() {    
    print("Planet Image:",this.design_num);
    print("Planet Radius:",this.planet_radius);
    print("Planet Data:",this.data);
    
    print("Planet Name:",this.data_split[0]);
    print("Distance (from Earth):",this.data_split[1]);
    print("Stellar Magnitude:",this.data_split[2]);
    print("Planet Type:",this.data_split[4]);
  }
}

In this class, each planet has:

• An (X, Y) coordinate of the planet on the canvas (this would be where the user’s mouse is when they click)
• The radius of the planet (so when the user moves close to the planet, its data pops up)
• Design number: This indicates any one of the planet images shown perviously.
• Data: This entails the particular planet data from the csv file for that planet.
• Data_Split: This variable would be an array of each component of the data of the planet, hence, it would be easier to print out its data.

I had an initialize function, init(), to initialize it with some variables. I had another function which would draw the planet onto the canvas using the image(). Finally, I had a displayData() function which would print out a rectangle containing some of the vital information of the exoplanet’s data.

How does the data pop up?

//Here we continuously draw the planets on the canvas
for(let j=0; j<exoplanets.length; j++) {
  exoplanets[j].draw();
  planet_dist = dist(exoplanets[j].x, exoplanets[j].y, mouseX, mouseY);
  
  //If the mouse coordinates hit's the planet, it will print the data of that planet.
  if(planet_dist < exoplanets[j].planet_radius) {
    exoplanets[j].displayData();
  }
}

Essentially, in the draw() function, it will continuously print the exoplanet using the draw function from the class. It calculates the planet_dist between the planets coordinates and the user’s mouse. If the user’s mouse touches the planet, then it will call the displayData() function.

I added it such that the user can add a planet onto the canvas by simply clicking their mouse as well.

Final Piece:

Overall Thoughts:

Overall, I’m pretty happy with the interactivity and design with my assignment. Perhaps, for improvements I could have included more planet shapes, and maybe even added some cool sound effects to enhance the experience a little more. More improvements, I could have also made sure that if the planet size was bigger, the planet drawn could also be bigger and vice versa. This way the data visualization is even stronger.

Midterm Project Ideas:

For my midterm, I wanted to develop a game since I really love games and would love to get into game development. Some of the ideas that initially sparked in my head was perhaps something like “Battleship” or maybe something like a parody of “Subway Surfers” where the user can continuously run and get the highest score or something like that. For now these are the ideas I thought of initially but I’d love to come up with a cool unique game of my own.

Inspiration:

I had a particularly challenging time with this assignment because I struggled to determine what to make for this topic. Despite scouring the internet for inspiration, I found examples that were either beyond my coding abilities or too basic. I tried multiple projects but was not satisfied because they weren’t creative enough. However, my fortunes changed when I received a Snapchat memory today, reminding me of a quote a friend wrote on my dorm’s whiteboard exactly one year ago. This quote has always been a source of inspiration for me to stay focused on my work and avoid procrastination, and it remains one of my favorite quotes. The Snapchat memory was:

I needed to come up with a unique way to showcase this text, which is when my roommate’s suggestion came in handy. While discussing ways to decorate our room, my roommate proposed the idea of using neon lights. The moment he mentioned this, I realized that adding a neon light effect to the quote could work.

Coding Process:

To begin with, I searched online for neon signs that can be used as room décor and was drawn to those with a cursive font. Hence, I opted for a cursive font and explored multiple websites until I found the “Havelberg” font. Following this, I researched how to add and implement this font using p5js. Once I gained this knowledge, I created a preliminary layout of the project, outlining where everything should be placed. The final skeleton looked somewhat like this:

Initially, I encountered challenges in making the project appear more visually appealing and imaginative. To tackle this, I got the idea of incorporating electricity that would flow through the wires and illuminate the sign upon pressing the “on” button. However, as I progressed, I realized that the end result was not as aesthetically pleasing as I had hoped. As a solution, I decided to remove the grey background and start with a blank canvas of darkness. The code for the electricity flowing looked like this:

if (on_button == true) {
    if (!sound.isPlaying()) {
      sound.play(); //the electric static voice
    }
    fill("gold"); //for the wires
    noStroke();
    //since upspeed is in negative values that is why we subtract
    if (height + upspeed > uplimit) {
      upspeed = upspeed + vertical_speed;
      rect(360, 400, wire_width, upspeed); //the first part of the wire and looks like electricity is travelling up
    } else {
      rect(360, 400, wire_width, upspeed); //when it has reached its limit, then it stops and stays there
      if (width + leftspeed > leftlimit) {
        //as soon as the wire part 1 has reached its designated limit, now we start moving to the left
        leftspeed = leftspeed + horizontal_speed; //horizontal speed is the same as upspeed so that it looks uniform
        rect(360, uplimit, leftspeed, wire_width); //leftspeed keeps updating so it looks like it is moving to the left
      } else {
        rect(360, uplimit, leftspeed, wire_width); //same as above
        if (height + upspeed2 > uplimit2) {
          upspeed2 = upspeed2 + vertical_speed; //upspeed2 is different from upspeed since the starting and ending points are different
          rect(360 + leftspeed, uplimit, wire_width, upspeed2);
        } else {
          rect(360 + leftspeed, uplimit, wire_width, upspeed2);
          stroke(57, 255, 20);
          strokeWeight(4);
          noFill(); //make rectangle after the last wire reaches the rectangle
          rect(25, 25, 350, 175, 20); //rectangle but with curved edges
          strokeWeight(1);
          fill(57, 255, 20, sin(frameCount * 0.1) * 255); //fills the text and adds a flicker effect to it
          text("you didnt come this far", 45, 95);
          text("just to come this far", 70, 145);
        }
      }
    }
  }

After adding the button, audio, and the mouseClicked() feature, the final product looked like this:

Reflection: