DESCRIPTION:

Music is a big part of my daily life. Especially during the pandemic, music connects with my emotion a lot more than usual. For this project, I recorded everytime I listen to music; the mood I felt from the song; and while as how many times I listened to that song during that day.Through the data portrait, I could get a "playlist" that visualize the connection between the music and my emotion.

*/

​

/*

DAY1.LOW: 14 times,

DAY1.NEUTRAL: 14 times,

DAY1.HIGH: 8 times;

​

DAY2.LOW: 9 times,

DAY2.NEUTRAL: 9 times,

DAY2.HIGH: 4 times;

​

DAY3.LOW: 8 times,

DAY3.NEUTRAL: 19 times,

DAY3.HIGH: 2 times;

*/

​

​

let myPlaylist;

let myFont = 'Syne Mono';

let x = 300;

let y = 300;

let r = 0;

let speed = 1;

let ts = 15;

let opac = 255;

let day1low;

let day1neutral;

let day1high;

​

​

function preload() {

  myPlaylist = loadJSON('data.json');

}

​

function setup() {

  createCanvas(600, 600);

​

  // push();

  // textSize(random(50, 100));

  // text('🎵', width / 2, height / 2);

  // pop();

​

  setTimeout(final, 0);

  setTimeout(firstDay, 5000);

  setTimeout(secondDay, 10000);

  setTimeout(thirdDay, 15000);

  setInterval(final, 20000);

​

  textFont(myFont);

  textAlign(CENTER, CENTER);

}

​

function draw() {

  angleMode(DEGREES);

  // translate(x, y);

  opac = random(155, 250);

}

​

​

function firstDay() {

  background(30);

  textSize(ts);

  noStroke();

​

  // let x1 = random(width);

  // let y1 = random(height);

  // let x2 = random(width);

  // let y2 = random(height);

  // let x3 = random(width);

  // let y3 = random(height);

push();

  for (let i = 0; i < myPlaylist.DAY1.LOW.length; i++) {

    fill(51, random(59, 191), 204, opac);

    text(myPlaylist.DAY1.LOW[i], random(width), random(height));

    ellipse(random(width), random(height), random(20, 70));

  }

​

  for (let i = 0; i < myPlaylist.DAY1.NEUTRAL.length; i++) {

    fill(random(230, 232), random(228, 232), random(209, 227), opac);

    text(myPlaylist.DAY1.NEUTRAL[i], random(width), random(height));

    ellipse(random(width), random(height), random(20, 70));

  }

​

  for (let i = 0; i < myPlaylist.DAY1.HIGH.length; i++) {

    fill(168, random(2, 75), 2, opac);

    text(myPlaylist.DAY1.NEUTRAL[i], random(width), random(height));

    ellipse(random(width), random(height), random(10, 20));

  }

  pop();

}

​

​

// function firstDay2() {

​

// }

​

​

function secondDay() {

  background(30);

  textSize(ts);

  rectMode(CENTER);

​

  for (let i = 0; i < myPlaylist.DAY2.LOW.length; i++) {

    fill(51, random(59, 191), 204, opac);

    text(myPlaylist.DAY2.LOW[i], random(width), random(height));

    rect(random(width), random(height), 90, random(10, 15));

  }

​

  for (let i = 0; i < myPlaylist.DAY2.NEUTRAL.length; i++) {

    fill(random(230, 232), random(228, 232), random(209, 227), opac);

    text(myPlaylist.DAY2.NEUTRAL[i], random(width), random(height));

    rect(random(width), random(height), 90, random(10, 15));

  }

​

  for (let i = 0; i < myPlaylist.DAY2.HIGH.length; i++) {

    fill(168, random(2, 75), 2, opac);

    text(myPlaylist.DAY2.NEUTRAL[i], random(width), random(height));

    rect(random(width), random(height), 40, random(10, 15));

  }

​

  // setTimeout(secondDay2, 3000);

}

​

​

// function secondDay2() {

//   background(30);

//   fill(255);

//   rect(0, 0, 200, 200);

// }

​

​

function thirdDay() {

  background(30);

  textSize(ts);

  rectMode(CENTER);

​

  for (let i = 0; i < myPlaylist.DAY3.LOW.length; i++) {

    fill(51, random(59, 191), 204, opac);

    text(myPlaylist.DAY3.LOW[i], random(width), random(height));

    rect(random(width), random(height), random(10, 40));

  }

​

  for (let i = 0; i < myPlaylist.DAY3.NEUTRAL.length; i++) {

    fill(random(230, 232), random(228, 232), random(209, 227), opac);

    text(myPlaylist.DAY3.NEUTRAL[i], random(width), random(height));

    rect(random(width), random(height), random(20, 60));

  }

​

  for (let i = 0; i < myPlaylist.DAY3.HIGH.length; i++) {

    fill(168, random(2, 75), 2, opac);

    text(myPlaylist.DAY3.NEUTRAL[i], random(width), random(height));

    rect(random(width), random(height), random(5, 20));

  }

}

​

// function thirdDay2() {

​

// }

​

​

function final() {

  background(30);

​

  noStroke();

  fill(51, random(59, 191), 204, opac);

  ellipse(random(100, 500), random(100, 500), random(140));

​

  fill(168, random(2, 75), 2, opac);

  rect(random(100, 500), random(100, 500), random(90), random(10, 15));

​

  fill(random(230, 232), random(228, 232), random(209, 227), opac);

  rect(random(100, 500), random(100, 500), random(190));

}