What would a video game be without sound? Not a very good one! So we are going to add a piezo to the circuit to generate game sounds and also add some processing code, so that when the Arduino UNO is disconnected, sound will play through your computer speakers.

Introduction

After some digging on the web, I managed to find the actual frequency and duration for the sounds used in the original Pong game…

… I have implemented these into the Arduino Pronguino Library Speaker class, and also created Waveform Audio files for each of the game sounds (which are also used in the table above) that are played through the Speaker class in the Processing code, these .wav files were generated using an online tone generator, there are quite a few to choose from, and will ask for some/all of the following parameters…

Challenge: Find or create more modern versions of these game sounds, maybe tennis / table tennis sounds ?

Scope

Learning

Getting Started

Recommended

I recommend reading through the Servuino and subsequent posts, as we are building circuit on top of the one built in Servuino.

Components

All the components that you need listed here are in the Arduino Starter Kit, as mentioned above, this is being built on top of previously built circuit, see existing components list, as well as the following…

Note: I have been specific on the length in particular on the above wires, mainly for the smaller ones that are used just on the breadboard, so they are as flat as possible.

The Circuit

Fritzing Breadboard - Sounduino

Assembly

These instruction steps are used to assemble the circuit as shown above.

Note: It is recommended not to use digital pins 0 and 1, due to them being used by USB serial communication.

The Code

Arduino

What’s New

There have been no new sketch files added.

What’s Changed

Component Library

With the introduction of the piezo, code has been added to the Component Library.

Pronguino Library

The concept of a “console”, which has the Speaker and Controllers “attached”, this has been encapsulated in the Pronguino Library GameConsole class.

Pronguino Sketch

Testing

As previously, if you change TESTING to be true, upload the new code, you will see the same results in the serial monitor as in Servuino Testing, but will now also play sounds depending on the button(s) pressed as follows…

Troubleshooting

Check the following, as well as items in previous Troubleshooting guide….

Challenge: As I write the code, sometimes I have little ideas, notes to improve or fix things, see if you can tackle any that you see a the top of some of the code files, feel free to comment any questions you may have.

Processing

What’s New

After some experimentation with trying to create the correct tones / and also .wav playback using the standard Sound Library, I ended up using the Minim library, which simplified the process of .wav playback.

You will need to install the Minim library from the Processing IDE…

Sketch -> Import Library -> Manage Libraries… and search for “minim”

Manage Libraries - Minim

I have added a Speaker interface along with implementations for an ExternalSpeaker (Arduino) and InternalSpeaker (Computer), and also introduced the Console interface, with implementations for ExternalConsole and InternalConsole, to look after the controllers and speaker.

What’s Changed

Troubleshooting

Challenge: See if you can utilise the standard Sound library to either produce the tones or playback .wav files, I tried a few things .. SqrOsc, AudioSample and SoundFile, but couldn’t quite get them to work as I would expect, I may have missed something.

Play

Break time… Turn off testing mode, and re-upload…. volume up (if not using UNO) .. no change in controls…

Rules

No functional changes to game, so rules are the same..

Piezo

A piezo sounder contains a piezo electric vibration plate within a moulded case. Sound is emitted when a voltage is applied and the piezo element inside the case vibrates. I won’t get into the details of how it works, just keeping simple for the context of this project.

Terminal 1 (\(T_1\)) connected to GND.

Terminal 2 (\(T_2\)) connected to digital pin D10.

The tone() function generates a square wave where the duty cycle is 50% (HIGH half the time, LOW half the time), at a given frequency in cycles per second (Hertz), for a specified duration in milliseconds to the required pin, in this case digital pin D10.

Learn: I find it important to get to know your components, and how they work, it helps when things don’t work as planned, look up the datasheets of the components to get data to be used to equations such as Ohms law to make sure you choose correctly.

Conclusion

A reasonably easy addition to this project. We have added a piezo buzzer to the circuit, used the tone() function to generate game sounds at the accurate frequencies from the original Pong game, and introduced a software fallback using the Minim library so that sounds are heard regardless of whether the Arduino is connected. Throughout these posts I have hopefully covered some of the very basics of a classic retro game — building the circuit, writing the software, and now bringing it to life with sound. I will probably be referring back to some posts or sections in future projects.

Introduction

In this post, we are going to look at creating some form fields (with a dive into more object oriented methods), which have been used to create a menu and an options screen to change some of the settings.

Scope

Learning

Getting Started

Recommended

I recommend that you go through the previous posts for this project, although completing the Arduino part of the project is not essential.

The Code

Processing

What’s New

The first thing I wanted to do in this stage was to move some of the game operations away from pronguino sketch into a new class Game. Also added a starting Menu, which allows us to change Options before we play.

What’s Changed

Most of the files have had a minor change due to moving Options into Game as a child property, below are the significant changes…

Challenge: I have started adding TODO’s at top of some of the files, adding items I’d like to do, should do, or may do in the future. Sometimes when I am putting the code together for these posts it is easy to get carried away, but I have to find the cut-off point, so feel free to scan these and have a go yourself.

Play

The rules haven’t changed, keys and controls are still the same, now you can select Options from the Menu and change your name(s), set speed, or switch on debugging without changing the code!

Forms

When a Processing application starts it runs setup() once, and then runs the code continuously in the loop draw() method, where the objects get displayed. With two new “forms” being added I have added some further state constants….

static final int STATE_MENU = 5;      // Game menu showing
static final int STATE_OPTIONS = 6;   // Game options showing

… which get set accordingly … at the start…

void setup() {
   ...
   game.state = Constants.STATE_MENU;
   ...
}

… and when Options button clicked…

void optionsButtonClicked() {
  game.state = Constants.STATE_OPTIONS;
}

.. and these are used to determine what gets displayed during draw() method…

// Display ..
switch(game.state) {
  case Constants.STATE_MENU:
    background(game.options.backgroundColour);
    menu.display();
    break;
  case Constants.STATE_OPTIONS:
    background(game.options.backgroundColour);
    game.options.display();
    break;
  default:
    ...
    // Game Objects
    ...
    break;
}

In preparation for adding controls onto the form, we need to know when certain events happen while the form is shown, these events can only be triggered in the main sketch (pronguino) and need to be cascaded down to the form … i.e.

void mouseClicked() {
  ...
  if (game.state == Constants.STATE_MENU) {
    // Cascade down
    menu.clicked();
  }
}

.. and so the clicked() method is called in Menu class … it is in this method, the form still doesn’t know what has been clicked so checks each controls clicked() method to identify, and act accordingly.

void clicked() {
  // Check if options button clicked ..
  if(this.optionsButton.clicked()) {
    // Call event method     
    optionsButtonClicked();
  }
  ...
}

If any of the controls used on a form have the validate() method and valid property implemented, a valid() method can be added to check all the relevant controls, which in this case is used to disable the OK button on the options form, to prevent invalid data being saved…

