Concept:
My work for this week was inspired by a website called Receiptify, which takes your Spotify data and makes a list of your statistics and displays it in the format of 
a receipt. This is data visualization in itself, while I didn’t make a version of it, I chose to use it to generate my dataset. I asked it to give me my top 50 songs for the month, then I made those into a dataset, which I uploaded onto p5.js. I was racking my brain for different ways music can be represented in a visual sense, and then I saw one of my suitemates got coasters that look like vinyls, which gave me the idea to represent the songs as vinyls. I think most of us have seen people use vinyls as room decor rather than for playing music; this work is sort of a spin on that (pun intended ?).
Part(s) I’m Proud of:
Note: To be completely honest, I did consult ChatGPT for a few things, just to make the process less overwhelming.
1- I remembered Professor Aya saying to try not to hardcode variables, and I am proud that I thought of this part. I decided not to hardcode the number of rows in my grid, in case I want to edit the number of songs in my dataset in the future.
//compute rows automatically based on number of songs //not hard coded in case i want to change the number of //songs in the future //ceil cause we need to round up let rows =ceil(records.length / cols);
2- I made it so that the vinyls expand when you click on them, and I am proud of my implementation because it makes the audience experience less static; you’re not just visualizing the data, you’re also interacting with it.
/when mouse is pressed
function mousePressed() {
//loop through each vinyl
for (let i = 0; i <records.length; i++) {
//check if mouse is inside vinyl
if (dist(mouseX, mouseY, records[i].x,records[i].y) < 25) {
//deselect if same vinyl clicked
if (activeIndex === i) activeIndex= -1;
//otherwise set this as active
else activeIndex= i;
}
}
}
Heres the sketch:
Reflection:
There’s always room for improvement. If I spend more time on this, I’d probably make the rest of the vinyls disappear when a vinyl is clicked. Instead of just a color per artist, I can make it more realistic by adding album covers. A possible full upgrade would be making it almost a game where the user chooses between these vinyls, then we get an animation of a vinyl actually being played through a player, and the actual song being played. It would be a different way to interact with music, as opposed to seeing it as a huge list of strings, as we do on Spotify.