Boxy – Interaction Lab Final Project Documentation

Date: May 21, 2017

Instructor: Marcela

Materials Used:

  • Arduino
  • Jumper cables
  • 10K big potentiometer
  • Infrared Ranger
  • Push Button
  • Light Sensor
  • Touch Sensor
  • USB Cable
  • Mini Breadboard
  • 2x 10K Resistors

For my final project, I wanted to create an interactive reaction-based game with multiple different inputs. I wanted to experiment with as many different sensors as I could, and also challenge my coding ability. I believe I am not a very strong coder, so I knew this project would be challenging for me.

My project is inspired by the children’s game “Bop It!”. The Bop It, shown below is an interactive reaction based game with four inputs. It has a twisting input, a pulling input, a button, and also a microphone. The game will prompt the user to perform an action, and the player only has a certain amount of time to complete it. As the user performs the actions successfully, the timer gets shorter and the game get’s more challenging.

“Bop It!”

The project that I created is inspired by this game. The difference is that the user will be prompted to perform their actions through processing. The other difference is that my project has multiple different inputs, such as a light sensor and an infrared ranger.

Hardware

I began my project by creating plans to laser cut a box with precise cut outs for the sensors. The box has six sides, so five sides had cutouts for the different sensors, and the final side had a cutout for the USB cable that would be connected to processing. Marcela suggested that I use www.makercase.com to create my box. After choosing the size of my box and the correct size of the screws I carefully measured the dimensions of the various sensors. To do this I used a calliper.

Calliper used to help measure potentiometer

IMG_20170511_172724

After measuring the dimensions of all the sensors, I used Adobe Illustrator to create the plans for the laser cut.

Laser Cutting!

 

It took a few tries to get the perfect cut as there was a problem with the sizing in Illustrator, and I had also measured 2 of the sensors wrong. But in the end the box was complete and I was ready to start attaching the sensors to the freshly laser-cut box.

Laser Cut Final Parts

IMG_20170511_192051

At first I was confused at how I would attach the sensors to the laser cut box because I thought hot glue would be unsafe for the sensors. Marcela assured me that hot glue was okay and could be removed easily. So I began to attach all the sensors to the laser cut box.

Touch Sensor attached to box

IMG_20170515_181417

Infrared Ranger attached to box

IMG_20170515_181422

A lot of the sensors I had to solder cables to certain parts, and they were too far from the mini breadboard I was using inside. Things like the light sensor and potentiometer had to have additional wires and soldering. Below is a picture of the soldering for the light sensor.

Soldering for light sensor

IMG_20170515_181426

After all the sensors were attached to the box and properly wired up I put them in the box and one by one tested to see if they were working properly. They worked properly and I sealed up the box using 20mm screws, nuts, and bolts.

Cuddled up inside the box

IMG_20170515_204209

Software

Now the challenging part, the coding. The Arduino portion of the coding was pretty simple. It was simply taking the input from each sensor and reading it. A challenging part of the coding was deciding how Arduino would send the input from each sensor to processing as there were 5 different sensors. Rudy helped me by directing me to a portion of code on the internet. This code was interesting, as it used the “print”, “println” functions and arrays in order to send the readings from every single sensor to processing at the same time. So the processing would be receiving the readings from the sensors continuously. Below is the portion of code that performs this process.

Arduino printing every state, last state using “println”

Screen Shot 2017-05-21 at 6.40.28 AM

Processing code to read for sensors from Arduino

Screen Shot 2017-05-21 at 6.48.08 AM

 Now for the timer that would record the amount of time the user had to complete his tasks, I created the code from scratch. I used the millis() function in processing. Originally I was going to use the second() function, but Luis told me that the second() function would not work, as when the second() function reaches 59, it resets back to 0, whereas the millis() function keeps counting forwards without stopping. Below is the code for the timer.

Timer code

Screen Shot 2017-05-18 at 3.25.43 AM

The variable “time” is set to millis(), the variable “timee” is timestamped at the beginning of the function within a boolean if statement so it only timestamps once. The timestamp is then compared to the current time and the amount of time the user has (variable “i”).

