Originally, my idea was to create an interactive hip hop game. I sketched out an idea like so.
- Populate lyrics from MusicMatch API
- Create a drop down field with several artist
The user logs in and a word cloud of lyrics would appear followed by a drop down allowing the player to select the correct artist and corresponding lyrics. If the user selected the correct answer, they would pass to the next round– up to round 10. If the user was incorrect, the game would give several hints.
Hint 1: Play artist track
Hint 2: Show track album cover art
Hints via Spotify’s API.
To make the hints difficult, I would add a distorting effect to the artist track using p5.js‘ sound library.
Sounds good right? No.
Unfortunately, I wasn’t able to execute what I envisioned for my project. I ran into a lot of problems with the API calls and couldn’t get the artist track to play. I learned my API calls missed a few key elements after many hours of testing and debugging. The track play logic was in the wrong function, I excluded required parameters AND I was initiating the calls on page load BEFORE user input. I decided to work on another idea after I recovered my splattered brain tissue and lost pride (again).
Early stages of the hip hop game design…
Luckily, I have a second interest outside of music. I’m just as passionate about photography and I rely heavily on it to keep me balanced. I find beauty and substance in pictures mainly because an image is open to various interpretations. An image is a narrative without words. An image, similar to music, often creates an impactful way to convey a message… To tell a story… The art of storytelling completely fascinates me.
I decided to use the Pixabay API for my project. The images are high quality and royalty free. I anxiously searched the internet for API tutorials and came across a tut on YouTube which was perfectly aligned with what I needed-React.Js & PixaBay. I really enjoyed working with React library because it allows you to focus less on aesthetics and more on code functionality. I’ve spent hours integrating CSS elements and HTML when the focus should’ve been working functions! The downside in my opinion is design; many websites that use React style the same. I’m also a novice just scratching the React surface and should probably research this a bit more before drawing conclusions. 🙃
I decided to change a few elements in the original code. I changed the grid placement, modified parameters, cleaned up the padding and borders along with several other adjustments. I also filtered the photos to grayscale only. Basically, when prompted to search, the API returns grayscale images starting with the first letter in the search field. I dug deeper into the code and made changes to many import and render elements but decided to keep the original code to avoid breaking anything else. Admittedly, I felt slightly weird using the code but I realized I totally utilized “second use” which is pretty much the definition of a Mashup! I also believe a great addition to this project would be adding a database to the landing page. The user could log in and save favorite images to an “inspiration” section of the site. This section could be used as a resource for ideas and inspiration for an artists/users own work. I truly wanted to present a functional game as I imagined, but unfortunately it wasn’t completely ready and I was uncomfortable showing a broken project. However, I do appreciate the long hours I invested in learning React.js and building a decent single page experience worth showing my classmates and Calli.
Here is the finished product…
React has really inspired me to continue working on my Hip Hop game project! I plan on using React to build a new dynamic website using Spotify and P5.js.
Sidenote: I finally (with help) got the Spotify API to work ! Also, enter your own keys for testing, my keys are invalid.
I think I’m off to a great start. All I need is a bit more patience!
Until next time…