boolean valid() {
  // Currently only input controls need validation ... 
  for (int id=0; id < Constants.PLAYER_COUNT; id++) {
    // ... this will return false if any of the controls are invalid
    if (!this.playerNameInputs[id].valid || !this.playerUpInputs[id].valid || !this.playerDownInputs[id].valid) {
      return false;
    }
  }
  // returns true on completion of loop, nothing invalid
  return true;
}

Controls

Processing is great for fast visual imagery and for games too, sometimes though you need to be able to interact with an application to adjust settings or enter data etc. There are a number of libraries available for such form controls, these would have been written in Java (which is what Processing language is based on).

As an exercise I decided to put some together using the “out-of-the-box” language, (will have a look at building own Java library another time) this allows me to further explore keyboard and mouse events, graphic/text combinations, and is also a good example to demonstrate some object-oriented methods.

Control	Description	Enabled	Disabled
Button	Simple push button.
Input	Simple text entry.
Toggle	Used for true/false values
Slider	Choose value within a range by dragging slider along gauge.
Frame	Used to group related controls / text.		N/A

In this section we will look into behavior and drawing of the controls, a further look into how they are put together will be covered more in Object-Orientation …

All the controls that extend the Control class will have the following properties… although not all are necessarily used…

Also all the controls will share common functionality through these Control methods… although not all are necessarily called… and some may even override implementation…

Button

… the ButtonControl requires an additional property…

.. and overrides the following method from Control …

After declaring the ButtonControl, we create it in the containing “form” class … in this case Options …

ButtonControl okButton;
...
this.okButton = new ButtonControl(305,450,75,25,"OK");

… the additional property is set in the controls constructor, the other properties are set by calling super(…) which calls the relevant constructor in the Control class.

class ButtonControl extends Control {
  ...
  String caption;
  ...
  ButtonControl(float x, float y, float w, float h, String caption) {
    // Call the constructor of the superclass
    super(x, y, w, h);
    // Sets own properties 
    this.caption = caption;
  }
  ...
}

When the mouseClicked() event is triggered in the pronguino sketch, and the state is set to STATE_OPTIONS, the following method is called in the Options class…

void clicked() {
  ...
  if(this.okButton.clicked()) {
    this.okButtonClicked();
  }
  ...
}

.. which will then check with the following method in the Control class whether this control has been clicked()…

boolean clicked() {
  this.hasFocus = this.over();
  return this.hasFocus;
}

.. it will do this by calling the over() method in the Control class, which will check to see if the mouseX and mouseY are within the boundary of the control, ignoring this check if control disabled…

boolean over()  {
  if(this.disabled) {
    return false;
  }    
  if (mouseX >= this.x && mouseX <= this.x+this.w && 
      mouseY >= this.y && mouseY <= this.y+this.h) {
    return true;
  } else {
    return false;
  }  
}

When the button gets drawn, it uses the disabled property and over() method to determine which colours to use, one notable method being used here is textAlign() … it tells the following text() method how to interpret the x, y parameters .. in this case the CENTER point is in the middle of the text.

void display() {
  // Border colour depending on disabled state        
  stroke(this.disabled ? Constants.CONTROL_COLOUR_DISABLED : Constants.CONTROL_COLOUR_ENABLED);
   
  // Draw button, colour depending on whether mouse over
  fill(this.over() ? Constants.CONTROL_COLOUR_ENABLED : Constants.CONTROL_COLOUR_BACKGROUND);
  rectMode(CORNER);
  rect(this.x, this.y, this.w, this.h, 5);
  
  // Text, colour depending on disabled state / or mouse over
  fill(this.over() ? Constants.CONTROL_COLOUR_BACKGROUND : this.disabled ? Constants.CONTROL_COLOUR_DISABLED : Constants.CONTROL_COLOUR_ENABLED);
  textAlign(CENTER,CENTER);
  text(this.caption, this.x+(this.w/2), this.y+(this.h/2)-2);
}

Input

… the InputControl requires additional properties…

… and the following additional methods…

.. and overrides the following method from Control …

After declaring the InputControl, in this case an array, we create it in the containing “form” class … in this case Options …

...
InputControl[] playerNameInputs;
...
this.playerNameInputs[Constants.PLAYER_ONE] = new InputControl(450,120,200,20, "Name", 10, this.names[Constants.PLAYER_ONE]);
...

… with the exception of valid , … the additional properties are set in the controls constructor, the other properties are set by calling super(...) which calls the relevant constructor in the Control class.

InputControl(float x, float y, float w, float h, String label, int maxLength, String value) {
  super(x, y, w, h, label);
  this.maxLength = maxLength;
  this.value(value);    
}

… a setter method value(...) is used to set the value …

void value(String value) {
  this.value = value;
  this.validate();
}

… which also calls the validate() method, which sets the valid property accordingly …

void validate() {
  this.valid = (this.value.length() > 0);
}

When the mouseClicked() event is triggered in the pronguino sketch, and the state is set to STATE_OPTIONS, the following method is called in the Options class …

void clicked() {
  ...  
  for (int id=0; id < Constants.PLAYER_COUNT; id++) { 
    this.playerNameInputs[id].clicked();
    ...
  }
  ...
}

… which will then check with the following method in the Control class whether this control has been clicked() … however, note how this method is called slightly differently, we are not interested in the result of method, as we don’t have to do anything at this level.

Note: This is a good way to get around the fact that the following method implementations are not allowed i.e. two methods of the same name that have different return types i.e. …

  void clicked() { … }
  boolean clicked() { … }

.. as with ButtonControl the clicked() method in Control class will get called .. however, this time we are more interested in the hasFocus property …

boolean clicked() {
  this.hasFocus = this.over();
  return this.hasFocus;
}

When the keyTyped() event is triggered in the pronguino sketch, and the state is set to STATE_OPTIONS, the following method is called in the Options class…

void typed(char typedKey) {
  ...
  for (int id=0; id < Constants.PLAYER_COUNT; id++) {
    this.playerNameInputs[id].typed(typedKey);
    ...
  }
}

.. which will then call typed(char typedKey) in the InputControl class, if the control has focus, adds typedKey to value, checking the maxLength, or if BACKSPACE is typed, removes last character from value, continuously checking if value is valid…

void typed(char typedKey) {
  if(this.hasFocus) {      
    if(typedKey==BACKSPACE && this.value.length() > 0) {
      this.value = this.value.substring(0, this.value.length()-1);
    } else {
      if(this.value.length() < this.maxLength && typedKey != BACKSPACE) {
        this.value += typedKey;
      }
    }             
  }  
  this.validate();
}

Using basic drawing methods, coloured based on disabled and valid properties, note when drawing the value, adds a _ afterwards when focused, acting as a cursor …

