CS12020 (Computer Graphics, Vision and Games)

Worksheet 1

Jim Finnis (jcf1@aber.ac.uk)

1 Getting to know your shield

First, book out your shield. This might take a little time, so be patient. Make sure yourname, email address and the serial number of the shield have been logged.

Your shield is a circuit board which sits on top of your Arduino, connecting to its pins. Pinswhich the shield doesn’t use can still be accessed, by connecting to them on the shield ratherthan the Arduino — they are “passed through” to connectors on the shield. In fact, you canconnect to pins the shield uses as well, but don’t — it could stop the shield working! The shielditself is shown in Figure 1.

Digital pin 13 LED

LED displayButtons 1-5

Your Arduino, pluggedin underneath

headers passed thoughfrom the Arduino

y

x

Figure 1: The CGVG shield

You should be able to see how your Arduino fits underneath, but don’t connect it yet. It hasthe following parts:

• An 8x8 LED display. Each “pixel” has two LEDs, red and green. This means we can showfour different colours: black (all off), red, green and yellow (both on).

• An LED which is connected to digital pin 13, like the LED on the Arduino itself (whichwill be hidden by the shield).

• Five push buttons.

1

• Some connectors — called headers in the electronics trade. These are female headers, andthey connect directly to the Arduino’s pins.

With this shield we can write simple games, responding to the buttons. We can also connectthe Arduino to other Arduinos to play multiplayer games using serial communications. You’ll beprovided with a library to help you control the LED and read the buttons with a fairly simpleAPI (Application Programming Interface).

1.1 Connecting your shield

Now you can connect your shield to your Arduino. Always do this with the Arduino dis-connected from the PC. The connection is shown in Figure 2. Make sure you line everythingup correctly — the six pins on the right should slot neatly into the headers for the analog pinsA0-A5, which should be labelled on your newer Arduinos. The rest should slide into place onceyou have those lined up. Don’t force it — ask for help if there’s a problem.

Figure 2: Connecting your shield

Once you’re set up, get a demonstrator to look at your shield to check you’ve connected itcorrectly to your Arduino.

1.2 Making sure you can save your programs (if on a public worksta-tion)

The Macs in the Orchard and the public Windows workstations both use Documents/Arduino asyour “sketchbook” directory. However, the Linux machines C56 are configured differently. Thisis easily fixed — in the Arduino IDE, open File/Preferences... in the menu and edit thesketchbook directory to be /home/xxx/Documents/Arduino (where xxx is your user ID). Nowquit and restart the IDE.

1.3 Installing the library

The AberLED library can be downloaded as a Zip file from http://users.aber.ac.uk/jcf1/

cs120.shtml. To install it, open your Arduino IDE and from the menu select Sketch/Import

Library.../Add Library... Then select the downloaded file.

2

1.4 Running a test

Now you are ready to run a test. Connect your Arduino and shield to the PC, and enter thefollowing code into the IDE:

#include <AberLED . h>

void setup ( ) {AberLED . begin ( ) ;AberLED . c l e a r ( ) ;for ( int i =0; i <8; i++){

AberLED . s e t ( i , i ,YELLOW) ;}AberLED . swap ( ) ;

}

void loop ( ) {}

You should see a yellow diagonal line on your display. Here’s how the code works:

#include <AberLED . h>

// This i s the s e t up funct ion , which runs once . I t ’ s// the on ly code which runs , because our loop () f unc t i on// i s empty .

void setup ( ) {

// s t a r t up the l i b r a r y so we can use the LED

AberLED . begin ( ) ;

// c l e a r the BACK bu f f e r ( which i sn ’ t d i s p l a y ed )

AberLED . c l e a r ( ) ;

// now draw ye l l ow do t s to the back b u f f e r at (0 ,0)// (1 ,1) , (2 ,2) and so on up to (7 ,7) .

for ( int i =0; i <8; i++){AberLED . s e t ( i , i ,YELLOW) ;

}

// f i n a l l y , swap the f r on t and back b u f f e r s so t ha t the// back b u f f e r we j u s t drew i s be ing d i s p l a y ed .

AberLED . swap ( ) ;}

// This i s the loop funct ion , which runs over and over again// f o r e v e r once the se tup func t i on i s complete . In t h i s case// i t ’ s empty − so i t does noth ing .

void loop ( ) {}

3

2 A moving dot

