p5.js Web Editor | 6 - Data Portrait

xxxxxxxxxx
let mediumFont;
let lightFont;
​
let value = 0;
​
function preload() {
  mediumFont = loadFont("Rubik-Medium.ttf");
  lightFont = loadFont("Rubik-Light.ttf");
}
​
let bandRect;
// An array of random values
​
function setup() {
  createCanvas(600, 600);
  rectMode(CENTER);
  angleMode(DEGREES);
  textAlign(LEFT, CENTER);
}
​
function draw() {
  let bgColor = map(mouseY, 0, height, 255, 0);
  background(bgColor);
​
  let textColor = map(mouseY, 0, height, 100, 255);
​
  let pulsColor = sin(millis() / 4) * 100;
  let pulsColor2 = sin(-millis() / 4) * 200;
​
  let transWord = map(mouseX, 0, 600, 0, -380);
  let transWord2 = map(mouseX, 0, 600, -380, 0);
​
  metalListen(pulsColor, 100, 0, transWord - 20, -100, textColor);
  hyperListen(20, pulsColor, 40, transWord2, -50, textColor);
  UKListen(0, pulsColor, pulsColor2, transWord2, 20, textColor);
  afroBeatListen(pulsColor2, 0, 0, transWord / 2, 0, textColor);
  sadListen(0, 0, 200, transWord, 10, textColor);
  compListen(0, 200, pulsColor2, transWord2 / 2, -100, textColor);
  wtvr(pulsColor, 40, 100, transWord2, -150, textColor);
  abbaEnyaEmmylou(255, pulsColor, 0, transWord - 20, 50, textColor);
​
  Times();
}
​
function Times() {
  let timeStamps = [
    "6 AM",
    "7 AM",
    "8 AM",
    "9 AM",
    "10 AM",
    "11 AM",
    "12 PM",
    "1 PM",
    "2 PM",
    "3 PM",
    "4 PM",
    "5 PM",
    "6 PM",
    "7 PM",
    "8 PM",
    "9 PM",
    "10 PM",
    "11 PM",
    "12 AM",
    "1 AM",
    "2 AM",
    "3 AM",
    "4 AM",
    "5 AM",
  ];
​
  fill(mouseY, mouseY, mouseY, value);
  for (let i = 0; i < 24; i++) {
    push();
    text(timeStamps[i], 5, 13 + 25 * i);
    pop();
  }
}
​
function metalListen(r, g, b, t, t2, y) {
  let metalTime = [125, 135, 145, 345, 355, 400, 450, 500];
  let metalBands = [
    "Judith Rules - I See Stars",
    "Can You Feel My Heart - Bring Me The Horizon",
    "Tidebringer - Shark Infested Daughters",
    "Fever Dreams - Circa Survive",
    "We Own The Night - Dance Gavin Dance",
    "Counting Worms - Knocked Loose",
    "King For A Day - Pierce The Veil",
    "Bulls in the Bronx - Pierce The Veil",
  ];
​
  let bandRect = rect;
​
  for (let i = 0; i < metalTime.length; i++) {
    push();
    noStroke();
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      fill(255, 255, 255, 50);
    } else {
      fill(r, g, b, 50);
    }
    bandRect(width / 2, metalTime[i], width, 10);
    pop();
  }
  //WhatamIlisteningto?
​
  for (let i = 0; i < metalTime.length; i++) {
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      push();
      translate(t, t2);
      rectMode(CORNER);
      fill(y);
      textSize(15);
      textFont(mediumFont);
      text(metalBands[i], 416, mouseY + 25, 180);
      pop();
    } else {
    }
  }
}
​
function hyperListen(r, g, b, t, t2, y) {
  let metalTime = [185, 285, 295, 305, 400, 420];
  let metalBands = [
    "Time - Arca",
    "Good Ones - Charli XCX",
    "Mine - Slayyyter",
    "xXXi_wud_nvrstøp_ÜXXx - 100 gecs",
    "Girl - Jamie xx",
    "Butterfly - Grimes",
  ];
​
  let bandRect = rect;
​
  for (let i = 0; i < metalTime.length; i++) {
    push();
    noStroke();
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      fill(255, 255, 255, 50);
    } else {
      fill(r, g, b, 50);
    }
    bandRect(width / 2, metalTime[i], width, 10);
    pop();
  }
  //WhatamIlisteningto?
​
  for (let i = 0; i < metalTime.length; i++) {
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      push();
      translate(t, t2);
      rectMode(CORNER);
      fill(y);
      textSize(15);
      textFont(mediumFont);
      text(metalBands[i], 416, mouseY + 25, 180);
      pop();
    } else {
    }
  }
}
//////////////////////////////////////////////////
​
function UKListen(r, g, b, t, t2, y) {
  ///chunez innit
  let metalTime = [120, 146, 180, 200];
  let metalBands = [
    "Vossi Bop - Stormzy",
    "Bet (ft. Skepta) - Octavian",
    "Body (Remix) - Tion Wayne",
    "So Sorry - Skream",
  ];
​
  let bandRect = rect;
​
  for (let i = 0; i < metalTime.length; i++) {
    push();
    noStroke();
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      fill(255, 255, 255, 50);
    } else {
      fill(r, g, b, 50);
    }
    bandRect(width / 2, metalTime[i], width, 10);
    pop();
  }
  //WhatamIlisteningto?
