Programming Techniques 02: Graphics

By Dominic Ford

Originally published in EUG #36

Which Mode?

The most important decision which you must take when you are writing the graphics routines for a program is which graphics Mode to use. There are seven different display types available on the Electron, and an eighth is available on the BBC. Each display type has its own characteristics, and you must choose which is most suitable for your particular program. Some graphics modes, for example, allow you to have many different colours on screen, but poor detail, while others allow you to have very great detail but few colours. You select graphics modes by using the MODE x command. Details of the seven different available modes are given below:

0 2Yes640x25680x3220K
1 4Yes320x25640x3220K
3 2 NoN/A80x2516K
4 2Yes320x25640x3210K
5 4Yes160x25620x3210K
6 2 NoN/A40x25 8K
716 NoN/A40x25 1K<- BBC ONLY!


x-MODE number.
Colours-The maximum number of different colours which may be used on screen at any one time.
Graphics?-Does this graphics mode allow the use of the graphics commands (ie. MOVE, DRAW, etc)? Modes 3 and 6 do not allow these commands, as there are thin horizontal stripes between the rows of character in which nothing can be displayed. Thus any graphics drawn in these modes would have black horizontal stripes across them, and would look rather silly!

To see what I mean, turn on your computer and type:


The background should be entirely white, but there are horizontal stripes where the screen can be no colour except black.

Res/G-The resolution of the screen in this mode (ie. the number of pixels across and down the screen). Generally the higher the value, the smoother your graphics will look. Note that this is not the same as the parameters taken by the MOVE and DRAW commands - these always scale the number of pixels across the screen to 1280 and down the screen to 1024, so that (1280,1024) will always be the top-right corner of the screen and (0,0) the bottom left.
Res/T-The number of characters which fit across the screen in this mode when using text.
Memory-The amount of the computer's 32K of memory which is used by the graphics mode. If you are writing a long program, this is an important consideration as you may not have room for the program after subtracting 20K from the computer's 32K RAM for a Mode 2 screen. If this is the case, you must use a mode which uses less memory, such as Mode 5.

My advice in choosing which mode to use would be to try, if at all possible, to use one of the 20K modes. The detail of Mode 1, and the colours of Mode 2, are both far superior to the quality of Mode 5. If you are an efficient programmer, you should find that it is perfectly possible to fit a program of a reasonable length into memory at the same time as 20K of screen. Shipwrecked, for example, used Mode 2 for its graphics, as does Shipwrecked 2 on EUG #35.

The Problem With ADFS

Fitting a program into memory as well as a large screen memory is fairly easy when you are using a tape or DFS filing system, but this can prove difficult with ADFS, because 4K of the memory normally used to store programs is taken away for the ADFS to use, leaving you only a mere 4.5K free for programs. Assuming that once you have loaded the program you do not intend to use the disk again, there is a way around this. If you switch over to a tape filing system, the ADFS memory becomes redundant and can be reclaimed for BASIC use. Once you have done this, of course, you cannot access disks without resetting the computer, so load and save options in your program are restricted to tape only. This technique will be explained in greater depth in a later article on memory management.

Choosing Your Colour Scheme

After you have decided which mode to use, and so you know how many colours are available, you must decide what colours these are going to be. In Mode 2, where you have sixteen colours, you have access to all of the colours available, and so this choice does not affect you. In four-colour modes, on the other hand, you only initially have access to black, red, yellow and white. These are a warm selection of colours, but you might want a colder selection in your program, or just simply a set of colours which go well with your screen design. To do this, you use the command:

      VDU 19,logical colour number,actual colour number;0;

The logical colour number is the number that you use with the colour command to select that particular colour. In a four colour mode this must be between 0 and 3, and in a two colour mode this must be either 0 or 1. The actual colour number is the number of the colour which you want to assign to that logical colour. The actual colour numbers are given below:

0 : Black   8 : Flashing black/white
1 : Red 9 : Flashing red/cyan
2:Green 10:Flashing green/magenta
3:Yellow 11:Flashing yellow/blue
4:Blue 12:Flashing blue/yellow
5:Magenta (purple) 13:Flashing magenta/green
6:Cyan (light blue) 14:Flashing cyan/red
7:White 15:Flashing white/black

Looking at the table above, you might wonder what the difference is between flashing black/white and flashing white/black. If you look at them both separately, there is little difference, but if you look at them together, you see that when one is black the other is white, and vice versa. So, for example, if you put a logo on the screen with the logo in colour 8 and the background in colour 15, the screen flashes between white on black and black on white. To demonstrate this, turn on your Electron and type:

      >MODE 6:VDU 19,1,8;0;:VDU 19,0,15;0;         <RETURN>

