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

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