​
  for (let i = 0; i < metalTime.length; i++) {
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      push();
      translate(t, t2);
      rectMode(CORNER);
      fill(y);
      textSize(15);
      textFont(mediumFont);
      text(metalBands[i], 416, mouseY + 25, 180);
      pop();
    } else {
    }
  }
}
​
function afroBeatListen(r, g, b, t, t2, y) {
  ///chunez innit
  let metalTime = [387, 397, 407, 417];
  let metalBands = [
    "love nwantiti - CKay",
    "Sensima - Skiibii",
    "Omo - Burna Boy",
    "Oshey - Juls",
  ];
​
  let bandRect = rect;
​
  for (let i = 0; i < metalTime.length; i++) {
    push();
    noStroke();
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      fill(255, 255, 255, 50);
    } else {
      fill(r, g, b, 50);
    }
    bandRect(width / 2, metalTime[i], width, 10);
    pop();
  }
  //WhatamIlisteningto?
​
  for (let i = 0; i < metalTime.length; i++) {
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      push();
      translate(t, t2);
      rectMode(CORNER);
      fill(y);
      textSize(15);
      textFont(mediumFont);
      text(metalBands[i], 416, mouseY + 25, 180);
      pop();
    } else {
    }
  }
}
​
function sadListen(r, g, b, t, t2, y) {
  //when im crying alone lol
  let metalTime = [100, 429, 439, 449, 459, 469, 479, 489, 500, 510, 520];
  let metalBands = [
    "Gum - Moose Blood",
    "Sugar for the Pill - Slowdive",
    "Not My Baby - Alvvays",
    "Brittle Boned - Julien Baker",
    "You - Keaton Henson",
    "Hangman's Son - Chad VanGaalen",
    "True Love Waits - Radiohead",
    "Motion Sickness - Phoebe Bridgers",
    "You Missed My Heart - Phoebe Bridgers",
    "Holocene - Bon Iver",
    "Love Songs For Robots - Patrick Watson",
  ];
​
  let bandRect = rect;
​
  for (let i = 0; i < metalTime.length; i++) {
    push();
    noStroke();
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      fill(255, 255, 255, 50);
    } else {
      fill(r, g, b, 50);
    }
    bandRect(width / 2, metalTime[i], width, 10);
    pop();
  }
  //WhatamIlisteningto?
​
  for (let i = 0; i < metalTime.length; i++) {
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      push();
      translate(t, t2);
      rectMode(CORNER);
      fill(y);
      textSize(15);
      textFont(mediumFont);
      text(metalBands[i], 416, mouseY + 25, 180);
      pop();
    } else {
    }
  }
}
​
function compListen(r, g, b, t, t2, y) {
  //composers
  let metalTime = [400, 425, 435, 445, 465];
  let metalBands = [
    "Con Te Partiro - Andrea Bocelli",
    "The Weeping Meadow - Eleni Karaindrou",
    "O Habibi - Yasmeen Olya",
    "2 Arabesques: Arabesque No. 1 - Claude Debussy",
    "Please Please Please - Matt Elliott",
  ];
​
  let bandRect = rect;
​
  for (let i = 0; i < metalTime.length; i++) {
    push();
    noStroke();
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      fill(255, 255, 255, 50);
    } else {
      fill(r, g, b, 50);
    }
    bandRect(width / 2, metalTime[i], width, 10);
    pop();
  }
  //WhatamIlisteningto?
​
  for (let i = 0; i < metalTime.length; i++) {
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      push();
      translate(t, t2);
      rectMode(CORNER);
      fill(y);
      textSize(15);
      textFont(mediumFont);
      text(metalBands[i], 416, mouseY + 25, 180);
      pop();
    } else {
    }
  }
}
​
function wtvr(r, g, b, t, t2, y) {
  let metalTime = [240, 347, 427, 437, 456, 468, 478];
  let metalBands = [
    "Misery Business - Paramore",
    "Father - The Front Bottoms",
    "Hope - Alex G",
    "Holland - 1945 - Neutral Milk Hotel",
    "Sweet Disposition - Temper Trap",
    "Doing The Right Thing - Daughter",
    "It Might Grow - Pole Siblings",
  ];
​
  let bandRect = rect;
​
  for (let i = 0; i < metalTime.length; i++) {
    push();
    noStroke();
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      fill(255, 255, 255, 50);
    } else {
      fill(r, g, b, 50);
    }
    bandRect(width / 2, metalTime[i], width, 10);
    pop();
  }
  //WhatamIlisteningto?
​
  for (let i = 0; i < metalTime.length; i++) {
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      push();
      translate(t, t2);
      rectMode(CORNER);
      fill(y);
      textSize(15);
      textFont(mediumFont);
      text(metalBands[i], 416, mouseY + 25, 180);
      pop();
    } else {
    }
  }
}
​
function abbaEnyaEmmylou(r, g, b, t, t2, y) {
  //composers
  let metalTime = [90, 100, 110, 150, 160, 170];
  let metalBands = [
    "Boulder to Birmingham - Emmylou Harris",
    "The Boxer - Emmylou Harris",
    "Caribbean Blue - Enya",
    "Voulez-Vous - ABBA",
    "Slipping Through My Fingers - ABBA",
    "When All Is Said And Done - ABBA",
  ];
​
  let bandRect = rect;
​
  for (let i = 0; i < metalTime.length; i++) {
    push();
    noStroke();
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      fill(255, 255, 255, 50);
    } else {
      fill(r, g, b, 50);
    }
    bandRect(width / 2, metalTime[i], width, 10);
    pop();
  }
  //WhatamIlisteningto?
​
  for (let i = 0; i < metalTime.length; i++) {
    if (mouseY > metalTime[i] - 5 && mouseY < metalTime[i] + 5) {
      push();
      translate(t, t2);
      rectMode(CORNER);
      fill(y);
      textSize(15);
      textFont(mediumFont);
      text(metalBands[i], 416, mouseY + 25, 180);
      pop();
    } else {
    }
  }
}
​
function mousePressed() {
  if (value === 0) {
    value = 200;
  } else {
    value = 0;
  }
}
​
Cookies

Sketch Files

Console

Preview
