Google

2014/07/25

VJ App - Speed Buttons & Pulsing Background demo

VJ App - Speed Buttons & Pulsing Background demo from Nick Cummings on Vimeo.

This project was completed for the Creative Programming for Digital Media & Mobile Apps course on Coursera.

For this assignment, I decided to try manipulating the audio and visual output of the VJ app in the following ways:
1- Create buttons that slow down each track's speed by 50% when toggled on
2- Change the background color so it pulses in time with the beat

Part 1:

I drew these buttons in Photoshop and positioned them using similar code to how the turntables are drawn. I also declared booleans to track whether these speed buttons are toggled on or off, and that determines which button image ("on" or "off") is shown.

In short, these buttons control the value of a multiplier that I included in the existing track speed control statement that begins with "if (deck1Playing || deck2Playing) {". The result is that each track plays back at the player-selected speed chosen by dragging the mouse along the x-axis multiplied by either 1 (when "off") or 0.5 (when "on).

Part 2:

I did some math to figure out where the audio playhead is at compared to the total length of each beat clip. I also counted the number of beats in each clip to make sure they're the same; they are, thankfully, and there are 16 beats per clip.

From there, I just did some math to change the background color on draw() between 50% alpha (gray) and 0% (black). I calculate the difference between the moment of the last beat and the playhead's current location, and the greater that distance is, the closer to full black the background becomes.

Nincsenek megjegyzések: