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