Pronguino

Processing Pong with Arduino Controllers

Introduction

OK, so we have our basic Prong game — it’s time to transform it into Pronguino by adding Arduino paddle controllers. It’s going to be a simple circuit, but a great start to learn about voltage division, serial communications and bitwise operations.

Scope

Learning

Getting Started

First, we will focus on building the circuit and programming the Arduino UNO, making sure everything compiles and uploads OK.

Recommended

I recommend that you read and run through ‘Project 14 – Tweak the Logo’ in the Arduino Projects Book, as this will give a bit more background on what we are doing here.

Components

All the components you need are in the Arduino Starter Kit.

The Circuit

Assembly

These instruction steps are used to assemble the circuit as shown above, quite straightforward with some added tips:

The Code

Arduino

We could write this code in a few lines in one file, but as I want to make the code more readable, understandable and extensible, I have broken it down into the following files …

I will let the code speak for itself, and take a deeper dive into some areas below.

Plug the Arduino into your PC, upload the sketch, and we are ready for the next step.

Testing

Note: If you have a mobile phone or similar attached to your computer via USB, you may get some spurious results, bear this in mind if you are getting strange movement from paddles with or without Arduino attached.

So, we have the controllers built, code uploaded, and usually you would update the Processing code and spend the next few hours playing Pronguino, right? Or maybe the next few hours debugging two sets of code and an electronic circuit?

We haven’t got the luxury of a user interface on the UNO, but what we do have while connected to the PC is the Serial Monitor, which is opened from the Arduino IDE: Tools → Serial Monitor.

I have added a constant called TESTING, and when set to false, on upload of code, you should see something like this, as you turn the potentiometers, which is the data being written to the serial port.

⸮⸮⸮⸮⸮⸮⸮⸮⸮⸮⸮⸮⸮⸮⸮⸮⸮⸮⸮ѡ⸮⸮⸮⸮pppppP@A23#$$# @PP``acD4$#

If you change TESTING to be true, upload the new code, the setup() will call function resultsHeader() to print some headings, and loop() will continuously print the data being read from each controller via the function resultsDetail(), and the data that would be written, you should see something like below under various conditions ..

Both potentiometers turned to far left …

controllerValue1	controllerValue2	highNibble	lowNibble	data	
0			0			0		0		0
0			0			0		0		0
0			0			0		0		0

Both potentiometers turned to far right …

controllerValue1	controllerValue2	highNibble	lowNibble	data	
15			15			240		15		255
15			15			240		15		255
15			15			240		15		255

Both potentiometers turning to somewhere in the middle …

controllerValue1	controllerValue2	highNibble	lowNibble	data	
11			10			176		10		186
8			10			128		10		138
8			8			128		8		136

Troubleshooting

Hopefully, with the circuit being quite simple, there is not much to go wrong, but the common things to check are as follows ..

Program Storage Space

Just a quick note to those worried about testing code taking up valuable space on the Arduino, the compiler will not include any unreachable code, so when TESTING = false;, the functions resultsHeader() and resultsDetail(...) are not compiled, check console after compiling …

Sketch uses 1952 bytes (6%) of program storage space. Maximum is 32256 bytes. Global variables use 188 bytes (9%) of dynamic memory, leaving 1860 bytes for local variables. Maximum is 2048 bytes.

… in comparison to having TESTING = true; …

Sketch uses 2424 bytes (7%) of program storage space. Maximum is 32256 bytes. Global variables use 260 bytes (12%) of dynamic memory, leaving 1788 bytes for local variables. Maximum is 2048 bytes.

Processing

What’s New

What’s Changed:

Experiment: The paddle movement seems OK when you are just turning the potentiometers at a steady rate, but can sometimes get out of sync. Have a tinker with checkController() in Player class and/or the timing of the outgoing data in Arduino code or incoming data in the Processing code to see if it can be improved.

Play

Take a break, and play one long (we will look into that soon) game of Pronguino.

Challenge: Currently, when turning controller to left the paddle moves up, and turning right moves it down. If you prefer the opposite, without changing the circuit, just edit either the Processing or Arduino code.

Potentiometers

In the context of this circuit the potentiometers are being used as voltage dividers.

Terminal 1 (\(T_1\)) connected to GND
Terminal 2 (\(T_2\)) connected to 5V
Terminal 3 (\(T_3\)) connected to A1 or A2

Given that …

… and turning the potentiometer to various positions, we would get the voltage drop required…

… which is then measured by analog inputs A1 or A2 and converted by the ADC (Analog-to-Digital Converter) into a resolution of 10 bits (0-1023).

Learn: I find it important to get to know your components, and how they work. It helps when things don’t work as planned. Learn some of the equations such as Ohm’s Law and Voltage Division Rule etc.

Bitwise Operations

Reference

Arduino

In the Arduino code we have the following lines in the pronguino loop():

// Convert to nibbles
byte highNibble = (byte) controllerValue1 << 4;
byte lowNibble  = (byte) controllerValue2;
 
// Combine the two nibbles to make a byte
byte data = highNibble | lowNibble;

… where we have read the two values (ranging from 0 – 15) from each controller, and rather than sending these values individually, we will combine them into one byte to send…

Given that …

… to get the highNibble we shift controllerValue1 left 4 bits …

… we are only changing data type of controllerValue2 to get lowNibble, so to get data we bitwise OR highNibble and lowNibble …

Processing

In the Processing code we have two functions in the Functions file:

/**
 * Extracts a high nibble (first four bits) from a byte
 *
 * @param  data  byte to extract nibble from
 */
static int getHighNibble(byte data) {
  return (int) ((data >> 4) & (byte) 0x0F);
}

/**
 * Extracts a low nibble (last four bits) from a byte
 *
 * @param  data  byte to extract nibble from
 */
static int getLowNibble(byte data) {
  return (int) (data & 0x0F);
}

When the serialEvent() function receives the data sent from the Arduino, it needs to be split up to identify the movement of each of the controllers … for controller 1, getHighNibble(byte data) is called …

First the data needs shifting to the right 4 bits …

… and then apply a bitwise AND with 0x0F …

.. and to get value for controller 2 we call getLowNibble(byte data) .. and bitwise AND data with 0x0F ..

Fritzing

Fritzing provides a software tool that allows you to draw schematics, mock up your breadboard, upload code to devices, design PCB layouts and also offers a service to print PCBs. I have used this to produce the schematic and breadboard mock-up for the “controllers”.

Learn: It is definitely worth getting to grips with circuit design and prototyping with tools such as Fritzing, even for the simplest of circuits, as when they become more complex, you want to be focusing on the circuit and not how to use the tool!

The cool thing about doing this using Fritzing, is the schematic and breadboard are continuously checking and modifying each other. For example, if you started with the breadboard and just add the required components on, without any wires, then go to schematic and connect everything up logically, switching back to the breadboard will show dashed lines from pins to sockets as a guide to where the wires should go (known as a ratsnest), and will disappear as wires are added.

Note, as the ratsnest is being created from a logic diagram, they will take the most direct route i.e. joining pins from one potentiometer to the other as they are both connected to GND, and as we don’t want all the wires going from component to component, in this case we would take a wire from each component to a GND socket on the board.

Similarly, if you started with a fully wired up breadboard, and then switched to create schematic, you have to re-arrange the connections and components to create a tidy looking diagram, the connections will highlight red where no connection has been made, and green when all good, ratsnest guides are also created in this view.

This Fritzing file is included in the download for this post.

Tinkercad

Flipped your LED? Fried your chips? Or toasted your breadboard? If you haven’t yet and you’re paranoid about forgetting to put that resistor in, then it is worth taking a look at Tinkercad. Whilst Fritzing suits my needs for schematics and breadboards, I searched around for some free simulation software, and for basic Arduino circuits, this fitted the bill.