void display() {
    
  // Label
  fill(Constants.CONTROL_COLOUR_LABEL);
  textAlign(RIGHT, TOP);
  text(this.label, this.x, this.y);

  // Border
  if(this.valid) {
    stroke(this.disabled ? Constants.CONTROL_COLOUR_DISABLED : Constants.CONTROL_COLOUR_ENABLED);
  } else {
    stroke(Constants.CONTROL_COLOUR_INVALID);
  }
  
  // Input area
  fill(Constants.CONTROL_COLOUR_BACKGROUND);
  rectMode(CORNER);
  rect(this.x, this.y, this.w, this.h, 5);
    
  // Value
  fill(this.disabled ? Constants.CONTROL_COLOUR_DISABLED : Constants.CONTROL_COLOUR_ENABLED);
  textAlign(LEFT,CENTER);
  // Add a 'cursor' after value if it has focus
  text(this.value + (this.hasFocus ? '_' : ""), this.x+10, this.y+(this.h/2)-1);
}

Challenge: Have a go at either amending or extending the InputControl, to allow only number relating characters i.e. 0-9, ‘.’, ‘-‘ etc, extending is probably the better option, then you don’t ‘break’ InputControl .. just create a new one called say ‘NumberInputControl’ ? You could add a FrameControl titled ‘Net’ and put all the net related options here ?

Toggle

… the ToggleControl requires an additional property…

… and the following additional method…

.. and overrides the following methods from Control …

After declaring the ToggleControl, we create it in the containing “form” class … in this case Options…

...
ToggleControl debugEnabledToggle;
...
this.debugEnabledToggle = new ToggleControl(220,120,40,20, "Enabled", this.debug.enabled);

… the additional property is set in the controls constructor, the other properties are set by calling super(...) which calls the relevant constructor in the Control class.

ToggleControl(float x, float y, float w, float h, String label, boolean value) {
  super(x, y, w, h, label);
  this.value(value);
}

… a setter method value(...) is used to set the value …

void value(boolean value) {
  this.value = value;
}

When the mouseClicked() event is triggered in the pronguino sketch, and the state is set to STATE_OPTIONS, the following method is called in the Options class…

void clicked() {
  ...  
  this.debugEnabledToggle.clicked();
  ...
}

.. when the clicked() method in the ToggleControl class gets called .. first it checks with the superclass to see if control has been clicked, if it has, it uses the logical NOT operator to invert the current boolean value.

boolean clicked() {
  if(super.clicked()) { 
    this.value(!this.value);
    return true;
  } else {
    return false;
  }
}

Using basic drawing methods, coloured based on disabled and value properties…

void display() {
    
  // Label
  fill(Constants.CONTROL_COLOUR_LABEL);
  textAlign(RIGHT, TOP);
  text(this.label, this.x, this.y);
    
  // Outline
  stroke(this.disabled ? Constants.CONTROL_COLOUR_DISABLED : Constants.CONTROL_COLOUR_ENABLED);    
  fill(Constants.CONTROL_COLOUR_BACKGROUND);
  rectMode(CORNER);
  rect(this.x, this.y, this.w, this.h, this.h/2);
    
  // Switch
  noStroke();
  ellipseMode(CORNER);
  if(this.value) {
    fill(this.disabled ? Constants.CONTROL_COLOUR_DISABLED  : Constants.CONTROL_COLOUR_ON);
    ellipse(this.x+(this.w/2)+2, this.y+2, this.h-3, this.h-3);
  } else {
    fill(this.disabled ? Constants.CONTROL_COLOUR_DISABLED  : Constants.CONTROL_COLOUR_OFF);
    ellipse(this.x+2, this.y+2, this.h-3, this.h-3);
  } 
}

Slider

… the SliderControl requires additional properties…

… and the following additional methods…

.. and overrides the following method from Control …

After declaring the SliderControl, we create it in the containing “form” class … in this case Options…

...
SliderControl ballSpeedSlider;
...
this.ballSpeedSlider = new SliderControl(140, 340, 30, 20, "Ball", 1.0, 10.0, this.ballSpeed);
...

… the additional properties are set in the controls constructor, the other properties are set by calling super(...) which calls the relevant constructor in the Control class.

SliderControl(float x, float y, float w, float h, String label, float minValue, float maxValue, float value) {
    super(x, y, w, h, label);
    this.minValue = minValue;
    this.maxValue = maxValue;
    this.value(value);    
    this.gaugeW = ((this.maxValue - this.minValue) / 2) * this.w;
    this.sliderButton = new SliderButtonControl(this, map(this.value, this.minValue, this.maxValue, this.x+(this.w/2), this.x+this.gaugeW-(this.w/2)), this.y, this.w, this.h);  
    }

… a setter method value(…) is used to set the value …

void value(float value) {
  this.value = value;
}

When the mousePressed(), mouseReleased() or mouseDragged() events are triggered in the pronguino sketch, and the state is set to STATE_OPTIONS, the following methods are called in the Options class…

void pressed() {
  ...
  this.ballSpeedSlider.pressed();
  ...
}

void released() {
  ...
  this.ballSpeedSlider.released();
  ...
}

void dragged() {
  ...
  this.ballSpeedSlider.dragged();
  ...
}

.. which will then call the pressed(), released() or dragged() respectively in the SliderControl class … as it its the child class SliderButtonControl that is more interested in these events happening the call is passed on…

void pressed() {
  this.sliderButton.pressed();
}

void released() {
  this.sliderButton.released();
}

void dragged() {
  this.sliderButton.dragged();
}

.. and then the display() method draws the control, note the call to the child sliderButton.display() method.

void display() {
  
   // Label
   fill(Constants.CONTROL_COLOUR_LABEL);
   textAlign(RIGHT, CENTER);
   text(this.label, this.x, this.y);
    
   // Gauge
   stroke(this.disabled ? Constants.CONTROL_COLOUR_DISABLED : Constants.CONTROL_COLOUR_ENABLED);
   line(this.x, this.y, this.x+this.gaugeW, this.y);
    
   // Slider Button
   this.sliderButton.display();
}

SliderButtonControl

The SliderButtonControl is a child class of SliderControl, and only used by its parent to manage the buttons behaviour … it has no use outside of this …

class SliderControl extends Control {

  private class SliderButtonControl extends Control {
 
    // So we can access parent properties
    SliderControl parent;
    ...
  }
  ...
}

… the SliderButtonControl requires additional properties …

… and the following additional methods …

.. and overrides the following methods from Control …

After declaring the SliderButtonControl, we create it in its parent class … SliderControl …

...
SliderButtonControl sliderButton;
...
this.sliderButton = new SliderButtonControl(this, map(this.value, this.minValue, this.maxValue, this.x+(this.w/2), this.x+this.gaugeW-(this.w/2)), this.y, this.w, this.h);
...

