Lab 9: Let's Make a Guitar Hero Game with Capacitive Touch!

🦺 Introduction & Safety

In the game Guitar Hero, the user interacts with a screen with colored markers. Whenever the colored markers reach the bottom line, the player must press the associated buttons in time with the music. This screen that the user witnesses is known as a GUI, graphical user interface.

• ✅ Code up a GUI using Processing
• ✅ Learn how to solder electronics
• ✅ Package electrical components together in a clean way

Before we start, please make sure you understand the following safety precautions:

• Soldering Iron Temperature: Ensure that the soldering iron is never left unattended. It reaches temperatures of ~500 degrees Celsius so never make it touch anything it is not supposed to.
• Lead Poisoning: Most solder contains lead. This is very toxic if ingested. Always wash your hands immediately after soldering and never touch your face.

🏗️ Software & Hardware

Software:

• Processing
• Arduino IDE *Should have downloaded in a previous lab*

PPE:

• Safety glasses

Hardware:

• Pre-lasercut guitar
• Wire
• Wire Cutter
• Buttons (x3)
• Solder
• Zipties
• Electrical Tape
• Arduino Uno
• Multimeter
• CapSense (Copper Tape, String, etc.)
• Laptop

Machines:

• Soldering Iron

Part (0): Downloading Processing and Designing Your Guitar

Setup:

• Download Processing (5 mins)
• Install ControlP5 Library for the GUI
• Open Processing
• Click Sketch > Import Library… > Manage Libraries > ControlP5 > Install
• Click Sketch > Import Library… > Manage Libraries > Serial

Designing Your CapSense Guitar (If you did not finish last lab):

In the last lab, if you had some time, you already finished adding capacitive sensing on your guitar. If not, no worries! You can finish this now.

Here are some CapSense ideas:

All you need to do is add 3 "buttons". This could be adding 3 pieces of copper tape or something. And make sure you add wires coming out of the copper accessory you put on the guitar so that we can solder it later. This is similar to how the copper module you built in the last lab had wires coming out. You do NOT need to solder it to the CapSense shield right now. Like see how the wires come out of the module here from the last lab:

Part (1): Getting a Preliminary GUI (10 mins)

Processing uses a programming language called Java. Just like Arduino, it has two main functions: setup() and draw(). setup() is similar to the setup() in Arduino. It runs once at the beginning. draw() is synonymous with loop() from Arduino where the function runs over and over. draw(), in fact, runs 60 times a second. This means that you can make simple animations!

To make a basic window, we will introduce you to a library, controlP5. A library is basically someone else's code and you borrow the functions that they have written and simply call them. Most libraries have their documentation online. Learning to look up documentation is an important skill for any programmer. The controlP5 library can be found here.

To use the library, you have to import it before you start using it. We won't go deeply into it, but there are objects in programming that contain certain properties. In the following code, we make a ControlP5 object called cp5. This oject has properties and functions like adding buttons. And to run the code, press the play button on the top left. Let’s test some preliminary code, type this, and run:

                        
import controlP5.*; // import ControlP5 library

ControlP5 cp5; // create ControlP5 object

void setup(){
    size(300, 400); //window size, (width, height) in pixels
}

void draw(){
    background(50, 70, 100); //background color of window (r, g, b) from 0-255
    //let's give title to our window
    // we have a pen we draw with and we select its color with the fill function
    fill(0, 0, 0); // text color (r, g, b)
    text("GUITAR HERO", 100, 30); // ("text", x coord, y coord) in pixels
}
                        
                        

You should get a dark blue window with Guitar Hero.

Now, let's add a Button and font. So your code should look like this:

                        
import controlP5.*; // import ControlP5 library
PFont font; 

ControlP5 cp5; // create ControlP5 object

void setup(){
    size(300, 400); //window size, (width, height) in pixels
    
    font = createFont("ComicSansMS", 20); //select the font

    cp5 = new ControlP5(this); // Initialize the ControlP5 object

    cp5.addButton("START")  // START is button name
        .setPosition(100, 50)  // x and y coords of upper left corner
        .setSize(100, 80)     //(width, height) in pixels
        .setFont(font)
        ;
}

