VGA Display

Name Mohamed Alsubaie

MMU ID 09562211

Unit Leader Dr. Helen Ji

Assignment Assignment 1: VGA Display

Subject Systems On A Chip

Unit code 64ET3520

Course BEng (Hons) Computer and Communication Engineering

1

Table of Content

TABLE OF CONTENT 1

TABLE OF FIGURES 2

1. INTRODUCTION 3

2. OBJECTIVES 3

3. BACKGROUND 3

3.1 VIDEO GRAPHICS ARRAY 3

3.2 VIDEO DISPLAY TECHNOLOGY 3

3.3 COLOUR MONITORS 4

4. HARDWARE AND SOFTWARE REQUIRED 4

5. IMPLEMENTATION 4

5.1 VGA VIDEO SIGNAL 4

5.2 RGB SIGNALS 5

5.3 SYNCHRONISATION SIGNALS 5

6. TASK ONE 6

7. TASK TWO 6

8. TASK THREE 7

8.1 ABOUT THE GAME 7

8.2 HOW TO PLAY 7

8.3 KEEPER DRAWING 8

8.4 BALL DRAWING 8

9. CONCLUSION 10

10. EVALUATION AND RECOMENDATION 10

11. REFERENCES 12

2

Table of Figures

FIGURE-1: ELECTROSTATIC DEFECTION OF THE BEAM IN A CRT. 3

FIGURE-2: SHADOW MASK OF COLOUR CRT . 4

FIGURE-3: ADV7123 DATA SHEET. 5

FIGURE-4: THE SCANNING PROCESS FOR VGA. 5

FIGURE-5: BLOCK DIAGRAM FOR VGA CONTROLLER. 6

FIGURE-6: RESULT FROM TASK TWO. 6

FIGURE-7: RESULT FROM TASK THREE. 6

FIGURE-8: PENALTY SHOOTING GAME. 7

FIGURE-9: COMPONENT USED ON THE ALTERA BOARD. 8

FIGURE-10: KEEPER DRAWING AND BOUNDARY. 9

FIGURE-11: MATHEMATICAL EQUATION FOR CIRCLE. 9

FIGURE-12: FIXED PIXELS FOR FONTS AND PATTERNS 10

FIGURE-13:VGA CONTROLLER WITH CHARACTER FONT ROM. 10

FIGURE-14: VISUALIZATION OF THE PERSPECTIVE PROJECTION. 11

3

1. Introduction

The purpose of this assignment is to learn how to programme Video Graphics Array

display using Altera DE2-70 board. This assignment is divided into three parts,

starting from displaying coloured background, then splitting the screen into different

colours, and finished with designing a small game (animation). It is also required to

Programme the FPGA chip on the board and use the VGA Digital-to-Analogue

Converter (DAC) as a controller, which is will be responsible for sending the

synchronization signals and the pixel colours to VGA monitor (Altera, 2011).

2. Objectives

To understand the capabilities of the Altera DE2-70 board.

To investigate about how VGA monitors works and controlled.

To be familiar with programming in Verilog Hardware Description Language.

To generate displays controlled by DE2-70 switches

To generate display patterns based on current pixel position

To design an animated display pattern or small game.

3. Background

3.1 Video Graphics Array

Video Graphics Array (VGA) is the standard display or monitor used in most PCs. It

uses a special video chip to generate images or perform animation. IBM was the first

producers of this chip using very large scale integration (VLSI) chip comprising a

huge number of logic gate arrays in order to make video circuitry. It was introduced in

1987 in IBM’s PS/2 computers with high colour and resolution of 640x480 pixels.

Since then, many revisions of the standard have been introduced. The most common

is Super VGA (SVGA), which allows for resolutions greater than 640x480, such as

800x600 or 1024x768. A standard VGA has 15 pins adaptor and is shaped like a

trapezoid (ISRD Group, 2006).

3.2 Video Display Technology

The first technology used to display video images dictated the nature of video signal.

The major components inside early VGA monitors were the colour CRT or Cathode

Ray Tube. The focusing system in CRT, which is show in figure-1 below, is needed to

force the electronic beam to converge into small spot as it strikes the phosphor. This

electron beam must be scanned over the view screen in a sequence of horizontal lines

to generate an image. The scanning process depends on the horizontal and vertical

deflection plates, which are uses magnetic or electrostatic fields to deflect the

electrons to the appropriate position on the face of the CRT (ISRD Group, 2006).

Figure-1: Electrostatic defection of the beam in a CRT (ISRD Group, 2006).

4

3.3 Colour Monitors

There are three beams of three primary colours (red, green, blue) in side the electronic

beam of the CRT. The colour in each pixel is a mixture or combination of these three

colours. This procedure required a special fabricated component known as shadow

CRT mask as shown in figure-2 below. It is a thin metal plate with many small holes

that acts as a sort of filter, which helps the three guns to focus exactly to

corresponding phosphor (ISRD Group, 2006).

4. Hardware and Software Required

Altera DE2-70 board.

USB cable.

VGA monitor.