… the additional properties are set in the controls constructor, the other properties are set by calling super(...) which calls the relevant constructor in the Control class.

SliderButtonControl(SliderControl parent, float x, float y, float w, float h) {
  super(x, y, w, h);
  this.parent = parent;
  this.grabbed = false;
}

.. when the pressed() method in the SliderButtonControl class gets called .. the grabbed flag gets set according to result of over() …

void pressed() {
  this.grabbed = this.over();
}

.. when the released() method in the SliderButtonControl class gets called .. the grabbed flag gets set to false …

void released() {
  this.grabbed = false;
}

.. when the dragged() method in the SliderButtonControl class gets called .. the x co-ord of the button gets continuously calculated by keeping the mouseX value within the bounds of its parent, using the constrain() method, and then calculates the new value for SliderControl, based on the new x co-ord …

void dragged() {
  if(this.grabbed) {
    this.x = constrain(mouseX, this.parent.x+(this.w/2), this.parent.x+this.parent.gaugeW-(this.w/2));
    this.parent.value(round(map(this.x, this.parent.x+(this.w/2), this.parent.x+this.parent.gaugeW-(this.w/2), this.parent.minValue, this.parent.maxValue)));           
  }
}

… due to this controls x,y being at the center, a slightly different version of the over() method was required, so it gets overridden here …

boolean over()  {
  if(this.disabled) {
    return false;
  }  
  if (mouseX >= this.x-(this.w/2) && mouseX <= this.x+(this.w/2) && 
      mouseY >= this.y-(this.h/2) && mouseY <= this.y+(this.h/2)) {
    return true;
  } else {
    return false;
  }  
}

.. and then the display() method draws the slider button …

void display() {

  // Slider Button
  fill(this.parent.disabled ? Constants.CONTROL_COLOUR_DISABLED : Constants.CONTROL_COLOUR_SLIDER);
  rectMode(CENTER);
  rect(this.x, this.y, this.w, this.h, this.h/2);
      
  // Value
  fill(this.parent.disabled ? Constants.CONTROL_COLOUR_BACKGROUND : Constants.CONTROL_COLOUR_ENABLED );
  textAlign(CENTER, CENTER);
  text(str(this.parent.value), this.x, this.y);
}

Challenge: Have a go at creating a new, more specific control to adjust the size of the ball, you could create a new file to add this into, called, say… GameForm, keeping Form to be used for generic type controls. You could call this control something like BallSliderControl, that extends SliderControl (also adding BallSliderButtonControl, which would be the ball itself), adding additional properties such as ballRadius, and overriding methods such as over() and display(), where, instead of showing value, change the size of ‘ball’ etc. You could also do something similar with the the paddleHeight, drawing the paddle as the ‘gauge’ ?

Frame

The FrameControl requires an additional property…

… no additional methods are required, just the following overridden method…

After declaring the FrameControl, we create it in the containing “form” class … in this case Options …

...
FrameControl debugFrame;
...
this.debugFrame = new FrameControl(80,100,300,200,"Debugging");
...

… the additional property is set in the controls constructor, the other properties are set by calling super(...) which calls the relevant constructor in the Control class.

FrameControl(float x, float y, float w, float h, String title) {
  super(x, y, w, h);
  this.title = title;      
}

.. the display method simply draws a rounded rectangle, note when drawing the title, a background coloured rectangle is drawn first, based on the width of the title in pixels, based on the current font size using the method textWidth().

void display() {
    
  // Border
  stroke(Constants.CONTROL_COLOUR_FRAME);
  noFill();
  rectMode(CORNER);
  rect(this.x, this.y, this.w, this.h, 5);

  // Title background
  noStroke();
  fill(Constants.CONTROL_COLOUR_BACKGROUND);    
  rect(this.x+10, this.y-10, textWidth(this.title)+2, 20);  
    
  // Title 
  fill(Constants.CONTROL_COLOUR_FRAME);
  textAlign(LEFT,CENTER);
  text(this.title, this.x+10, this.y);
}

Object-Orientation

Object-Orientation is a huge subject… and definitely not completely covered here, however, will cover some of the concepts within the context of this project.

Object

An object is an entity that has state and behaviour, in this project for example we have the following objects along with examples of some of their state and behaviour…

.. each one of these is an instance of a class…

Class

A class is basically a blueprint from which an object is instantiated… each class can include fields, methods and constructors, these are some examples of classes used in this project…

Note: I have used the term ‘fields’, however there are other terms used with different meaning depending on the context i.e. properties, attributes etc, as Processing ignores scoping keywords such as private and public etc, any field declared in a class will be exposed as properties anyway.

.. in most cases objects are instantiated with the new keyword… so for players to be created…

for (int index=0; index < Constants.PLAYER_COUNT; index++) {
  players[index] = new Player(index);
}

..and the paddle…

Player(int index) {
  ...
  // Create Paddle
  this.paddle = new Paddle(this);
  ...        
}

Encapsulation

The aim of encapsulation is to prevent some internal fields of the object being changed directly by “hiding” them, and then provide (or not provide, as they maybe fields that are just used internally) the means to access them via ‘getter’ and ‘setter’ methods.

As mentioned in the note above, Processing ignores scoping keywords such as private and public, so we can not really implement encapsulation, however, I will still go through some examples, as I am hoping to convert the form controls into a Java library, and this is where encapsulation will really matter.

A good example to show is the InputControl class …

class InputControl extends Control {
  
  String value;
  boolean valid;
  ...
  // Constructor
  InputControl(float x, float y, float w, float h, String label, int maxLength, String value) {
    ...
    this.setValue(value);    
  }
  ...
  // Setter Method
  void setValue(String value) {
    this.value = value;
    this.validate();
  }
  ...
  // Validation
  void validate() {
    this.valid = (this.value.length() > 0);
  }

… here, I know that I can ‘get’ the value quite easily from an object of this class …

for(int id = 0; id < Constants.PLAYER_COUNT; id++) {
  this.names[id] = this.playerNameInputs[id].value;
  ...
}

.. however, the trouble starts if the value field were to be set directly, bypassing the setter method, for example …

for(int id = 0; id < Constants.PLAYER_COUNT; id++) {
  this.playerNameInputs[id].value = this.names[id];
}

.. if this were done, the validate() method would not get called, allowing invalid data to be entered, not good! So we use a ‘setter’ method …

void setValue(String value) {
  this.value = value;
  this.validate();
}

.. now, when I use the following, which has been implemented, the validate() method gets called …

for(int id = 0; id < Constants.PLAYER_COUNT; id++) {
  this.playerNameInputs[id].setValue(this.names[id]);
}

If this class was to be written in Java, it should look something like this …

class InputControl extends Control {
  
