How to Build Interactive Graphics Controllers for a Raspberry Pi

2017-11-07 | By All About Circuits

License: See Original Project Resistors Switches

In this project, we will make an interactive graphics bouncing ball using physical computing and only a few off-the-shelf electrical-electronic components.

Figure 1 below shows the basic component blocks we need to build this interactive graphics controller.

Basic Component Blocks Needed to Build Controller

Figure 1. The electrical-electronics and embedded hardware required to build the RPi (Raspberry Pi) interactive graphics controller.

Here are the various components necessary for this project.

Bill of Materials

Raspberry Pi (Model A+, B, B+, Pi2, Pi Zero, or the Pi3)
1 Kilo-ohm resistor (brown, black, brown, gold) 1/4W, 5%
10 Kilo-ohm resistor (brown, black, orange, gold) 1/4W, 5%
photocell
HDMI cable
HDMI monitor or equivalent
tactile pushbutton switch
T-Cobbler Plus or equivalent
solderless breadboard
jumper wires
jumper wires (female to male)

Pygame and the Raspberry Pi

The Python Pygame library is a key element behind the interactive graphics controller. The library allows us to easily add graphics to Raspberry Pi animation applications. Games and interactive objects can be created without the hassle that comes with developing special Python code or algorithms.

The interactive graphics controller we will build for this project uses the Pygame library to add a bouncing ball image to a window called a canvas. Figure 2 shows what the canvas built using Pygame for the bouncing ball image will look like.

Bouncing Ball Canvas Example Built With Pygame Library

Figure 2. The bouncing ball canvas example built using the Pygame library.

We can build the canvas dimensions using the Pygame instruction called size. Size instruction defines the height and width of the canvas and looks like this:

size = width, height = 500, 500

The Pygame library provides the following programming enhancements to Python:

Graphics created will not flicker.
Raspberry Pi is able to control the graphics with the appropriate motion speeds.
Created graphics can be controlled by a mouse, keyboard, or other external sensors.

As shown in the block diagram of Figure 1, in addition to adding graphics we’ll also add a digital sensor to control the image of the interactive controller using the Pygame library. The digital sensor can be built using a tactile pushbutton switch or a photocell to move the beachball on our canvas.

Now, let’s take a look at the interaction between the bouncing ball and the digital sensor using physical computing.

Physical Computing and the Raspberry Pi

Another element of the interactive graphics controller operation is that it has the ability to react to physical motion. For the project, the physical interaction is a hand motioning a ball dribble, which can be seen in Figure 3 below. Physical computing is the technique of having the sensor respond to its environment using code and electronics.

Hand Motioning a Ball Dribble

Figure 3. The physical computing environment for the sensor (photocell) with a supporting electronic circuit wired on a solderless breadboard. The motion of the hand simulates a ball dribble.

The environment for the sensor is a solderless breadboard and a supporting pulldown resistor circuit. As your hand passes above the sensor, it generates an electrical signal. The Raspberry Pi then processes this electrical signal by way of the embedded Python code inside the microcontroller's memory. The Pygame library creates a bouncing ball canvas which allows the graphics to move according to the motion parameters set by the Python code. For the interactive animation, the motion parameters are a diagonal direction up-down movement of the beachball on the canvas.

This project uses a photocell cell as the hand motion sensor along with the Python code and Pygame library to build our physical computing-based interactive graphics controller. Now that we’ve covered physical computing and the Pygame library, we can begin building the interactive graphics controller.

Electronics Circuit Wiring Methods

In order to build the electronic photocell sensor circuit, we will use a solderless breadboard and jumper wires. As previously shown in Figure 3, the electronic photocell sensor circuit's output is going to be wired to a Raspberry Pi's GPIO (General Purpose Input Output) pin. We will wire the circuit's output to GPIO pin 25 on the Raspberry Pi.

Before we build the controller, a tactile pushbutton switch test circuit is used to check the electrical circuit interface of the digital switch. The pulldown resistor of 1 Kilo-ohms provides the digital voltage signals of 0V and 3.3VDC to GPIO pin 25 of the Raspberry Pi each time the tactile pushbutton switch is released and pressed. Figure 4 shows the tactile pushbutton switch test circuit wiring diagram.

Tactile Pushbutton Switch Test Circuit Wiring Diagram

Figure 4. Tactile pushbutton switch test circuit wiring diagram.

Unfortunately, the 40 pin male connector doesn't have the GPIO pins identified on the PCB (Printed Circuit Board). In order to help wire the tactile pushbutton switch circuit, Figure 5 provides us with a wiring reference for the Raspberry Pi's GPIO connector pinout.

Raspberry Pi GPIO Connector Pinout

Figure 5. Raspberry Pi GPIO connector pinout.

Another way to wire the electronic photocell sensor circuit to the Raspberry Pi is to use the Adafruit T-Cobbler Plus as seen below in Figure 6. The T-Cobbler Plus is an electrical breakout board and provides access to the Raspberry Pi's GPIO pins.