VGA connector.

Computer with Cyclone II Software.

5. Implementation

5.1 VGA video signal

A VGA video signal contains 5 active signals:

• HSYNC – horizontal synchronization signal.

This signal controls the horizontal position of the active pixel.

• VSYNC – vertical synchronization signal.

This signal controls vertical position of the active pixel.

• RED – red colour channel.

• GREEN – green colour channel.

• BLUE – blue colour channel.

Synchronization signals are TTL logic levels and RGB signals are analogy signals,

with 0.7v – 1.0 v peak-to-peak levels.

Figure-2: Shadow mask of colour CRT (ISRD Group, 2006).

5

5.2 RGB Signals

DE2-70 board has a VGA DAC called ADV7123, which is responsible to converts the

digital RGB signals to analogue signals that VGA monitors take as input. According

to the data sheet of this DAC the resolution of the RGB signal will be 10 bit

(Analogue Devices, 1998), see figure-3, therefore the design controller has 10 bits for

each colour.

5.3 Synchronisation Signals

Pixels are drawn in sequence on the screen, as shown in figure-4 below, column are

arranged to go form up to down and rows from left to right. The row increments and

the column address will reset to the first column. Synchronisation signals are used as

counter, to count the number of pixels that have scanned. H_sync should have active

high for 640 effective pixels, then remains as low for extra time. Similarly V-sync

should be active high for 480 rows, and low for the rest of time, (see the setting for

the VGA Synchronisation Signals on the last page of the attached code). Once the

whole screen has been painted, the refresh process starts again. In order to provide a

image with motion and reduce flicker, the video signal must have a refresh rate higher

than 60 Hz, which is means that signal must redraw the entire screen 60 times per

(Sanchez, n.d.).

Figure-3: ADV7123 data sheet (Analogue Devices, 1998).

Figure-4: the scanning process for VGA (Sanchez, n.d.).

6

In this assignment, 640 by 480-pixel mode has been selected and it is required a

refresh rate of 60Hz (Altera, 2006). This is approximately 40 ns per pixel. Therefore,

the clock needed to provide this period is 25MHz. The Altera DE2-70 board has a

CLK of 50MHz. choose different frequency clock is very easy with using the on chip

PLL for Cyclone family. Simply, by using a clock divider to divide the 50MHz clock

by 2 to get a clock of 25MHz.

6. Task One

This task was about modifying the top level

design, so that it controls the VGA to

display colours according to the settings of

the toggle switch on the board. The first 6

bits of the Red colour signal are controlled

by iSW [17:12]; Green colour signal is

controlled by iSW [11:6] and Blue colour

signal is controlled by [5:0]. The other bits

for each colour are assigned to 0, therefore,

white colour will not be perfect.

7. Task Two

This task was about generating display

patterns with referring to the current pixel

coordinators. As it shown in figure-7, the

screen has been divided into 4 equal areas,

each one has different colour. Switches

iSW17, iSW16, iSW15 and iSW14 were

also used to control (displaying or not

displaying) the selected area.

Figure-5: Block diagram for VGA controller.

Figure-6: Result from task two.

Figure-7: Result from task three.

7

8. Task Three

8.1 About the Game

Penalty shooting game, which is a very famous football game, has been selected for

this part of the assignment. The figure below shows some details about how the game

will look like on the monitor. The football pitch is painted with two different severity

of green colour. Bars, lines and penalty spot are painted with white colour. The ball

has a red colour and it placed on the penalty spot. There is ball with a very light green

colour above the red ball, which is responsible to select the ball direction left, right or

straight. The goal keeper, which is responsible to catch the ball, has a blue rectangle

shape. There are small red and blue circles that representing the number of goals and

outs.

8.2 How to Play

The bush buttons switches on the Altera board are used to select the ball direction,

shoot the ball and start the next try. At the begin of each try, it is possible to select the

game level and then press iKEY[1] to start, the keeper will start moving left and right

and the player should select the direction of the ball using iKEY[2] to aim left,

iKEY[1] to aim straight and iKEY[0] to aim right. Then, press iKEY[3] to shoot the

ball in the selected direction. The light green ball will show the player the ball

direction and it will disappear after pressing the shoot button.

Scoring a goal required shooting the ball in the direction that the keeper will not

available at. If the ball bypasses the keeper, it will go in side the goal, but if not, the

keeper will stop it from moving towards the goal. After that, the display will freeze

until pressing start button iKEY[1], to start the next try.

Figure-8: Penalty shooting game.

8

Each game will have five tries, therefore player should score at less three goals in

order to win the game. After the fifth try, the game will finish. By pressing iKEY[1], a

new game will start and the score will reset. The score will display on the monitor as a

small circles and it will also shown on the seven segment display as a decimal number

(HEX[6] and HEX[4]), see figure-8 and figure-9.

This game has three different levels:

Level one is the normal level for the game and the keeper has 100 pixels long.

Level two is the medium level for the game and the keeper has 200 pixels long.

Level three is the hard level for the game and the keeper will have 300 pixels

long.

