Hip-Hop Heads

This project was designed and created in collaboration with Nailah Davis. Nailah loves music. She wanted to incorporate her interests in hip-hop and hip-hop culture in a creative way. Both of us agreed that we would love to incorporate a music element into our program where the user could interact with the artists they are listening to. From this brainstorming session, Hip-Hop Heads was born.

*** WE DO NOT OWN ANY OF THE COPYRIGHTS/LICENSES TO THE MUSIC/ARTWORK USED IN THIS PROGRAM. THEY ALL BELONG TO THEIR RIGHTFUL OWNER.***

Hip-Hop Heads showcases the music of 3 artists (Left to Right): Biggie, Tupac, and A3000. Each icon contain’s the artists face within a black background which Nailah designed. These icons serve as buttons which I then programmed to play one of the artist’s song when the user clicks on it.

When you click on Biggie’s icon, his song Hypnotize plays and the background color changes to blue. Tupac’s icon plays his song Do For Love and background changes to a pink. When you click on André 3000’s icon, his song Da Art of Storytellin’ plays and the background changes to yellow.

I was inspired by Nailah’s previous p5.js project where she created a vibrating boombox that imitated the movement as if sounds were playing. Therefore, we created black circles that move along the x axis when the icon is clicked to resemble that boombox effect. When you click outside of the icons, the music that is currently playing stops. You can also click between icons without any interference.

One glitch we were facing is that when you double click one or more of the icons it starts playing twice and the playback overlaps as well as will not stop playing once you click out of the icon.

Nailah and I both really enjoyed working together and would like to continue pursing this project. Future implementations of this program will include more artists and more of their songs. We also would like the song to keep playing where you left off if you stop playing the music before the entire song ends.

Posted in: ICM, Projects

Tagged as: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s