After creating the timer, the rest of the code was mostly duplicating the same code for all of the sensors. I had to tweak around some of the sensor values as some of them were set too high and some were set too low. As in the sensors that were not binary like the button and the touch sensor, some were too sensitive and some were not sensitive enough.

Below is a video of the product that I presented in class:

 

Final Thoughts

There is a lot about this project that I would like to improve. I mentioned a few of them in my presentation. I would improve the user experience, I would add a timer that would get shortened every time the user successfully completed a task. Luis suggested something interesting, maybe two Boxy’s, so two users could compete against each other. Rudy also suggested something interesting, if the colours of the screen corresponded to the action the user had to perform. All of these suggestions are great and I am sure would have made my project much more interesting and interactive.

In the end, although there is a lot about my project that could be improved on. I am still happy that I got this far with it. I learned a lot building this project. I learned how to create a design for laser-cutting. I improved my soldering skills. I learned how to use many different sensors, and how to communicate them to Processing simultaneously. And finally I feel like I really improved my coding ability. Many of the other projects presented in class and in the show were really, really amazing, but I am still happy at the progress I made, and the amount I learned creating my project.

import processing.serial.*; 
import processing.sound.*;
SoundFile music;

int sensor0 = 0;
int sensor1 = 0;
int sensor2 = 0;
int sensor3 = 0;
int sensor4 = 0;

int r;
int score = 0;
int time;
int showTime = 2000;
int i = 5000;
boolean setTime = false;
int timee = 0;
boolean potInit = false;
boolean potState = true;
boolean choice = false;
int counter = 201;
Serial myPort;

void setup() {
  size(600, 600);
  background(51);

  myPort = new Serial(this, Serial.list()[3], 9600);
  myPort.bufferUntil('n');

  music = new SoundFile(this, "music.mp3");
  music.play();
}

void draw() {
 
  textSize(32);
  time = millis();
  
  if (counter >200)  {
    counter = 0;
  }

  if (choice == false ) {
   
    r = int(random(0, 4));
    choice = true;
    println("choice: "+round(r));
  }


  check();
}