Start a new sketch, and import the AberLED library as before. Put a call to AberLED.begin()

in the setup() code.Now, you’re going to be working mainly inside the loop() function. First, write a program

to just draw one dot. You need to:

• clear the buffer

• draw the dot

• swap the buffers.

It’s going to look quite like the program above, apart from the drawing part.Make sure this runs. Now modify your program to make the dot move from left to right,

“wrapping round” to the left again once it reaches the right hand edge. Things you’ll need tothink about:

• What variables you need, where they should be declared and what initial values they shouldhave.

• How they change in each “tick” (i.e. time round the loop).

• What happens to them when they get to the edge.

2.1 Bouncing the dot

Once you’ve got that working, try to make the dot fly back and forth between the two edges.Hint: you may need an extra variable here.

4

3 Input

You can get the current state of a button using AberLED.getButton() with the button number(1-5) as a parameter. This will return non-zero (true) if the button is currently down.

For example, this little program will make the red dot appear only when button 2 is down:

#include <AberLED . h>

void setup ( ) {AberLED . begin ( ) ;

}

void loop ( ) {AberLED . c l e a r ( ) ;i f (AberLED . getButton (2 ) ) {

AberLED . s e t (0 , 0 ,RED) ;}AberLED . swap ( ) ;

}

Now try to modify your program to make it change direction when you press a button. Firsttry reading buttons 2 and 4 to make it change direction from left to right, then add buttons 1and 3 to make it move up and down as well. Use button 5 to make the dot stop.

• Do you need any more variables to handle the vertical motion?

• What should you do when you reach the edges? (It’s up to you, but you should dosomething).

5

A Technical details

This section is for people who are interested in how the LED hardware works.

A.1 Which pins are used

The shield uses the following Arduino pins:

• Digital pins 2-7 are used to drive the LED matrix (see below)

• Analog pins 0-3 receive input from switches 1-4

• Digital pin 9 receives input from switch 5

• Digital pin 13 drives the LED (as it does on the Arduino itself)

Any pins not in this list are passed through, and you are free to connect to them: digital pins8 and 10-12; along with analog pins 4 and 5. Don’t use digital pins 0 and 1 — they’re used totalk to the PC.

A.2 How the LED matrix works

The LED matrix we’re using has 24 pins. 8 of these pins are connected to the rows, while theother 16 are connected to the columns — one set of 8 for the red LEDs, the rest for the greenLEDs.

The rows are connected to the anode (positive) side of the LEDs, while the columns areconnected to the cathodes (negative). To turn on an LED, we have to connect the cathode toground and the anode to +5V. You’ll notice a lot of resistors on the shield too — you can’tconnect an LED directly, you have to do it through a resistor or a really high current will flowand blow it up1.

So to illuminate (say) the red LED on row 5, column 4 we need to set row 5 to HIGH andred column 4 to LOW. Unfortunately, we can’t use this to make a picture — if we set more thanone row high it would show the same pattern as the other rows, because there isn’t a separateset of column lines for each row! This means we can only show one row at a time.

We get round this by using persistence of vision. We very quickly turn on each row, showingthe columns we want, then turn that off and move on to the next row with different columns lit,and so on. We do this so quickly our eye sees a single picture. Our library does this automatically.

1Turning your LED (light emitting diode) into an SED (smoke emitting diode).

6

A.3 How we control 24 signals with only 6 pins

Even with this limitation of all columns sharing the same row data, we still need to control 24signals. This is more than the Arduino UNO has. To deal with this, we use some very useful ICscalled shift registers. With one of these, 3 signals can control 8 outputs. We can also “cascade”them together, so 3 signals can control 16, 24 or more outputs (but you lose a bit of speed everytime you do this).

The shield uses three shift registers to control the 24 pins on the matrix, so we only use 6pins on the Arduino. Two of these are cascaded to form a single, big shift register to control thecolumns; while one controls the rows, as in Figure 3.

column data

row data

gre

en co

lum

n d

ata

red co

lum

n d

atarow data

column data

shift register

shift re

giste

r

shift re

giste

r

Figure 3: Shift registers and the LED matrix

If you want to know more about shift registers to use in your own projects, there’s ahandy guide at https://learn.adafruit.com/adafruit-arduino-lesson-4-eight-leds/ toget you started. The particular component I’m using is the 74HC595. They cost about 35p each!

7