Week 4 – Love Yourself :)

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.