HW-2: Dancing Queen

Dancing Queen

Overview

For this homework, I knew I wanted to capture the hands movement and try to make the user move as much as possible; so I wanted to try making a rough version of Dance Dance Revolution. In this experience, at a certain frequency, a box will spawn and a user has to move their hand to it to increase their score; if the box is red, the user needs to move their left hand to it, but if the box is blue, the user needs to move their right hand to it. However, each box has a decay rate, and after a while, they'll disappear.

Source: https://github.com/PaulineOC/ITP-BodyEWAH-HW2

Demo: https://editor.p5js.org/MsRainwater/sketches/wGsKpA_bT

Code

Recreating the skeleton

I didn't want for the legs and I wanted something more filled in for the user's skeleton, so I decided to redraw it myself. Each "part" (head, torso, left arm, right arm) was drawn assuring that the join existed above a certain confidence level.

For the hands, I actually made the ellipse off-set from the wrist positions and accounted for if the wrist's position was above or below the elbow's position.

Sorry - I just realized my built-in microphone didn't record the sound, but ABBA's Dancing Queen is playing and the boxes do not correspond to the beat...

Detecting Beats Per Minute with Peak Detect

I initially tried to use a tutorial that programmatically calculated the beats per minute for the song, following this tutorial, but the result was far from ideal.

Peak detect had a hard time accurately producing beats, and I didn't know the exact threshold or frequencies to initialize it with, so I ended up just using setTimeInterval to generate new boxes regularly.

Generating Boxes

For the generation of new target boxes, I first tried to map the entire screen into a 3x3 grid.

I didn't want the 4th square to ever spawn a block because I assumed the user would be relatively in the center - with their arms mostly moving rather than their torso. The code generation is essentially as follows:

Generate a random grid square
Then based on that quadrant, determine the upper/lower and left/right bounds.
Then generate a random numbers between those limits to determine the left X and Y position of the box.

I ran into some issues because I think I didn't calculate the cases where the box would spawn too close to the 4th square correctly.

Finalish Prototype

One thing I definitely want to improve on is the decaying and the generation of the boxes because they're still a bit glitchy and blink on/off the screen too quickly.

Page updated

Report abuse