It has all the components from Arduino Starter Kit, and more. As you get more daring with your circuits, you may want to try it out first with Tinkercad — it will show you when something blows. Also useful for measuring resistance/voltage etc as you can add a multi-meter.

Tinkercad Limitations:

Code

/**
  Pronguino.ino - Main file for controllers
  
  Tinkercad version

  Parts required:
  - 2 x 10 kilohm potentiometers

  @author  Neil Deighan

*/

// Controller class
class Controller
{
  public:
    Controller() {}
    Controller(int pin) {
      _pin = pin;
    }
    
  	int read() {
      // Reads value from pin, which would be a value mapped from 0 to 5V (0 to 1023)
      int pinValue = analogRead(_pin);

      // Small delay to allow the Analog-to-Digital Converter (ADC) to process
      delay(1);

      // Map the pin value to number between 0 and 15
      int value = map(pinValue, 0, 1023, 0, 15);

      return value; 	
    }
  
    
  private:
    int _pin;
};

// Define constants
const int CONTROLLER_COUNT = 2;
const int CONTROLLER_ONE = 0;
const int CONTROLLER_TWO = 1;
const int CONTROLLER_ONE_ANALOG_PIN = A1;
const int CONTROLLER_TWO_ANALOG_PIN = A2;

// Special constant to turn on / off testing mode
const bool TESTING = true;

// Declare controllers
Controller controllers[CONTROLLER_COUNT];

/**
  Setup the serial communications and controllers
*/
void setup() {

  // Initialize serial communication
  Serial.begin(9600);

  // Create Controllers
  controllers[CONTROLLER_ONE] = Controller(CONTROLLER_ONE_ANALOG_PIN);
  controllers[CONTROLLER_TWO] = Controller(CONTROLLER_TWO_ANALOG_PIN);

  // Print debug headers
  if (TESTING) {
    resultsHeader();
  }

}

/**
  Continuously read/write controller values
*/
void loop() {

  // Read the values from each controller
  int controllerValue1 = controllers[CONTROLLER_ONE].read();
  int controllerValue2 = controllers[CONTROLLER_TWO].read();

  // Convert to nibbles
  byte highNibble = (byte) controllerValue1 << 4;
  byte lowNibble  = (byte) controllerValue2;
  
  // Combine the two nibbles to make a byte
  byte data = highNibble | lowNibble;

  if (TESTING) {
    // Print results detail
    resultsDetail(controllerValue1, controllerValue2, highNibble, lowNibble, data);
  } else {
    // Write the data to serial port
    Serial.write(data);
  }

  // Delay 150 milliseconds
  delay(150);
}

/**
   Print Results Header to Serial Monitor
*/
void resultsHeader() {
  Serial.print("controllerValue1\t");
  Serial.print("controllerValue2\t");
  Serial.print("highNibble\t");
  Serial.print("lowNibble\t");
  Serial.print("data\t");
  Serial.println();
}

/**
   Print Results Detail to Serial Monitor
*/
void resultsDetail(int controllerValue1, int controllerValue2, byte highNibble, byte lowNibble, byte data) {
  Serial.print(controllerValue1); Serial.print("\t\t\t");
  Serial.print(controllerValue2); Serial.print("\t\t\t");
  Serial.print(highNibble); Serial.print("\t\t");
  Serial.print(lowNibble); Serial.print("\t\t");
  Serial.println(data);
  
  // Slow it down a bit, so can be read, waits one second
  delay(1000);
}

This TinkerCad code is included in the download for this post.

Conclusion

We now have Pronguino up and running, with two potentiometer-based Arduino controllers communicating with Processing over serial. Along the way we covered voltage division and analogue-to-digital conversion, packed and unpacked controller values using bitwise operations, and used Fritzing and Tinkercad to design and simulate the circuit. Hopefully the level of detail here gives you a useful reference to look back on. Next up … updating the look with Praint to explore more of what Processing can do.