  private String value;    // Hide the value, preventing access directly
  ...
  private boolean valid;   // This should only be set internally
  ...
  // Constructor
  InputControl(float x, float y, float w, float h, String label, int maxLength, String value) {
    ...
    this.setValue(value);    
  }
  ...
  // Setter method for value
  public void setValue(String value) {
    this.value = value;
    this.validate();
  }

  // Getter method for value
  public String getValue() {
    return this.value;
  }
  ...
  // Getter method for valid
  public boolean isValid() {
    return this.valid;
  }

  // Validation, only to be called internally
  private void validate() {
    this.valid = (this.value.length() > 0);
  }

Abstraction

Abstraction is a bit like saying, here is what you have got to do, I don’t care how you’re going to do it, but I might do some of it for you.

In this project that plays out in two layers. The IControl interface says “here is what you have got to do” — any control must have over(), clicked() and display(). The Control abstract class then says “I’ll do some of it for you” — it implements over() and clicked() with common behaviour, but leaves display() as abstract, because only the specific control knows how it should be drawn.

Interface

An interface is in essence a contract for any class that implements it has to follow, in this project we have the following interface…

interface IControl {
  boolean over();
  boolean clicked();
  void display();
}

.. so any class that implements this interface, has to create each method, whether it be abstract or non-abstract…

abstract class Control implements IControl {...}

It may be that in the future, I added some kind of read-only or visual control that doesn’t need over() and clicked(), just display() … I could then split the above interface to something like …

interface IControl {
  void display();
}

interface IClickableControl {
  boolean over();
  boolean clicked();
}

.. and the classes that implemented these would look like this …

// A visual only control
abstract class Control implements IControl {...}

// A Clickable control, but also needs to be a visual one
abstract class ClickableControl implements IControl, IClickableControl {...}

.. using interfaces is useful for expanding on classes without breaking existing code, and also if we were to have had a method that needs to do something with any of our controls, we could use …

void someMethod(IControl someControl) { ... }

… which would accept as an argument any object that was created from a class that implements IControl.

Abstract Class

An abstract class is basically creating our base (or superclass) class from which other classes will be derived from, in the case of this project, we have the Control class, which is….

• defining the common fields (i.e. x, y, w, h).
• defining and implementing non-abstract methods with common functionality (i.e. over, clicked)
• defining abstract method, that needs to be implemented by derived classes (i.e. display)

abstract class Control implements IControl {
  float x;
  float y;
  float w;
  float h;
  String label;
  boolean hasFocus = false;
  boolean disabled = false;
  ...
  boolean over()  {
    if(this.disabled) {
      return false;
    }    
    if (mouseX >= this.x && mouseX <= this.x+this.w && 
        mouseY >= this.y && mouseY <= this.y+this.h) {
      return true;
    } else {
      return false;
    }  
  }
  ...
  boolean clicked() {
    this.hasFocus = this.over();
    return this.hasFocus;
  }
  ...
  abstract void display(); 
}

Abstract classes cannot be instantiated, so doing something like this would not be allowed …

Control control = new Control(...);

Inheritance

Inheritance is where one class extends another, inheriting all of its properties and methods, these are the various types of inheritance…

Single Inheritance

There isn’t an example of single inheritance in this project, where one class is extended only once by another class.

Multiple Inheritance

Processing or Java does not support multiple inheritance, where one class can extend two or more other classes.

Hierarchical Inheritance

Hierarchical inheritance, is where many classes are derived from the same class, in the Forms file, all of the controls here are extended from the Control class.

Below is a simple example, showing the relevant code of the ButtonControl class, in this case all of the properties will be available, the over() and clicked() methods do not need to be implemented, but their functionality is inherited from the Control class, the only code that needs to be added is any additional properties of its own i.e. caption, and to implement the abstract method display()..

class ButtonControl extends Control {
  // Extra property required for button control
  String caption;
  ...
  // Implements the abstract method defined in Control  
  void display() {
    ...
    // Code to draw button
    ...
  } 
}

Multilevel Inheritance

Multilevel inheritance is where a class is derived from another already derived class, although there are no examples of this type, a challenge was set earlier in post that would use this type of inheritance, here is a bit of a spoiler …

class BallSliderControl extends SliderControl {...}

Polymorphism

Polymorphism, the word, is Greek, which translates roughly to “multiple or many forms”, so in the context of object-orientation we are transforming a class into different (but related) classes by changing the underlying behaviour of its methods. There are two types of polymorphism…

Compile Time

Compile time polymorphism is achieved using overloading, below, shows two overloaded constructors for the Control class, this allows any controls extending this to implement in two different ways, in this example a control with a label, and a control without…

Control(float x, float y, float w, float h, String label) { ... }

Control(float x, float y, float w, float h) { ... }

..so in the case of the ToggleControl, for example, the constructor calls super (…) which uses the relevant constructor of Control class (the superclass), and then sets its own properties…

class ToggleControl extends Control {
  boolean value;
  ...
  ToggleControl(float x, float y, float w, float h, String label, boolean value) {
    super(x, y, w, h, label);
    this.value(value);
  }
  ...
}

.. and in the case of the FrameControl, for example, which doesn’t display a label, it has it’s own property title, it only requires the use of x, y, w and h, which get set by calling super(...) which uses the relevant constructor of Control …

class FrameControl extends Control {
  String title;
  ...
  FrameControl(float x, float y, float w, float h, String title) {
    super(x, y, w, h);
    this.title = title;      
  }
  ...
}

As well as constructors other methods can be overloaded, as in this case with the InputControl, we have setValue( ... ), the first overload accepts a String, and then validates, the second one allows a char to be passed in, and calls the other with char converted…

void setValue(String value) {
  this.value = value;
  this.validate();
}
...
void setValue(char value) {
  this.setValue(str(value));
}

Run Time

Run time polymorphism is achieved by overriding methods, where a subclass provides the specific implementation of a method declared in its superclass.

One example is in the SliderButtonControl, where the over() method needs to do the check for mouse over a little different from what was in Control class…

boolean over()  {
  // code to do something different than what was implemented on Control
}

… another example is in the ToggleControl, with clicked() , however, this time instead of replacing the implementation completely, it checks with the parent method first using super.clicked(), and continues with setting the value if true …

boolean clicked() {
  if(super.clicked()) { 
    this.value(!this.value);
    return true;
  } else {
    return false;
  }
}

.. and finally, with all the classes derived from Control, they are to be drawn differently by overriding the method display(), which in the Control class had no implementation at all …

void display() {
  // draw the specific control here
}

File Handling (JSON)

Up until now all the options of the game have been hard coded into the Options class constructor, and we now have form to change some of them, but we need to keep these settings for when we close game and play again next time.

Below is the contents of options.json file located in the /data folder, it is formatted using JSON (JavaScript Object Notation)…

{
  "debug": {
    "playerHitsBall": true,
    "paddleHitsBoundary": false,
    "ballReposition": true,
    "ballHitsBoundary": false,
    "enabled": false
  },
  "players": [
    {
      "name": "Bill",
      "id": 0,
      "up": "q",
      "down": "a"
    },
    {
      "name": "Ben",
      "id": 1,
      "up": "p",
      "down": "l"
    }
  ],
  "ballSpeed": 5,
  "paddleSpeed": 6
}

Reading

.. in the Options class, the method read() loads the file into a JSONObject…

JSONObject optionsData;
...
this.optionsData = loadJSONObject("data/options.json");

.. and uses various methods to get the values of the keys from optionsData…

JSONObject debugOptions = optionsData.getJSONObject("debug");
this.debug.enabled = debugOptions.getBoolean("enabled");
...
this.ballSpeed = optionsData.getFloat("ballSpeed");
...
JSONArray playersOptions = optionsData.getJSONArray("players");

Writing

.. in the Options class, the method write() sets the values of the keys in optionsData…

this.optionsData.getJSONObject("debug").setBoolean("enabled",this.debug.enabled);
...
this.optionsData.setFloat("paddleSpeed", this.paddleSpeed);
...
playerOption.setString("name", names[id]);

… and saves optionsData back to the file…

saveJSONObject(this.optionsData, "data/options.json");

Conclusion

Ok, so that was quite a chunky post, but hopefully quite a useful one. We have gone from building a set of interactive form controls from scratch, to wiring them up with mouse and keyboard events, all the way through to persisting settings with JSON file handling.

Along the way the project has been a good vehicle for exploring some core object-orientation concepts — encapsulation keeping data safe behind setter methods, abstraction through interfaces and abstract classes defining contracts for our controls, inheritance letting all the controls share common behaviour from the Control superclass, and polymorphism allowing each control to override and extend that behaviour in its own way.

It is also worth noting that although Processing does not enforce access modifiers like private and public, writing the code as if it did — using getter and setter methods, keeping validation internal — is good practice and will matter if the form controls ever get converted into a proper Java library.

What next? There is something missing, something that all video games should have… Next up … Sounduino.

Introduction

Time to add a few more components to the circuit, add some additional functionality and have a bit more of a tidy up in the code, adding game state and “event” driven in areas. Also introducing two-way communications between PC and Arduino UNO and building a code library.

Currently the game just starts automatically and the ball moving part-randomly at the beginning, so adding the ability for user to control the serve, pause and resume the game.

Scope

Learning

Getting Started

Recommended

I recommend reading through the Pronguino post, as we are building circuit on top of the result of this.

Components

All the components that you need listed here are in the Arduino Starter Kit, as mentioned above, this is being built on top of previously built circuit, see existing components list, as well as the following…

Note: I have been specific on the length in particular on the above wires, mainly for the smaller ones that are used just on the breadboard, so they are as flat as possible.

The Circuit

Fritzing Breadboard - Servuino

Assembly

These instruction steps are used to assemble the circuit as shown above, a little more tricky than previous, you need a steady hand.

Note: It is recommended not to use digital pins 0 and 1, due to them being used by USB serial communication.

The Code

Arduino

What’s New

Component Library

As some new components have been introduced, I have added a low level library containing classes to encapsulate basic components called Component.

Pronguino Library

… also a new project specific library called Pronguino, that utilizes the Component library, for example, to convert raw data from components into usable data i.e. controller value.

What’s Changed

Pronguino Sketch

Creating libraries has a number of benefits, such as, being able to re-use code, keep the main sketch a lot less cluttered, easier to read.

Within the code download, there is a folder called arduino/libraries, inside there are two folders called Component and Pronguino, copy these to the libraries folder in the location specified from IDE menu option … File -> Preferences -> Settings -> Sketchbook location ….

Now, you should only need to open the Pronguino sketch and compile, you may have to restart IDE. You won’t see these libraries in the Library Manager as they are just local. maybe in time I will publish a library, and talk you through that.

Testing

As previously, if you change TESTING to be true, upload the new code, the setup() will call function resultsHeader() to print some headings, and will also read the initial values of the two controllers, and the state of the buttons, so if you turn both potentiometers to the left, clear the serial monitor, and press the reset button on UNO .. you should see the following result.

controllerValue1 buttonState1 highNibble controllerValue2 buttonState2 lowNibble data 1 0 16 1 0 1 17 1 0 16 1 0 1 17

The loop() function is now continuously reading from each controller and button, checking for a change in any of the values, when a change is detected, resultsDetail() will print the values, , note the bold values that change, so …

Turn left potentiometer to right a bit …

controllerValue1 buttonState1 highNibble controllerValue2 buttonState2 lowNibble data … 1 0 16 1 0 1 17 2 0 32 1 0 1 33 3 0 48 1 0 1 49

Press and release the left button …

controllerValue1 buttonState1 highNibble controllerValue2 buttonState2 lowNibble data …
3 0 48 1 0 1 49 3 1 176 1 0 1 177 3 0 48 1 0 1 49

Turn right potentiometer to right a bit …

controllerValue1 buttonState1 highNibble controllerValue2 buttonState2 lowNibble data …
3 0 48 1 0 1 49 3 0 48 2 0 2 50 3 0 48 3 0 3 51

Press and release the right button …

controllerValue1 buttonState1 highNibble controllerValue2 buttonState2 lowNibble data …
3 0 48 3 0 3 51 3 0 48 3 1 11 59 3 0 48 3 0 3 51

Note: So the they can be tested and make sure wired up OK, the relevant LED will light up when pressing either of the buttons, this only happens when in test mode.

Troubleshooting

A little more fiddly this circuit, a few more components and wires to check ..

Processing

In line with the Arduino code above, have add Button and Indicator classes to encapsulate the state, had quite a bit of a tidy up in the code, made adjustments for the lower range of values coming in from the controller, and removed the previous random start position / direction of ball, putting the player in control…

What’s New

What’s Changed

Challenge: As I was finishing the code for this stage of project, I saw a need for another class to help keep things tidy … Game … have a go at creating and implementing this class, maybe include state ? … and the actions ?

Play

Break time … Turn off testing mode, and re-upload …. when player misses the other player serves next, while the player has the ball the relevant LED should light, and will turn off when they serve, either using the keyboard or “controller”…

Key Controls

Rules

As this project progresses, these will be reviewed and improved to get closer to the real rules of ping pong. The game rules that have been implemented so far, are as follows…

Fixed Resistors

At a basic level, resistors are used in circuits to reduce current flow, in the context of this circuit, I will describe the use of the fixed resistors along with switches and LEDs below.

Switches

The switches used in this circuit are momentary switches, so they close the circuit when pressed, and open circuit when released, for example, S1 is connected as follows…

Terminal 1 ($T_1$) connected to digital pin D2 and also, through a 10k Ω pull-down resistor to GND.

Terminal 2 ($T_2$) connected to 5V

The digital pins, when mode is set to INPUT, will either read as HIGH (~5V), or LOW (~0V).

When the pins are not connected to anything there is a small input leakage current, looking at the datasheet on page 259, both the low/high max current is $1\,\mu A\,(0.001\,mA)$, and the input would float between HIGH and LOW.

In order to guarantee a small enough voltage, say $0.01V$ to register as LOW when the switch is unpressed, we need to connect the pin to GND through a resistor known as a pull-down.

Using Ohm’s Law, we would calculate the required resistance with the following equation…

… so, given the values from above…

.. would give a result of…

LEDs

An LED (Light-Emitting Diode) is a component that emits light when current flows through it, also electricity only flows in one direction, in this circuit we have, for example, LED1 wired as follows…

Terminal 1 ($T_1$) connected to digital pin D4

Terminal 2 ($T_2$) connected to GND through a $220Ω$ resistor.

Digital pin D4 has been configured as OUTPUT, when this pin is set to HIGH, the LED will light up.

So the LED doesn’t burn out too quickly, we need to put a resistor in series with LED, reduce the current, to calculate the Ohm value of this resistor, we would use the formula…

… where…

* These values where take from the datasheet, using the typical forward voltage, and test conditions.

… so…

… resulting in…

… but, there is no single 145 Ω standard value resistor, the nearest value would be 150 Ω*, however, the smallest value resistor in the Starter Kit is 220 Ω, so as we are using this, the forward current will be calculated as..

* Based on similar resistors available at ±5% tolerance in datasheet

… giving…

.. which is more than enough to light it up, which is worth bearing in mind with LEDs, even though the datasheet states a maximum of \(30mA\), you don’t really need it that bright for most applications.

Learn: I find it important to get to know your components, and how they work, it helps when things don’t work as planned, look up the datasheets of the components to get data to be used to equations such as Ohms law to make sure you choose correctly.

Bitwise Operations

The serial port transmits one byte (8 bits) at a time. Previously, the full byte was used to carry just one controller value. Now that we also need to carry a button state alongside the controller value, and need to do this for two players, we need to be smarter about how we pack data into that single byte.

The solution is to split the byte into two nibbles (4 bits each) — one for each player — and within each nibble, use the lower 3 bits for the controller value (giving a range of 0–7) and the 4th (most significant) bit for the button state (0 or 1).

Example: Player 1 — value 1, button pressed (1). Player 2 — value 1, button not pressed (0). data = 10010001 = 0x91 = 145

Bitwise operators are used to pack this data on the Arduino side, and unpack it on the Processing side.

Arduino

This code is a snippet from the createData(...) function in the main pronguino.ino file, it receives the values read from the potentiometers and states from the switches, and creates the data to be written to the serial port…

// Convert to nibbles
byte highNibble = (byte) (controllerValue1 | buttonState1 << 3) << 4; 
byte lowNibble  = (byte)  controllerValue2 | buttonState2 << 3;

// Combine the two nibbles to make a byte
byte data = highNibble | lowNibble;

.. so, using the example from the bit-map above — Player 1 controller at minimum (value 1), left button pressed (1), Player 2 controller at minimum (value 1), right button not pressed (0) — the function is given …

.. to calculate the highNibble, first we need to left shift the buttonState1 3 positions ..

.. and then bitwise OR result and controllerValue1 …

.. then left shift four bits …

… in this example the controllerValue2 is 1, and button is not pressed, so, for simplicity lowNibble would be just 1, and to calculate data to send …

In the main pronguino.ino file, inside function serialEvent(), which will get called when any data received on serial port, there is the following snippet of code…

// Read Data
byte dataIn = (byte)Serial.read();
    
// Get State
int state = bitRead(dataIn,0);

// Get Index
int index = bitRead(dataIn,1);

.. thinking I was going to write a few lines of code to extract the bits needed to identify LED state, and player index, a quick scan of the language reference revealed a function called bitRead, which does the job for me.

Learn: Sometimes you might find yourself writing lines and lines of code when there is function or method already available. Always worth a check in reference if you start thinking there must be a better way of doing this.

Processing

Have made some changes to the serialEvent() function in main Pronguino file, so it can now breakdown the data received from the UNO further, getting the highNibble and lowNibble haven’t changed…

...
// Set the value of each controller (first 3 bits of nibble ... 0-7)
players[Constants.PLAYER_ONE].controller.setValue(highNibble & Constants.DATA_BITS_VALUE);    
players[Constants.PLAYER_TWO].controller.setValue(lowNibble & Constants.DATA_BITS_VALUE);

// Set the state of each controllers button (4th or most significant bit of each nibble ... 0-1)
players[Constants.PLAYER_ONE].controller.button.setState((highNibble & Constants.DATA_BITS_STATE) >> 3); 
players[Constants.PLAYER_TWO].controller.button.setState((lowNibble & Constants.DATA_BITS_STATE) >> 3);
...

.. and by adding a few more constants for bit masks…

...
static final int DATA_BITS_VALUE = 0x07;  // Bit mask used to extract value of controller from nibble (00000111)
static final int DATA_BITS_STATE = 0x08;  // Bit mask used to extract state of button from nibble (00001000)
...

.. we will go through just the highNibble, as the lowNibble follows the same process — using data byte 0x91 from the example above, the highNibble is 0x09 shifted left 4 bits, which gives 0x90 (10010000), so …

.. to get the value of the controller …

.. and to get the button state, first use mask to get bit value…

.. and then right shift three places …

When a player misses the ball, the ball is “given” to other player to serve, at this point we send a data byte to the UNO, to indicate which LED to light up, this data is calculated and returned from the following function in Functions file..

static int getIndicatorData(int playerIndex, int indicatorState) {
  return (playerIndex << 1) | indicatorState;
}

… so, for example, if Player 2 misses (index 1) and their LED should light up (state 1) …

… first the playerIndex is shift 1 bit to left …

.. then bitwise OR result with indicatorState …

Challenge: Create some more generic functions, a new functions file, say, Bitwise, similar to the Arduino bitwise functions i.e. bitSet(), lowByte(), to replace those in the Functions file, maybe highNibble(), lowNibble() ?

Conclusion

Had a bit of a shake up in the code, learned about some new functions, and new components, added some libraries, and touched on Ohm’s Law. Along the way we looked at pull-down resistors, how to correctly size a current-limiting resistor for an LED, and how bitwise operations let us pack and unpack multiple values into a single byte for two-way serial communication. One thing for sure knowledge certainly sinks in when documenting. Next up … adding a few more features to the game.

Introduction

Time to give our game a bit of a makeover with a lick of paint, and have a sweep through some of the code, introducing vectors and some debugging techniques for collisions.

Scope

Learning

Getting Started

Recommended

I recommend that you go through the previous posts for this project, although completing the Arduino part of the project is not essential.

The Code

Processing

What’s New

First thing I wanted to do was to separate the table and the Scoreboard, however I could not create a new class called Table, as this is already part of the Processing language, so having had a look around at table tennis terminology, I saw Playing Surface mentioned, so Surface it is…

Note: If a variable / class or method you are implementing changes colour in the editor, the chances are you are using a reserved word.

One of the most challenging parts of this simple game is collisions, so I created some features to assist the debugging of this; further down, I will go into more detail on these. One of the new files contains flags to control what to debug.

What’s Changed

As well as changing the colour and shape of the game objects, I also had a sweep or two through the code in general, e.g. consistent use of this, so it is clear when referring to class properties, removing use of private, as not really applicable in Processing, and a bit of refactoring, moving code around, simplifying, and removing what is not needed.

Play

Have a play, first to 10 is the winner, hit space to restart .. or watch 43 seconds of nail-biting play below …

Graphics

Let’s have a look at some of the shape methods being used to draw the game objects in this version of Pronguino…

Surface

The strokeWeight() and stroke() will determine the thickness and colour of both the surface border and the service rule line(), there is no need to set this before each, unless a different thickness or colour is required. The fill() method will determine the fill colour of the subsequently drawn shape, in this case a rectangle using the rect() method.

// Line Width & Colour
strokeWeight(this.lineWidth);    
stroke(#ffffff);                     

// Surface
fill(#135da1);              
rect(this.x, this.y, this.w, this.h);

// Service Rule Line
line(this.x, this.y+(this.h/2), this.x+this.w, this.y+(this.h/2));

Paddle

The strokeCap() method determines the style of line endings, in this case ROUNDed.

// Style & Colour
strokeWeight(this.w);
strokeCap(ROUND);
stroke(this.colour);

//Draw
line(this.location.x,this.location.y,this.location.x,this.location.y+this.h);

Ball

Use the ellipseMode() method to set how the circle() parameters are interpreted, in this case RADIUS is used, where x,y will be the centre, and third parameter as the radius.

// x, y = centre, r = radius
ellipseMode(RADIUS);

// Colour
fill(this.colour);
stroke(this.colour);

// Draw
circle(this.location.x, this.location.y, this.radius);

Challenge: I have left a few “magic numbers” lying around, see if you can get these setup in the Options class, and as properties as required.

Vectors

We will look into the use of vectors within the context of this version of Pronguino, there are literally books written just about vectors, but for now we will keep it on point and simple, no need for lab coats and goggles just yet.

In the previous versions of Ball, we had the following properties…

float x;
float y;
...
private int horizontalDirection;
private int verticalDirection;

… which have now been replaced with ..

PVector location;
PVector velocity;

For simplicity, location(x,y) is a replacement for the previous x and y properties, so where I was setting the starting position as…

x = width / 2;
y = (int)random(10, height-10);

.. I now use the set method to assign x and y properties of location…

this.location.set(surface.x+(surface.w/2), surface.y+(surface.h/2));

The real power of vectors come into play on the movement of the ball i.e. instead of writing…

x += ( speed * horizontalDirection );
y += ( speed * verticalDirection );

.. the new version, using the add method and static function mult will simply be…

this.location.add(PVector.mult(this.velocity, this.speed));

Where the previous horizontalDirection and verticalDirection properties have been replaced with velocity(x,y) … the resulting new location would be…

Learn: Do some further reading on the Processing PVector class, and it’s methods and properties.

Collisions

I have simplified the hits method of Paddle class, removed need to identify the Player, and used a combination of the horizontalDistance and verticalDistance to identify a collision.

boolean hits(Ball ball) {
  float horizontalDistance = abs(this.location.x - ball.location.x);
  float verticalDistance = ball.location.y - this.location.y; 
  return  horizontalDistance < (ball.radius + this.w/2) && 
         (verticalDistance > 0 && verticalDistance < this.h);
}

Because ball.move() is called before the player.hits() check, and before ball.display() in the main pronguino file, the collision is detected one frame ahead, leaving the ball displayed at its previous position.

Experiment: In the above example the options.ballSpeed has been set to 5.0, so the math involved is simpler, and where most of the game object co-ords are all dividable by 5.0, the collisions look reasonably smooth, however, I haven’t taken in consideration speed into the calculations of the collision, yet, play around with the speed settings and see what happens.

Debugging

One of the trickiest aspects of developing this game, is getting the collisions right, and as smooth as possible, due to the collision happening so fast, it is difficult to see what is actually happening, and know what to adjust, so I have introduced a few ideas to assist in the debugging of collisions.

Note: When in debug mode, you will see a trail of the ball when it goes off the surface, this is expected, due to snapshots not being captured correctly when the background is redrawn in draw() loop, so it has been disabled during debug.

Options

I have added a flag debug in the Settings which needs to be set to true in order to trigger debug actions, and also added a new class Debug, which includes flags such as…

boolean playerHitsBall;              // Debug option for when the paddle hits the ball
boolean ballPositionAtPlayerPaddle;  // Debug option for when the ball is re-positioned

… which determine areas that require debugging.

Points

In the display() methods of Ball and Paddle, the following code, which, when the relevant flags are set will display a subtle black dot where the centre (x,y) of the ball is, and the starting point of the paddle line, so when a snapshot is taken, it acts as a guide on what adjustments need to be made.

// Debug
if(options.debug && (debug.playerHitsBall || debug.paddleHitsBoundary)) {
  strokeWeight(1);
  stroke(#000000);
  point(this.location.x, this.location.y);
}

Snapshots

In the pronguino file, within the draw() method, you will see the following code…

if (player.hits(ball)) {
    // Debug
    if(options.debug && debug.playerHitsBall) {
        ball.display(true);
        saveFrame("debug/Player("+player.index+")-Paddle"+player.paddle.location+"-Hits-Ball"+ball.location);       
    }
...

… where the frame at point of collision will save as an image, with the filename being made from the properties of the relevant objects involved i.e.

Player(1)-Paddle[ 710.0, 335.0, 0.0 ]-Hits-Ball[ 710.0, 380.0, 0.0 ].tif

It will also display the outline of where the ball would be at collision, see the modified code in Ball where it just changes the fill and colour before drawing, if true is passed in…

void display(boolean snapshot) {
  ...
  // Colour
  if(snapshot) {
    noFill();
    stroke(#000000);
  } else { ...

Challenge: Have a go at implementing the debug code for paddleHitsBoundary and ballHitsBoundary options.

Conclusion

We now have a much improved, new-look Pronguino — cleaner code, polished visuals, improved distance-based collision detection, and PVector replacing the old separate directional properties. The debugging tools introduced here are genuinely useful when things go wrong with collisions, and worth keeping in mind for future posts. Next up … Servuino to add more components to the circuit and more features to the game.

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);
}