Adafruit T-Cobbler Plus

Figure 6. The Adafruit T-Cobbler Plus.

The T-Cobbler Plus works by inserting it into a standard solderless breadboard and jumper wires are attached to the desired GPIO pins. A flat ribbon cable attaches between the T-Cobbler Plus and Raspberry Pi's electrical connectors. The tactile pushbutton switch circuit wired to the T-Cobbler Plus mounted on a solderless breadboard can be seen in Figure 7. The T-Cobbler Plus attaches to a Raspberry Pi2 with a flat ribbon cable.

Test Circuit Wired to Solderless Breadbaord

Figure 7. The author's interactive graphics controller's tactile pushbutton switch test circuit.

With the test circuit wired on the solderless breadboard, we can now check the interactive graphics controller's operation using the Python code shown below in Listing 1.

Copy Code

Listing 1. ButtonBouncingBall.py

#Include Python Libraries
import sys, pygame
import time
import RPi.GPIO as io
io.setmode(io.BCM)

#Make pin assignment
button_pin = 25

#setup button_pin as an input
io.setup(button_pin, io.IN)



pygame.init( )

#Set canvas parameters
size = width, height = 500, 500
speed = [100, 100]
white = 255,255,255

#Display title on canvas
pygame.display.set_caption("Bouncing Ball")

screen = pygame.display.set_mode(size)
ball = pygame.image.load("beachball2.png")
ballrect = ball.get_rect()

while 1:
    for event in pygame.event.get():
        if event.type == pygame.QUIT: sys.exit()
    if io.input(button_pin):#If button is pressed, move beachball
       ballrect = ballrect.move(speed)
    if ballrect.left < 0 or ballrect.right > width: #Move beachball up
        speed[0] = -speed[0] 
    if ballrect.top < 0 or ballrect.bottom > height: #Move beachball down
        speed[1] = -speed[1]

    screen.fill(white)#Set background of canvas
    screen.blit(ball, ballrect)
    pygame.display.flip()
    time.sleep(0.1)#Wait for 100ms before next button press

Testing the Interactive Graphics Controller

Before we can test the interactive graphics controller, we will first need to unzip the ButtonBouncingBall_materials folder within our Raspberry Pi file directory. We can find the beachball2.png and the ButtonBouncingBall.py files in the zipped folder.

Next, we will run the application by opening the LXTerminal, which is located on the Raspberry Pi's desktop. Type the Linux command "cd" (change directory) into the LXTerminal. This gives access to the ButtonBouncingBall.py Python code. Comment statement highlights the functions of the Python code are highlighted. Reviewing these comment statements helps to understand how the Python code works before we run it.

Now we can type the Linux command ~sudo python ButtonBouncingBall.py into the LXTerminal editor as shown in Figure 8 below to run the application.

ButtonBouncingBall.py Python Application in LXTerminal

Figure 8. The ButtonBouncingBall.py Python application being executed in LXTerminal.

Once we execute the code, the Bouncing Ball canvas should be displayed on the HDMI monitor screen as seen in Figure 9.

ButtonBouncingBall.py Code Running on Pygame Canvas

Figure 9. The ButtonBouncingBall.py code running on the Pygame canvas.

To see the beach ball bounce diagonally across the canvas, simply press the tactile pushbutton switch with your finger several times. We’ve done it! We’ve built an interactive graphics controller! The final project build includes us adding a hand-dribble detection feature, using an electronic photocell sensor circuit.

Hand-Dribble Detection Feature

To bounce the beach ball by hand-dribble requires the tactile pushbutton switch to be replaced with an electronic photocell sensor circuit. The electronic photocell sensor circuit is wired as a digital switch. Placing your hand over the photocell provides a binary 1 (3.3V) control signal that is read by the Raspberry Pi. The Raspberry Pi processes this digital control signal and allows the beachball to move and bounce.

When you remove your hand from the photocell, it provides a binary 0 (0V) digital control signal. The beach ball will stop bouncing as controlled by the Raspberry Pi. Figure 10 shows the wiring diagram for the hand-dribble detection circuit.

Hand-Dribble Detection Circuit Wiring Diagram

Figure 10. The hand-dribble detection circuit wiring diagram.

Another picture of the final interactive graphics controller project build with the hand-dribble detection feature is shown in Figure 11 for reference.

Final Project Build of Interactive Graphics Controller

Figure 11. Here’s the final project build of the interactive graphics controller. Note the photocell replacing the tactile pushbutton switch for hand-dribble detection.

The operation of the project can be seen in the small video clip located below. Run the Python application code using the Linux command discussed earlier. As you provide a hand-dribbling motion to the electronic photocell sensor, the beach ball bounces on the Pygame canvas.

Again, congratulations on successfully adding the hand-dribble detection feature to your interactive graphics controller!