Palette Switching

You can take this further. Four is the maximum number of colours allowed on screen at any one time. Therefore for different screens you can have different selections of colours. The main menu screen might be in warm colours, and then subsequent menu screens in colder colours. The changing of these logical colours is called "Palette Switching". You can go even further and create simple animation using palette switching; an effect which is called "Colour Cycling". For example, you put a row of colour 3 above a row of colour 2, with a row of colour 1 below that, and colour 0 at the base. Initially, you set all logical colours to black. Then, if you set logical colour 0 to white, the base appears. Now set logical colour 1 to white as well, the bar moves up the screen. Repeat this with colours 2 and 3, and you have a simple animation. This is even more powerful in MODE 2, where you can go through 16 rows up. This is demonstrated in the demo that accompanies this tutorial.

This Issue's Title Screen

The swirly effect on the title screen of this issue's title screen was achieved in this way. The colours black, blue, cyan and white are cycled through a pattern on the screen in order.

How To Produce Graphics

Having decided which graphics mode you are going to use, and which colours to have on the screen, you must decide how you are going to get your graphics onto the screen. There are many methods for producing graphics, and which you choose depends upon what you want the graphics for, and what you want them to do (and, of course, your programming ability). The most obvious is the PRINT command. This is a quick, easy way of putting text onto the screen. When used with the COLOUR command and the TAB(x,y) function, many interesting effects can be achieved.

These are, however, greatly limited by the fact that only letters can be displayed on the screen. This limitation may be overcome using user defined characters (see the Graphics chapter of the User Manual for details). Even using these characters, however, there are serious limitations. They can only use one colour per character, and so even if you make different characters different colours, your screen will still appear rather dull. Also, they are difficult to use when dealing with large areas of the screen.

Basic Graphics Commands

This is where MOVE, DRAW and PLOT are useful. Using these commands, lines can be drawn across the screen, and, using PLOT, triangles can be drawn. These commands are covered in the Graphics chapter of the User Manual. The other major advantage of these graphics commands is that they can be used not just to set the colour of an area, but also to invert it. The GCOL command, which selects the colour in which graphics are displayed, takes two parameters:

GCOL x,c

c-is the new colour in which graphics should be drawn.
x-selects how this colour should be applied:
  x=0 - means to set every pixel to that colour, regardless of its previous colour.
x=1 - means to mix the light from the pixel already on the screen with that of the new colour. For example, if a red pixel is set to blue, the red and blue mix to form purple.
x=2 - means that the light from the pixels is filtered with the new colour. If a red pixel is set to blue now, it is as if a blue filter has been placed in front of the red light, and the resultant colour is black (red light contains no blue component).
x=3 - means to invert the old colour with the new colour.
x=4 - means to set the pixels with the inverse of the new colour (regardless of the old colour).

Lines may now be drawn across the screen by typing:

MOVE x,y:DRAW xb,yb
Where: (x,y) ... The co-ordinate of the first point on the line.
  (xb,yb) ... That of the last point on the line.

The range of the screen is always 1280 pixels across, and 1024 pixels down. The bottom left corner is point (0,0), and the top right corner is (1280,1024). Larger graphics can be drawn using the PLOT command. The most common usage is as follows:

      MOVE x,y:MOVE xb,yb:PLOT 85,xc,yc

This plots a filled triangle with corners at (x,y), (xb,yb) and (xc,yc). PLOT also has many other functions - see the User Guide for details.

User-Defined Characters

At first sight, it may seem that user defined characters serve no purpose once a programmer has learnt about the more flexible graphics commands, but this is not the case. If you try to produce detailed graphics using MOVE and DRAW, you will find that your program crawls along at an unacceptable rate. User defined characters, on the other hand, can produce detail quickly, especially if the pattern repeats, so that one character definition can be used repeatedly in several areas of the screen. This is demonstrated by the program which accompanies this tutorial.

Your Next Move

So, it seems that programmers are faced with a difficult problem. They can use graphics commands and get colour, or they can use user defined characters and get detail, but what if they want both at the same time? There must be a solution - how else would games like Citadel manage to produce such detailed colourful graphics, and at such a speed?

There are, in fact, two possible solutions, both of which involve dealing with an area of memory known as screen memory. This is, however, very complicated, and will be discussed further in the next article.

Dominic Ford, EUG #36