Concept
My inspiration for this weeks project was my love for music. I often spend a lot of time listening to music daily so after a hard time trying to figure out what data I could represent it popped in my mind that I could easily rank my top artists and their number of streams. I was also fascinated by how one can represent any random data in visually appealing way rather than the boring graphs and charts that are usually used. This made me eager to try and represent the music data in a way that is desirable and fun.
Code
Hover above the bubbles to find your popular artist and their number of streams.
Code Highlight
// Set color from red to blue based on position in the sorted array
this.color = lerpColor(
color(255, 0, 0, 150),
color(0, 0, 255, 150),
index / total
); // Gradient from red to blue
I was really proud of how I was able to make my project look more appealing. I had the idea of mixing colours in a pattern that can show the rankings but I did not know how I could do it. After doing some research I came across the lerpColor function which basically enables you to smoothly blend two colors based on some factor. I used it to transition from blue to red with index/total determining the blend. The artists with higher streams appear more red and those with lower are blue.
Reflections/Future improvements
I am proud of what I was able to come up with and how I was able to represent data in p5. Working on this was really useful in helping me understand how to load data and read files using p5. It also exposed me to how powerful p5 can be. For the future I would really love to include music in the work. It would be fun to have each artists best song play when the user clicks to check their data. Other than that I am impressed and proud at my progress.