Changing the level of the game can be done using switch iSW[0] for medium level,

iSW[1] for hard level. However, normal level is activated when both are equal zero.

The level will only change before the shooting process in order to make the game

more realistic.

The game also has three different speeds, which can be change any time using

iSW[16] for slow motion, iSW[17] for fast motion and iSW[15] for motion effects

(the ball will move fast and when it came closer to the keeper slow motion will

activated, this will add some side effects on the game). Normal speed will only

activated when both switch are equal zero. As shown in figure-9 below, the seven

segments displays HEX[0] to HEX[3] will show the game level and speed.

Figure-9: Component used on the Altera board.

9

8.3 Keeper Drawing

The keeper is drawn by selecting a fix values for the y axis from 125 to 145 because

the keeper will remain in this region since it only moves to the right and left.

However, the x-axis of the keeper should be a variable, in this game keeperX and

keeperX + keeperLV. For example in level zero (normal level), keeperX equal 200

and keeperLV will equal 100, therefore, the keeper will have 100 pixels long starting

from 200 to 300. While the keeper moving towards the right it will change his

direction since it reach 520 – keeperLV, which is in level zero will equal to 420.

Then, it will change his direction to the left side unite keeperX reach 120 then it go

right again.

8.4 Ball Drawing

Drawing a circle was not as drawing square or rectangular shapes. However, drawing

a circle could be done using some mathematical equation. When the centre of the

circle is placed to at the origin (0, 0) the equation of the circle is x^2 + y^ = r^2, but

when the centre of a circle is at point (a, b), the general equation for circle is used,

which is (x – a)^2 + (x – b)^2 = r^2.

Figure-10: Keeper drawing and boundary.

Figure-11: Mathematical equation for circle (Mathcentre, 2009).

10

9. Conclusion

The assignment was completed successfully and the objectives have been achieved. It

starts with providing a huge background about the VGA displays and how they work.

Then, it move to design a VGA controller using Altera DE2-70 board in order to

make simple task, such as displaying coloured screen and patterns, before moving on

to work with game development. The assignment provided a valuable experience in

FPGA, verilog HDL and VGA display, and was very enjoyable.

10. Evaluation and Recommendation

The game works as expecting every thing is

doing the right thing. However, there are

many things could be done to improve the

game. One of the most important

improvements is developing the VGA

controller to be able of showing characters

on the display, see figure-13. Characters can

be display on a VGA monitor using fixed

pixel patterns or fonts. The character fonts

can be stored in a ROM, see figure-12,

which can be accessed by the VGA

controller (University of California, 2009).

Figure-13:VGA controller with character font ROM (University of California, 2009).

Figure-12: Fixed pixels for fonts and

patterns (Jarusauskas, 2010).

11

With this development, it will be possible to draw a nicer football and some faces for

players and keeper, as well as displaying the result on characters and numbers on the

screen, which will make the game more users friendly.

Moreover, all the objects on this game are 2D. The game can be improved by making

some 3D objects. It is possible to do this with using Perspective projection, which is a

method of representing a 3D object in a 2D image. This will add some effects such as

width and height for the objects and it also can vary the object size, so when the

object is close it appears larger than when it is farther away (Altera, 2011).

Figure-14: Visualization of the perspective projection (Altera, 2011).

12

11. References

Altera, 2006. VGA Core for Altera DE2/DE1 Boards. [pdf] Available at:

<ftp://ftp.altera.com/up/pub/University_Program_IP_Cores/VGA.pdf> [Accessed 26

November 2012].

Altera, 2011. Laboratory Exercise 9: Graphics and Animation. [pdf] Available at:

ftp://ftp.altera.com/up/pub/Altera_Material/12.0/Laboratory_Exercises/Computer_Or

ganization/DE2/lab9.pdf > [Accessed 26 November 2012].

Analog Devices, 1998. Triple 10-Bit High Speed Video DAC ADV7123. [pdf]

Available at: <http://www.eecg.toronto.edu/~tm4/ADV7123_a.pdf> [Accessed 26

November 2012].

ISRD Group., 2006. Computer Graphics. New Delhi: Tata McGraw-Hill.

Jarusauskas, A., 2010. Fpga based vga driver and arcade game. [pdf] Available at: <

http://static.armandas.lt/res/fpga_based_vga_driver_and_arcade_game.pdf >

[Accessed 26 November 2012].

Mathcentre, 2009. The geometry of a circle. [pdf] Available at:

<http://www.mathcentre.ac.uk/resources/uploaded/mc-ty-circles-2009-1.pdf>

[Accessed 26 November 2012].

Sanchez, S., n.d. A VGA display controller. [pdf] Available at:

<http://lslwww.epfl.ch/pages/teaching/cours_lsl/ca_es/VGA.pdf> [Accessed 26

November 2012].

University of California, 2009. Verilog VGA Character Display. [pdf] Available at:

<http://www.ece.ucdavis.edu/courses/notes/old/S09/EEC180B/labs/tutorial_char_vga.

pdf> [Accessed 26 November 2012].