Dance Breaker: Completion! 💃🏼🤸 (and Presentation Challenges)

Final Product 🌟🕺🏼:

We have all played Just Dance and spent most of the time fixating on figuring out which specific movements on the controller give a higher score. We have all played Dance, Dance revolution and forgotten that it was a dancing game while we are too focused on getting the arrows right. This is because these games are focused on earning a high score rather than enjoying your movements to the sound of music. Thus, Lily and I decided to build a game, Dance Breaker, that focuses on dancing. How you move, how you groove to the melody and how you show the world your emotions with your movement. With a dancing mat, the game will push you out of your comfort zone by pausing the music randomly and telling you to assume a break dance pose. There is no score, no losing, no winning, but a set of instructions and a dynamic game that will motivate you to give it all out. Our game is a fun space to take a break and dance, but of course, it is only as fun as you make it.

The final product is composed of two physical pieces and a P5.Js sketch.

1. 1. Dancing Mat: a grid of panels built with acrylic sheets. It contains 8 pressure sensors and the logo of the game in the middle.
  2. Control Box: a Box with two potentiometers and a button used to control parameters of the music and choose the song.
  3. P5.js: Contains the instructions for the game, as well as the screens for all the different songs. It is the source of user feedback to interaction, and displays a computer vision sketch to visualize the movements.

After many late nights of hard work, we are very satisfied and proud of how Dance Breaker looks. It is a comprehensive, clean-looking game that has given me, and everyone else who has helped us with user testing a fun and engaging time. It accomplished our purpose (established in previous documentation) of exploring multiple mediums, tools and opportunities that are presented to us as IM students, and building something that resembles a real life product in the market.

Final Product 👣🚨:

Sketch and Code:

** Make sure to see the sketch on full screen.

#include <Servo.h>


Servo myservo;

void setup() {
   myservo.attach(9);
  Serial.begin(9600);
  pinMode(3, INPUT);



   while (Serial.available() <= 0) {
    Serial.println("0,0"); // send a starting message
    delay(300);            // wait 1/3 second
  } 
 
}
void loop() {

  delay(15);

  while (Serial.available()) {
    int left = Serial.parseInt();
    int right = Serial.parseInt();
    int reward = Serial.parseInt();
    
  int zeroValue = analogRead(A0);

  int oneValue = analogRead(A1);
   
  int twoValue = analogRead(A2);

  int threeValue = analogRead(A3);
 
  int fourValue = analogRead(A4);

  int fiveValue = analogRead(A5);

  int sixValue = analogRead(A6);
   
  int sevenValue = analogRead(A7);

  int eightValue = analogRead(A8);
 
  int nineValue = analogRead(A9);

// RELEVANT FOR BUTTON
  int tenValue = digitalRead(3);
  

 

    int sensorValue = zeroValue;
    Serial.print(sensorValue);
    Serial.print(",");    
    sensorValue = oneValue;
    Serial.print(sensorValue);
    Serial.print(",");
    sensorValue = twoValue;
    Serial.print(sensorValue);
    Serial.print(",");
    sensorValue = threeValue;
    Serial.print(sensorValue);
    Serial.print(",");
    sensorValue = fourValue;
    Serial.print(sensorValue);
     Serial.print(",");
    sensorValue = fiveValue;
    Serial.print(sensorValue);
    Serial.print(",");
    sensorValue = sixValue;
    Serial.print(sensorValue);
    Serial.print(",");
    sensorValue = sevenValue;
    Serial.print(sensorValue);
    Serial.print(",");
    sensorValue = eightValue;
    Serial.print(sensorValue);
    Serial.print(",");
    sensorValue = nineValue;
    Serial.print(sensorValue);
    Serial.print(",");
    // RELEVANT FOR BUTTON 
    sensorValue = tenValue;
    Serial.print(sensorValue);
    Serial.println();
  //  delay(1);     

  if (reward == true){
    myservo.write(0);
  } else {
     myservo.write(90);
    }
}

  
  }

Despite being very proud of Dance Breaker, there are some elements that we would like to improve if we had more time and experience:

1. 1. We would like to make the transitions between pages smoother.
  2. We would like to add different elements to the computer vision for each song. This, however, was a massive and time consuming task that would not add significantly to the experience. We were also uncertain in how to do this without slowing the frame rate even more.
  3. We would like to introduce more songs, and a way for users to record the computer vision of themselves.
  4. We would like to work on the frame rate and optimization of the code. As seen during the class presentation, if the frame rate slows down, the screen triggering the dancing mat takes too long to appear.
  5. Some small signifiers and dynamic were planned (stickers for every panel, a mark on the floor indicating the place to dance, images in the instructions) that would make the game more comprehensible.

Process 🦾:

After an initial phase of user testing, we still had a long way to go. By the end of last week, Lily and I met to assemble the board and wire it all together. We realized that we needed a bigger Arduino for the 10 analog inputs that we intended to have, and asked a few friends to test the mat. From this we realized that:

1. 1. Our initial spring mechanism did not work well, as the material we were using was very brittle. We replaced it with double sided tape which worked wonders, and provided a smoother experience.
  2. We figured out which tool we needed to cut the bolts and smooth the mat.
  3. We did not need a third potentiometer and decided to replace it with a button.

During the weekend, we focused on the mechanics of the game in P5.js. We adjusted everything to the new wires, located all the sensors, and made some important changes. With a basic game mechanic and the physical component ready, we began to test the game. Simultaneously, we worked hard on building the computer vision and making the user experience better. Multiple instances of user testing happened throughout the process. The game, in its different stages, was tested by:

- - - Valentin Josan (again)
    - Joe Mrad
    - Nour Mrad
    - Nicholas Raffone

From their testing we adjusted the timings of the random pauses and the composition of the computer vision. This was done through frame difference, and we mostly altered threshold and RGB colors from class examples. We, however, had one big mistake which led to some challenges in the class presentation.

Class Presentation 😶‍🌫️: Challenges & Solutions

The presentation of our project did not go as planned. This is because, while plugged to the projector, the frame rate of the sketch significantly decreased. We user tested the mat extensively and the set up with the projector, but it was not until the final set up that we realized this would happen. Thus, we were not able to successfully showcase our project. As it can be seen in the video below the game runs smoothly when played on the computer screen. We also reduced the pixel density in the computer vision sketches to make the code run smoother. Here is how the project looked in the end, after correcting these details. It can be seen played by one and two people, and overall proves to be a fun and engaging experience.