Anger Flanker: Need to Release My Stress Soon

It’s been about a month now doing this project. In these past 2 weeks we were focus on implementing it, after we finalized our concept (read previously on my blog here). It’s been quite a roller coaster journey these past days, with a lot of help from caffeine. I thought it was such a simple thing to build. Nevermind, I was wrong. It’s such a pain in the ass. But thank God, we’re getting there. My motivation right now is just I want to use this sort-of arcade game sooner to release all of my stress.

 

What we’ve done

Making a “sort-of game”

We’ve finished making the content, animation, and the whole “sort-of game”. We were using p5.js and javascript to develop it. Since we wanted to make the visual looked like 3D, not just 2D, we decided to make our own animation, rendered it as pieces of movies then play it using p5.js. We knew that there are lots of game engine out there, but we just didn’t have enough time to learn new tools, especially as complicated as Unity.

I thought it was easy enough to make this using multiple videos, but apparently not. I was having a hard time playing bunch of videos using Javascript. Will talk about it in obstacle section. Anyway, all of the p5.js code is on my Github here.

 

Wiring circuit

We started from the very basic circuit: just using 2 force sensitive resistor sensors to control the game. Those 2 FSR are controlling the hand smash. So, everytime the user smash/punch hard enough, it will control the videos.

After that, we connect them to RGB LED strip. We wanted this LED as an affordance to people around it. We wanted people to get attracted, and be curious. Also, the LED will change light every time user smash/punch.

After getting those done, we started to wire more FSR sensors for the stomping action. This action will be the restart CTA, to restart the game. We put these sensors below the mat. So that whenever the user jump/step on it, it will trigger the next state.

 

 

This is the code we used for the Arduino.


const int REDPIN = 6;
const int BLUEPIN = 5;
const int GREENPIN = 3;

int r = 0;
int g = 0;
int b = 0;

boolean isDefaultStateCountingUp = true;
boolean isPressedStateCountingUp = true;

const int FADESPEED = 5;

volatile unsigned int stateGame = 2;

volatile long long timeout = 3000; // 3 seconds

volatile long long lastTimeStomp = 0;

void setup() {

// set the transistor pin as output:
Serial.begin(9600);
pinMode(REDPIN, OUTPUT);
pinMode(GREENPIN, OUTPUT);
pinMode(BLUEPIN, OUTPUT);
}

void loop() {
//int r, g, b;
int sensorReading = analogRead(A0);
int sensorReading2 = analogRead(A2);
int sensorReading3 = analogRead(A3);

if (sensorReading3 > 500) {
stateGame = 1;
} else {
stateGame = 2;
}

switch (stateGame) {
case 1: //case 1 is when sensor 3 is pressed

//for debugging
//Serial.println("HEY!");

//R stays the same
analogWrite(REDPIN, 255);

//GB values loop from 0-255
//check if G is 255. if 255, count down instead of up
// if G is 0, count up instead of down
if (g > 252) { //change the value range (make it smaller) when speed of dimming/brightening is faster
isPressedStateCountingUp = false;
} else if (g < 2) { //change the value range (make it smaller) when speed of dimming/brightening is faster isPressedStateCountingUp = true; } //if Counting Up, increment r. Else, decrement if (isPressedStateCountingUp) { g += 2; //speed of dimming/brightening; dont forget to change the value range as well b += 2; //speed of dimming/brightening; dont forget to change the value range as well } else { g -= 2; //speed of dimming/brightening; dont forget to change the value range as well b -= 2; //speed of dimming/brightening; dont forget to change the value range as well } analogWrite(GREENPIN, g); analogWrite(BLUEPIN, b); if ((sensorReading > 10) || (sensorReading2 > 10)) {
for (r = 0; r < 255; r++) { analogWrite(REDPIN, r); analogWrite(GREENPIN, 0); analogWrite(BLUEPIN, 0); } } else { analogWrite(REDPIN, 255); analogWrite(GREENPIN, 255); analogWrite(BLUEPIN, 255); } break; case 2: //case 2 is when sensor 3 is not pressed //for debugging //Serial.println("YO!"); //set value for GB pins first analogWrite(GREENPIN, 0); analogWrite(BLUEPIN, 0); //check if R is 255. if 255, count down instead of up // if R is 0, count up instead of down if (r > 253) { //change the value range (make it smaller) when speed of dimming/brightening is faster
isDefaultStateCountingUp = false;
} else if (r < 2) { //change the value range (make it smaller) when speed of dimming/brightening is faster
isDefaultStateCountingUp = true;
}

//if Counting Up, increment r. Else, decrement
if (isDefaultStateCountingUp) {
r += 1; //speed of dimming/brightening; dont forget to change the value range as well
} else {
r -= 1; //speed of dimming/brightening; dont forget to change the value range as well
}
analogWrite(REDPIN, r);
break;
}