void draw(){
    background(50, 70, 100); //background color of window (r, g, b) from 0-255
    //let's give title to our window
    fill(0, 0, 0); // text color (r, g, b)
    text("GUITAR HERO", 100, 30); // ("text", x coord, y coord) in pixels
}
                        
                        

Rerun and you should see a button.

Now since Processing runs the draw function 60 times per second, we can make animations! We'll add some circle code that updates the position every time it runs. Copy paste this code and your IDE should look something like this:

                            
import controlP5.*; // import ControlP5 library
PFont font; 

ControlP5 cp5; // create ControlP5 object

// state for circle
float circleY = 0;

void setup(){
    size(300, 400); //window size, (width, height) in pixels
    
    font = createFont("ComicSansMS", 20); //select the font

    cp5 = new ControlP5(this); // Initialize the ControlP5 object

    cp5.addButton("START")  // START is button name
        .setPosition(100, 50)  // x and y coords of upper left corner
        .setSize(100, 80)     //(width, height) in pixels
        .setFont(font)
        ;
}

void draw(){
    background(50, 70, 100); //background color of window (r, g, b) from 0-255
    
    //Circle code animation
    // draw current frame based on state
    ellipse(100, circleY, 50, 50);
  
    // modify state
    circleY = circleY + 1;
  
    // reset state
    if(circleY > height) {
      circleY = 0;
    }
    
    //let's give title to our window
    fill(0, 0, 0); // text color (r, g, b)
    text("GUITAR HERO", 100, 30); // ("text", x coord, y coord) in pixels
}
                            
                        

You should get something like this:

Awesome, now you know how to make a basic window, a button, and an animation!

Part (2): Adding a Button (15 mins)

We want our guitar to have buttons. Buttons can read as 3.3 V or 0 V. To understand how the button is wired internally, we have to use multimeter, specifically its continuity mode that we learned about in a previous lab. When the multimeter beeps, you know the two legs of the button are connected. Traditionally, we think of a button with two legs: unconnected when unpressed and connected when pressed. However, the buttons we gave has four legs.

To understand the orientation you need to place the button in, please use a multimeter. Then, you can place a single button on a breadboard like this for example:

Now, open Arduino. Make a new program with the following code in Arduino. There are some lines in the code that are marked with TODO. Please go through these lines and finish those lines of code.

                
/*
DigitalReadSerial
*/

// digital pin 2 has a pushbutton attached to it. Give it a name:
int pushButtonA = 2;
// digital pin 3 has a pushbutton attached to it. Give it a name:
int pushButtonB = ; //TODO: Put the correct pin number (3)
// digital pin 4 has a pushbutton attached to it. Give it a name:
int pushButtonC = ; //TODO: Put the correct pin number (4)

// the setup routine runs once when you press reset:
void setup() {
// initialize serial communication at 9600 bits per second:
Serial.begin(9600);
// make the pushbutton's pin an input and with a pullup resistor:
pinMode(pushButtonA, INPUT_PULLUP);

// TODO: make the pushbutton's pin an input and with a pullup resistor for pushButtonB and pushButtonC
// HINT: you can basically copy paste the code above
}

// the loop routine runs over and over again forever:
void loop() {
// read the input pin:
int buttonStateA = digitalRead(pushButtonA);
// print out the state of the button:
if (!buttonStateA) {
    Serial.println("A");
}

//TODO: Please do the same thing we did with buttonStateA and Pin 2 for Pin 3 and Pin 4 to print B and C respectively.
//HINT: To make "B" and "C" print, it is mostly copy paste and changing the name

delay(1);  // delay in between reads for stability
}
                
                

If you connected the button to Pin 2, then when you press the button, you should see an "A" print in the Serial Monitor. Now, connect two more buttons to Pin 3 and Pin 4 to see a "B" and "C" print.

Discussion & Reflections

1. Give a brief overview of how the code works.
   • How are the serial inputs being processed into game inputs?
   • How are buttons hits being scored?
   • How is the trackdata file used?
2. Further Readings
   • How to Make Rhythm Game in Processing
   • Arduino Internal Pullup
   • Processing Documentation