void check() {
  if (r == 0) {
    if (setTime == false) {
      timee = time;
      setTime = true;
    } 


    //println("PRESS IT!");
    background(255, 255, 0);
    fill(75, 0, 130);
    text("PRESS IT!", 160, 300);
     text(score, 160, 400);
  
    if ( (time-timee)<=i) {
      println(time);


      if (sensor0 == 0) {
        println("BUTTON SUCCESS");
        background(124, 252, 0); //set background to green
        text("NICE BUTTON PRESS!", 160, 300);

        setTime = false;
        choice = false;
        score++;
        counter++;
      } else if ((sensor1 ==0 ) || (sensor2 == 1)||(sensor4 <= 5)) {
        background(255, 0, 0);
        text("DON'T TOUCH THAT!", 160, 300);
        delay(2000);
        
      }
    } else {
      background(255, 0, 0);
      text("NOT ON TIME!", 160, 300);

      println("BUTTON FAILURE");
      println(time);
      println("SCORE: "+score);
    }
  }


  if (r == 1) {
    if (setTime == false) {
      timee = time;
      setTime = true;
    }  
    background(255, 255, 0);
    println("COVER IT CCCCCCCCCCCCCCCCCC");
    fill(75, 0, 130);
    text("COVER IT!", 160, 300);
     text(score, 160, 400);
  
    if ((time-timee)<=i) {
      println(time);

      if   (sensor1 <= 1) {
        background(124, 252, 0); //set background to green
        text("NICE COVER!", 160, 300);

        setTime = false;
        choice = false;
        score++;
        counter++;
      } else if ((sensor0 == 0 ) || (sensor2 == 1)||(sensor4 <= 5)) {
        background(255, 0, 0);
        text("DON'T TOUCH THAT!", 160, 300);
      }
    } else {
      background(255, 0, 0);
      text("DIDN'TCOVER ON TIME", 160, 300);

      println("LIGHT FAILURE");
      println(time);

      println("SCORE: "+score);
    }
  }



  if (r == 2) {
    if (setTime == false) {
      timee = time;
      setTime = true;
    }  
    background(255, 255, 0);
    fill(75, 0, 130);
    text("TOUCH IT", 160, 300);
     text(score, 160, 400);
  
    int passTime = time - timee;

    if (passTime < i) {
      println("pass time +      "+ passTime);

      if (sensor2 == 1) {
        background(124, 252, 0); //set background to green
        text("NICE TOUCH!", 160, 300);

        setTime = false;
        choice = false;
        score++;
        counter++;
      } else if ((sensor1 == 0 ) || (sensor2 == 1)||(sensor4 <= 5)) {
        background(255, 0, 0);
        text("DON'T TOUCH THAT!", 160, 300);
      }
    } else {
      background(255, 0, 0);
      text("DIDN'T TOUCH ON TIME", 160, 300);

      println("TOUCH FAILURE");
      println(time);
      println("SCORE: "+score);
    }
  }
  if (r == 3) {
    if (setTime == false) {
      timee = time;
      setTime = true;
    }  
    background(255, 255, 0);
    fill(75, 0, 130);
    text("TWIST IT!", 160, 300);
     text(score, 160, 400);
  
    if (potInit == false) {  //is this the first time we start the potentiometer game?
      potInit = true;
      if (sensor3 <= 200) {
        potState = false;
      } else if (sensor3 >= 700) {
        potState = true;
      }
    }
    //otherwise we check if the pot got twisted in time
    if (time-timee<=i) {
      println(time);


      if (((potState == false) && (sensor3 >= 700)) || ((potState == true) && (sensor3 <=200))) {
        background(124, 252, 0); //set background to green
        text("NICE TWIST!", 160, 300);

        setTime = false;
        choice = false;
        score++;
        potInit = false;
        counter++;
      }
    } else if ((sensor0 == 0)||(sensor1 ==0 ) || (sensor2 == 1)||(sensor4 <= 5)) {
      background(255, 0, 0);
      text("DON'T TOUCH THAT!", 160, 300);

      potInit = false;
    } else {
      background(255, 0, 0);
      text("YA DIDN'T TWIST ON TIME", 160, 300);

      println("POT FAIL");
      println(time);

      println("SCORE: "+score);
      potInit = false;
    }
  }

  if (r == 4) {
    if (setTime == false) {
      timee = time;
      setTime = true;
    }  
    background(255, 255, 0);
    fill(75, 0, 130);
    text("GROUND IT!", 160, 300);
     text(score, 160, 400);
  
    if  (time-timee<=i) {
      println(time);


      if (sensor4 <= 5) {
        background(124, 252, 0); //set background to green
        text("NICE GROUNDING!", 160, 300);

        setTime = false;
        choice = false;
        score++;
        counter++;
      }
    } else if ((sensor1 == 0 ) || (sensor2 == 1)||(sensor0 == 0)) {
      background(255, 0, 0);
      text("DON'T TOUCH THAT!", 160, 300);
    } else {
      background(255, 0, 0);
      text("YA DIDN'T GROUND ON TIME", 160, 300);

      println("GROUND IT FAIL");
      println(time);

      println("SCORE: "+score);
    }
  }
}






void serialEvent(Serial myPort) {
  // get the ASCII string:
  String inString = myPort.readStringUntil('n');


  if (inString != null) {
    // trim off any whitespace:
    inString = trim(inString);
    // split the string on the commas and convert the
    // resulting substrings into an integer array:
    int[] sensors = int(split(inString, ","));
    // if the array has at least two elements, you know
    // you got the whole thing.  Put the numbers in the
    // sensor variables:
    if (sensors.length >=4) {

      sensor0 = sensors[0]; //button
      sensor1 = sensors[1];  //light sensor
      sensor2 = sensors[2];  //touch sensor
      sensor3 = sensors[3];  //potetiometer
      sensor4 = sensors[4];  //ranger
    }
    //printArray(sensors);
    //println("-");
  }
}

One thought on “Boxy – Interaction Lab Final Project Documentation

  1. good job Mark, but it would be nicer to have a better video to hear the sound, also add a different sound for every sensor would have been great, and maybe a sound for failures.
    I’m glad you learned more about coding and digital fabrication working on this project!

Leave a Reply