Assignment 4 – The Emotion Tree

To make this assignment, I browse the Kaggle for a while to find any suitable data table that can be used for my assignment. I came across a table about emotion of the twitter quotes. The table consists of 6 emotions: sadness, joy, love, angry, fear, surprise.

Since the data has different emotions, I am inspired by the movie Inside Out and assign each emotion with a color. In particular, sadness is blue, joy is yellow, love is pink, angry is red, fear is purple and surprise is green. These colors will be displayed as options for the users to choose what type of quotes they want to read.

Since the initial file consists of different mix of emotions, I organize the file and make it into 5 different files for different emotions. Then I load the emotion tables into the sketch file and continuously display a random text from the file after the MousePressed event. Below is the example code for the first 2 emotions:

function mousePressed() {
  //sadness
  if (dist(mouseX, mouseY, 30, 30) < 50) {
    let stringList = sadness.getColumn('text');
    string = stringList[int(random(stringList.length-1))];
    push();
    translate(width / 2, height);
    background('black');
    fill("white");
    branch(70, 0);
    pop();
  } 
  //joy
  else if (dist(mouseX, mouseY, 30, 100) < 50) {
    let stringList = joy.getColumn('text');
    string = stringList[int(random(stringList.length-1))];
    push();
    translate(width / 2, height);
    background('black');
    fill("white");

    branch(70, 1);
    pop();
  }

Furthermore, the colors of the emotions will also be presented as the color of the leaves on the tree. I initially want the leaves on the tree to be responsive to display text after clicking on them. However, it is incredibly difficult because of recursively called translation function. As a result, I can not figure out the position of the leaves to add interactions. I believe that this is not the best way to do for this approach. However, I modify the idea so that the users can still choose the emotions using the circle at the top of the page.

Reflection:

As I said before, I want to add interaction to the leaves of the tree. I added the class for the leaves (Leaf class), but I was successfully implemented that. Furthermore, I wanted to add animation such as leaves falling and changing of night and day.

My sketch:
Reference:

Recursive Tree