I can’t believe the first semester is over! It all together feels like only yesterday was September the 2nd, but also like it was ages ago.
I’ve started my ICM journey without really knowing what to expect or what ICM was, and without any programming knowledge. Cannot say that I’m very knowledgable now but it’s a good start!
As I mentioned in the final project proposal, I was going to work with Youtube API and to create a music player. That is exactly what I did.
I divided my work into 3 parts.
Youtube API
It looked easy at the beginning — I made it work relatively easy. I tried out both the video and playlist search and decided to stick with playlists as it gives more results and you need to do less searching. Only after playtesting and receiving some really valuable feedback I decided to go to video as it would open up more possibilities (I hoped). It turned out that Youtube API has many limitations, which made me work on much more simpler ideas (and I didn’t want to change API as it was already too late).
Some of the limitations:
- you cannot really do much with the audio input reading — I wanted to make certain things happen only when the video is playing, but due to limitations, I was picking up additional noise, too (like voices in the room).
- reading video pixels: one of the feedback ideas I got during playtesting was that it would be so cool to read pixels from video and recreate it on canvas. It would be cool you say. Tell that to Youtube. They do not allow that and I had to give up on this idea.
Visuals
I really wanted to make visuals interactive depending on the music playing. For this to happen I wrote 7 different sketches that reacted to the mic input from video and changed according to it. The default color was white.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
After I made these 7, I also added other 7, only in color.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Music player interface
In my proposal I said that I would like it to be as much DIY look as possible. Well, while working on code I realized that interactive visualization part is much more important that the interface itself, so decided to keep it as minimal as possible.
Image may be NSFW.
Clik here to view.
Of course, I couldn’t do it all without help of other ITP’ers: residents John and Laura and of course, my professor Dan Shiffman.
I tried working as organized as possible and break to dos in small steps: every time I made one code worked, I saved it and made a copy to work on other things. In this case now I have bunch of folders, but can track every single thing I did.
Image may be NSFW.
Clik here to view.
I touched html, css, sound library, data. It was super fun experience (and I’m happy I chose to work alone) and I might spend some time on lynda.com to improve my javascript skills over the break.
Here’s the full working code (keep in mind that audio in takes additional noise, not only video, and fullscreen feature sometimes goes crazy). For the code to work you’ll need to share your microphone with my server itpruta.com (Firefox suggests it automatically).