Final Project- Moony

I’m happy to say my final project turned out okay, considering I didn’t have the physical component added as planned. I initially started with an idea of a functional DIY turntable that created a scratch effect using a MousePressed P5.js function combined with several sound files (see sketches below). I researched a few  DIY websites online and found the perfect turntable apparatus on

Sketch 1

Sketch 2

The designer listed the following items needed to execute the project:


plywood (4mm) for knobs/sliders/decoration/disc
fibreboard(18mm) for the table itself
plexiglass (4mm) for the disc/inside disc

Electronic Components:

1 Arduino Uno
2 potentiometers
2 slider potentiometers
1 rotary encoder

Audio Software:

Javascript + browser
Web audio API


Node Js
+ libraries (, node-serialport)

The Process…

I attempted to order the first piece of hardware online but decided against it and will save the physical portion of the project for my future PCOMP class (I can’t wait!!!) That said, I needed to brainstorm a different way for the end-user to interact with Moony.


Moony is a double sphere shaped object I envisioned working similar to a turntable – drag your mouse on the circles to create a scratch effect (vinyl), press  left and right arrows for voice (crossfader).

I found a great copyright free EDM track online. I converted the video to mp3, chopped it down to 4MB in Adobe Premier and uploaded all files to the p5 web editor.

The Files…

File 1: Dan Shiffman explains bubbles

File 2: When kids are excited

The code…

Problem # 1: KeyPressed function doesn’t work for left/right arrow keys, it breaks the code so I commented it out
Problem # 2: Unable to add new shapes or text
Problem # 3: Looping main song breaks the code, seeking alternative scratching pattern

I was able to get the KeyPressed function to work after we removed the load call back from the code. I also wanted to add a shape and/or text to help navigate the user to a perfect pitch position between the circles – initiating the scratch effect. Unfortunately, I don’t believe there’s an easy way to add text or shapes in a WEBGL enabled canvas. I found a few workarounds online but it wasn’t within the scope of this project.