//for debugging
Serial.print(sensorReading);
Serial.print(",");
Serial.print(sensorReading2);
Serial.print(",");
Serial.println(sensorReading3);

Serial.print("RED : ");
Serial.print(r);
Serial.print(" | ");
Serial.print("GREEN : ");
Serial.print(g);
Serial.print(" | ");
Serial.print("BLUE : ");
Serial.println(b);
}

 

Making enclosure, enclosure, enclosure

This week, we also focus on making the enclosure. It wasn’t easy to make this huge enclosure. We also wanted to put screen and a Mac Mini inside, so we needed to make sure it’s strong enough to cover them. Also, for the wooden piles, since user will be smashing hard, we had to guarantee it’s soft enough to be punched.

 

User Testing #1

We did our first user testing last week (November 29th 2017 on our ICM class). By that time, the game wasn’t finished yet, so we just used 1 videos, and the user just controlled it by punching/smashing to play and pause the video.

But the feedback itself was quite good actually. The users knew and understand quickly how to use it. Most of them liked it because they could release their stress. But still, we also got some insights that they needed more direct feedbacks from the game. That’s why we added RGB LED that will change color if the user is hitting the piles. Also, we tweaked the game a little bit, so that it’s more interactive.

 

 

Obstacles

Uploading multiple videos in Javascript

It was absolutely such a pain playing whole bunch of videos using Javascript. At first, I got 3 videos playing sequentially fine. But when I added more, I faced so many errors which I didn’t understand. Something like broken pipe, server problems, etc. I did consult to Allison and Tom about this, and it probably because of the connection between client side and server side. Also, it might be because of DOM Exception when I play and pause the videos. But we got this fixed by consulting with Leon. He helped us with the code, and suggested using node.js live-server instead of python.

via GIPHY

 

Connecting 12V RGB LED strips

We had a problem connecting 12V RGB LED strip to our circuit. It’s slightly because we were confused how to connect 12V to 5V. Before we had an office hour with Tom, we broke an Arduino because we connected it directly to 12V power supply. Thank God after we consulted it with Tom, we could take a look at the Lab: Using a Transistor to Control High Current Loads with an Arduino and we could get it connected perfectly and lighted up the LED.

via GIPHY

 

Making sure all wires connected perfectly

For now, we haven’t solder the wires that we needed to solder yet. So, it’s kinda loose and it’s really hard for us to make the circuit stand still. Sometimes the wires are just not connected properly. We’re still working on it, so that we don’t need to fix it every single time.

 

Enclosure, enclosure, enclosure

It’s finals time. Everyone is busy on the floor and shop. There’s no such huge space here. Also, everyone is using the laser cutter. It’s just getting crazy. And since our enclosure is not small, we needed to find a place somewhere else, also to laser cut things. That’s why on these past days, we often went to Makerspace at Tandon. There are a lot of unused laser cutter there! And they have that big laser cutter, bigger than the one at ITP. So, sometimes we had to carry our stuffs from ITP to Tandon. Yes, it was tiring, but it would be memorable.

 

via GIPHY

 

Don’t worry, we’re getting there!

One Comment

  1. This post is very informative, thanks, and it looks like the project is coming along well, for all of your hard work. The positioning of the LEDs looks particularly good. It’s perhaps a minor detail to the player, but it seems noticeable without being a distraction. Nice work.

    Tom Igoe

Leave a Reply

Your email address will not be published. Required fields are marked *