Rabbotic – Fay Guan – Andy Garcia
For our final project, we wanted to make a game because we thought it was a guaranteed way of having long lasting and repeatable interaction. The idea behind this project was to combine the concept of board games with the concept of computer games. Originally, our idea was to have the player move a rabbit figurine on a physical board and track the movement on the computer screen with the goal of collecting carrots that were also displayed on the computer screen. However, after discussing with our professor, we decided to focus on the board game aspect and just add digital elements. This design would be more meaningful and achievable. We went with a very traditional board game concept like Candy Land with a path that had a start and an end and action tiles with additional instuctions. However, instead of having physical dice and action cards, they are both displayed on the computer screen.
To achieve our idea, our teacher suggested we use copper tape to create “buttons” for the rabbit figurine to step on. Before we had the physical board set up, I used a button to test my code. While working on the code, I came across a lot of problems and had to ask for a lot of help. The process took much longer than originally anticipated and we didn’t have a game to present during user testing. The code turned out to be much more complicated than we originally thought so we had to make our game simpler as well. The game was originally supposed to be a two-player game but after realizing we had to track the position of the rabbit, we decided to make it a one-player game with an inspiring message. This would allow us to present a finished project on time. I mostly worked on the code, while Sandra worked on building the board. The teacher designed the board for us with laser cutting. Sandra found a rabbit figurine to 3D print, did all the copper tape and soldering, and put together a box to put the wiring inside.
Our final board game with the rabbit figurine looked like this:
In the code, I designed a start screen as shown below. We had a key press to start the game at first but it didn’t always work so we just used a mouse press in the end. Once the player clicks the screen, a dice is shown with a randomized number of dots between 1 and 3. Our dice doesn’t go up to six like normal dice because our board game is smaller and we didn’t want the game to end too quickly.
If the player lands on a normal tile, the screen below is shown:
If the player lands on a tile with copper tape, one of two screens is shown that makes the player either move forward or back one space. We only had the player move on space to avoid touching another tile with copper tape.
Once the player reaches the end, a nice message is displayed:
A full game play is shown in the video below:
We weren’t able to achieve all of our original goals but I think our game was still pretty succesful. Our basic goal of making a board game with digital elements was achieved. One small thing we could’ve changed was coloring the tiles to make it more clear for the player where each tile started and each tile ended. Additionally, if we had more time, I would add copper tape to the start tile to start the game and a button on the board to roll the dice. Then the laptop could be in front of the board to make it one entity. If we had even more time, I would still want the game to be a two-player game. I would also want the path to be longer to make the gameplay longer and to be able to utilize a full dice. I would add more variety of options for when the player landed on an action tile as well. I think there are still plenty of ways we could make our game more interesting and fun but we would need more time to figure out the code.
The final arduino code is shown below:
int tile1 = 2;
int tile2 = 3;
int tile3 = 4;
int tile4 = 5;
int tile5 = 6;
int tile6 = 7;
int tile1val;
int tile2val;
int tile3val;
int tile4val;
int tile5val;
int tile6val;
void setup() {
Serial.begin(9600);
pinMode(tile1, INPUT);
pinMode(tile2, INPUT);
pinMode(tile3, INPUT);
pinMode(tile4, INPUT);
pinMode(tile5, INPUT);
pinMode(tile6, INPUT);
}
void loop() {
// to send values to Processing assign the values you want to send
// this is an example:
tile1val = digitalRead(tile1);
tile2val = digitalRead(tile2);
tile3val = digitalRead(tile3);
tile4val = digitalRead(tile4);
tile5val = digitalRead(tile5);
tile6val = digitalRead(tile6);
// send the values keeping this format
Serial.print(tile1val);
Serial.print(“,”); // put comma between sensor values
Serial.print(tile2val);
Serial.print(“,”);
Serial.print(tile3val);
Serial.print(“,”);
Serial.print(tile4val);
Serial.print(“,”);
Serial.print(tile5val);
Serial.print(“,”);
Serial.print(tile6val);
Serial.println(); // add linefeed after sending the last sensor value
// too fast communication might cause some latency in Processing
// this delay resolves the issue
delay(20);
// end of example sending values
}
The final processing code is shown below:
import processing.serial.*;
Serial serialPort;
int NUM_OF_VALUES_FROM_ARDUINO = 6; /* CHANGE THIS ACCORDING TO YOUR PROJECT */
/* This array stores values from Arduino */
int arduino_values[] = new int[NUM_OF_VALUES_FROM_ARDUINO];
PImage path;
PImage carrot;
PImage rabbit;
PImage field;
int diceSize = 117;
int dicerolled = 0;
int state = 1;
int pos = 0;
int tile1val;
int prevTile1val;
int tile2val;
int prevTile2val;
int tile3val;
int prevTile3val;
int tile4val;
int prevTile4val;
int tile5val;
int prevTile5val;
int tile6val;
long timer;
void setup() {
size(800, 600);
printArray(Serial.list());
serialPort = new Serial(this, “COM6”, 9600);
path = loadImage(“forestpath.jpg”);
carrot = loadImage(“carrot.jpg”);
rabbit = loadImage(“rabbit.jpg”);
field = loadImage(“carrotfield.jpg”);
}
void draw() {
getSerialData();
println(pos);
//println(state);
tile1val = arduino_values[0];
tile2val = arduino_values[1];
tile3val = arduino_values[2];
tile4val = arduino_values[3];
tile5val = arduino_values[4];
tile6val = arduino_values[5];
//if (state == 0) {
// state0();
//}
if (state == 1) {
state1();
}
if (state == 2) {
state2();
}
if (state == 3) {
state3();
}
if (state == 4) {
state4();
}
if (state == 5) {
state5();
}
if (state == 6){
state6();
}
}
void state1() {
image(rabbit, 0, 0);
String d = “click to start”;
textSize (30);
fill(255, 255, 255);
text(d, 300, 400);
}
//void keyPressed() {
// if (key == ‘s’) {
// state = 1;
// }
//}
//void state1() {
// background(#43936B);
// String c = “click the screen to roll the dice”;
// textSize(30);
// fill(255, 255, 255);
// text(c, 200, 300);
//}
void state2() {
if (dicerolled == 0) {
background(#43936B);
noStroke();
fill(#FFF3D6);
rectMode(CENTER);
rect(width/2, height/2, diceSize, diceSize, diceSize/5);
//dots
fill(50);
int side = int(random(1, 4));
dicerolled = 1;
pos+= side;
timer = millis();
if (side == 1 || side == 3)
ellipse(width/2, height/2, diceSize/5, diceSize/5);
if (side == 2 || side == 3) {
ellipse(width/2 – diceSize/4, height/2 – diceSize/4, diceSize/5, diceSize/5);
ellipse(width/2 + diceSize/4, height/2 + diceSize/4, diceSize/5, diceSize/5);
}
}
//if (arduino_values[0] == 1 || arduino_values[1] == 1 || arduino_values[2] == 1 || arduino_values[3] == 1 || arduino_values[4] == 1) {
// state = int(random(3, 5));
// dicerolled = 0;
//}
//if (pos == 1 || pos == 3 || pos == 5 || pos == 7 || pos == 8 || pos == 10 || pos == 11 || pos == 13 || pos ==14) {
// //state = 4;
// dicerolled = 0;
//}
if (pos == 1 && dicerolled == 1 && millis() – timer > 3000) {
state = 5;
dicerolled = 0;
}
if (pos == 3 && dicerolled == 1 && millis() – timer > 3000) {
state = 5;
dicerolled = 0;
}
if (pos == 5 && dicerolled == 1 && millis() – timer > 3000) {
state = 5;
dicerolled = 0;
}
if (pos == 7 && dicerolled == 1 && millis() – timer > 3000) {
state = 5;
dicerolled = 0;
}
if (pos == 8 && dicerolled == 1 && millis() – timer > 3000) {
state = 5;
dicerolled = 0;
}
if (pos == 10 && dicerolled == 1 && millis() – timer > 3000) {
state = 5;
dicerolled = 0;
}
if (pos == 11 && dicerolled == 1 && millis() – timer > 3000) {
state = 5;
dicerolled = 0;
}
if (pos == 13 && dicerolled == 1 && millis() – timer > 3000) {
state = 5;
dicerolled = 0;
}
if (pos == 14 && dicerolled == 1 && millis() – timer > 3000) {
state = 5;
dicerolled = 0;
}
// println(“yes”);
if ( tile1val != prevTile1val && tile1val == 1) {
//println(“tile1 trigger”);
state = int(random(3, 5));
if (state == 3) {
pos–;
}
if (state == 4) {
pos++;
}
dicerolled = 0;
}
prevTile1val = tile1val;
if ( tile2val != prevTile2val && tile2val == 1) {
state = int(random(3, 5));
if (state == 3) {
pos–;
}
if (state == 4) {
pos++;
}
dicerolled = 0;
}
prevTile2val = tile2val;
if ( tile3val != prevTile3val && tile3val == 1) {
state = int(random(3, 5));
if (state == 3) {
pos–;
}
if (state == 4) {
pos++;
}
dicerolled = 0;
}
prevTile3val = tile3val;
if ( tile4val != prevTile4val && tile4val == 1) {
state = int(random(3, 5));
if (state == 3) {
pos–;
}
if (state == 4) {
pos++;
}
dicerolled = 0;
}
prevTile4val = tile4val;
if ( tile5val != prevTile5val && tile5val == 1) {
state = int(random(3, 5));
if (state == 3) {
pos–;
}
if (state == 4) {
pos++;
}
dicerolled = 0;
}
prevTile5val = tile5val;
if (tile6val == 1) {
state = 6;
dicerolled = 0;
}
}
void state3() {
image(path, 0, 0);
filter(BLUR, 6);
String a = “A bug flies in your eye and your vision gets blurry.”;
String b = “You take a wrong turn. Move back one space.”;
String k = “Then, click the screen.”;
textSize(30);
fill(255, 255, 255);
text(a, 85, 285);
text(b, 85, 315);
text(k, 200, 345);
}
void state4() {
image(carrot, 0, 0);
String f = “You find a carrot and eat it, giving you energy.”;
String g = “Move forward one space. Then, click the screen.”;
textSize(30);
fill(255, 255, 255);
text(f, 85, 285);
text(g, 85, 315);
}
void state5() {
image(path, 0, 0);
String e = “Continue as normal. Click the screen.”;
textSize(30);
fill(255, 255, 255);
text(e, 150, 300);
}
void state6() {
image(field, 0, 0);
String h = “Life is full of ups and downs. Sometimes you find carrots”;
String j = “and sometimes you find bugs but, in the end, everything will”;
String l = “work out. Believe in yourself and have hope that life is”;
String m = “leading you in the right direction. Don’t give up! You got it!”;
textSize(30);
fill(255, 255, 255);
text(h, 30, 255);
text(j, 30, 285);
text(l, 30, 315);
text(m, 30, 345);
}
void mousePressed() {
//if (side == 4 || side == 5 || side == 6) {
// ellipse(width/2 – diceSize/4, height/2 + diceSize/4, diceSize/5, diceSize/5);
// ellipse(width/2 + diceSize/4, height/2 – diceSize/4, diceSize/5, diceSize/5);
//}
//if (side == 6) {
// ellipse(width/2, height/2 – diceSize/4, diceSize/5, diceSize/5);
// ellipse(width/2, height/2 + diceSize/4, diceSize/5, diceSize/5);
//}
state = 2;
}
void getSerialData() {
while (serialPort.available() > 0) {
String in = serialPort.readStringUntil( 10 ); // 10 = ‘\n’ Linefeed in ASCII
if (in != null) {
print(“From Arduino: ” + in);
String[] serialInArray = split(trim(in), “,”);
if (serialInArray.length == NUM_OF_VALUES_FROM_ARDUINO) {
for (int i=0; i<serialInArray.length; i++) {
arduino_values[i] = int(serialInArray[i]);
}
}
}
}
}
*Both codes were developed from the arduino to processing example codes
*All images used were found on flickr