Moony Revamped…


  1. Place the cursor between both circles.
  2. Press mouse to start beat.
  3. Slowly move cursor up and down to create scratch (drag cursor up to decrease speed, drag cursor down to increase speed .
  4. Press left and right arrow key to start voice effects. Press any key to stop.
  5. Press mouse to stop beat.


Updated code…

I overlooked ergonomic specs as a right-handed user and found pressing the arrow keys and mouse simultaneously somewhat difficult but on a lighter note:

Most humans (70 – 95%) are right-handed, so if you’re a lefty, Moony was MADE for you. Enjoy!

I want to give a HUGE thank you to Mithru,  for helping me figure out all of tiny intricacies of the code, his patience and most importantly for his time – he effortlessly OWNED the scratch.

Special thanks to Dan S., for keeping the class material entertaining, engaging and fun (and for letting me sample your voice).

Ultimately, I’d like to have a more contained scratch and seamless mixing.

To be continued…


Full version of Moony HERE

Final Project Proposals

For my final project, I decided to focus on my moony work from week 8. Ultimately, I’d like to turn the spheres into DJ turntables and playback two selected songs. Additionally, a crossfader switching between songs would be AMAZING.


I already have two songs in mind to play; they’re actually looping uncontrollably in my head right now. Unfortunately, I haven’t taken the P-COMP class this semester using Arduino, so I miss out on the physical component of the project. I might be able to self-learn with YouTube, depending on how much time and effort I put into independent learning. I’ve always been interested in music and I’ve decided to incorporate music into every project or design at ITP- data and music, where applicable. Music will always be a primary inspiration for me; after all, music is life… I researched some basic turntable mockups online and I really like the cartoonish look.


I want to continue to use the directionallLight function and WEBGL without losing light quality hopefully, the image synchronizes successfully. Right now the proposed title is “Music is Life” and I look forward to making this project an interactive, fun and simple program for people of all ages to use! Even my 90+ year-old grandmother!


Side note- I’d like to add a data source to pull the lyrics of the songs or the artist info but I’m not sure how to incorporate this yet…

External Media Sketch

This assignment was very challenging for me, I spent almost 10 hours working on the audio file and visual aspect of the code. The initial idea was to create a cool trance-like visualization with a smooth instrumental as the background sound. I wanted to use the MousePressed function to start and stop the music and the MouseMoved function to change the range/pitch of the sound, similar to the sound synthesis  example, but with a scratch like sound effect (think turntables).  Additionally, my mp3 file was too big for the P5 editor and I needed to use a sound editor to trim the size to around 2.4 MB.  After hours of trial and error, I finally decided to stop breaking my code and stuck with a stationary approach.  Not bad, but I want to figure out how to get this baby to scratch!

Week 5- object-oriented sketch

This week I piggybacked one of the example codes because I really enjoyed the output. I replaced the smiley face emoji with one of my favorite and most controversial artists in music today, Mr. Kanye West. I’d really like to work with him one day; he’s talented, inspirational and highly opinionated. I could listen to him talk for hours.

On to the code…

I wasn’t able to figure out how to remove the white background from each image but I believe tweaking an image is more of a design issue typically resolved in Photoshop…

I’m satisfied with the movement and placement of the images so I made very minimal changes to the update function.  I wonder if I could add audio and play one of Kanye’s tracks at each mousePressed function?!!!




Image with transparency/No white Background

Week 4- Re-organizing your code

So this week, I reused Robot Jordan  to reorganize my code. I was able to get everything out of the draw and setup functions so I decided to get fancy and add some bionic bouncing arms. I started with a var = hands function and tried to create a new function from var. I find it easier to work step by step and cancel out as I progress. I wasn’t able to get the new function to work; Robot Jordan lost his arms 🙁

I also wanted to duplicate Robot Jordan by calling the jordanrobot function multiple times but I ran into functionality issues there as well. I’ll need to figure this out…

Week 3- Collaboration

Week 3


This week we worked on ruled- based animation, motion, and interaction. We were paired in two’s and had to swap and integrate our work. My partner Vince and I were off to a great start. We had great ideas – a robot named Jordan who would release a ball with the MousePressed function. We spent a significant amount of time testing the balls release and in the end, we both decided to slam-dunk the robot for a different idea.

Robot Jordan

Our second iteration was a game, one bouncing ball with two sticks. The goal of the game was to get the ball through the sticks. Easy enough, we thought. Yeah, we were both wrong. It was actually harder than robot Jordan. We were able to get the ball to bounce but overall, the objective was to allow the ball straight through the sticks or loop back to have the user try again.


Game on!

Our final attempt was simple; Vince sent me his sketch of “Winter WonderLand” A cool ellipse with a MousePressed snowy background function. I added a blue background function and never want to look at that code again.


Winter WonderLand

More winter, more problems

Collabo code

Collabo code

I could hear robot Jordan calling me as I closed my laptop. I decided to play around with my code a bit and figured out how to add a function to robot Jordan’s heart. He lives, he’s alive.



Week 2- Interactive

Prototype of Mr. Smiley

I really wish I had something more exciting to show you. Yesterday was so weird; Murphy’s law x 100. I decided to make an interactive sun to help cheer me up and change the energy around me. I had a great idea in my head (as always). My sun would beam rays and smile right at you, possibly even wink. I even considered clouds moving in the opposite direction of the sun. I started with a simple ellipse and worked the background colors in. I sketched the eyes and figured out the right positioning after trial and error in the web editor. I ran into great difficulties with the smile; I couldn’t get the line to curve like a half circle so I used arc instead. I wouldn’t call it the best option but my guy is smiling. I also ran into trouble with the eyes, they aren’t synchronized with smiley. I couldn’t get mouseX to work correctly; I’ll need to figure this out…

Weird Smiley


Week 1- Create your own screen drawing

I’d like to call myself a technologist, really. I always find ways to involve technology into all of my interests. Music, coding, urban planning, social issues, photography, video and fashion integrate computation in some shape or form for me. For example, I’m interested in researching ways to develop a music recommender system using data visualization. Additionally, I’d like to work with video and coding. I’m not particularly sure how this would work, but I’m super interested. There are so many projects that I’ve reviewed that are truly amazing – mainly the visualization and net art works. I started a project of my own this weekend- creating a screen drawing using P5 and 2D primitive shapes for my ICM class. I began with a simple drawing on a piece of paper using one rectangle. I tried to create shapes and ideas in my mind to transfer but I fell short. In my head, I saw this abstract masterpiece of many shapes and vibrant colors. After 15 minutes, I decided to close my book and try something else. I installed the text editor, Brackets and ran into issues with the default index file. I installed the P5.Js web editor and everything changed! I’ve coded in the past; I even have a web development certification but P5 works differently in that it provides instant gratification using immediate visual feedback. This works perfectly for my learning style. I started again using a few shapes, testing each position, size and various background colors until I rendered a pink background (my favorite color). I created another rectangle using the web editor; do I like to play it safe? Initially, I ran into problems positioning a smaller ellipse inside of a larger ellipse but I eventually figured out the precise locations through testing. In the end, my sketch grew into something totally different from what I imaged but it works for me– the Teemobile was born and all is well in the world.

Paper sketch