Drawing Shapes on a BBC Micro

In this tutorial, you will learn how to use the MOVE, DRAW, and PLOT commands in BBC BASIC to create and fill shapes.

By the end you will understand:

• How screen modes work
• How coordinates work
• How to draw triangles, rectangles, circles and ellipses
• How to change colours
• How to fill shapes properly

You can use an online BBC Basic emulator to complete his challenge:

️BBC Micro Screen Modes

Before we start drawing on the screen let’s investigate the different screen modes available on a BBC Micro.

Effectively using BBC Basic you can change the screen Mode and resolution using the following instruction:

MODE number

When creating a computer program in BBC Basic, there are 8 modes to choose from as described below:

Tip: MODE 2 is great for colourful drawings.

Understanding Coordinates

• (0,0) is the bottom-left of the screen
• X increases to the right, from 0 to 1279.
• Y increases upwards, from 0 to 1023

Note that the (X,Y) coordinates help you position your “pen” on a 1280 x 1024 canvas/screen whatever mode you are opting for for your programme. The resolution set by selecting a mode only impacts on the size of the pixels displayed on screen. (Hence on the number of pixels you can display on the screen). For instance with mode 2, each pixel will be 8 graphic units wide by 4 graphic units wide. Hence you can only display 160 pixels accross the screen. (X,Y) coordinates used when drawing on the screen use graphic units (X between 0 and 1279 and Y between 0 and 1023) instead of pixels.

MOVE() and DRAW() to Draw Lines ✏️

To draw lines and shapes we will mainly use two commands: MOVE() and DRAW().

MOVE moves without drawing.
DRAW draws a line from the current position.

For instance:

10 MODE 2
20 MOVE 100,100
30 DRAW 200,100

This draws a horizontal line on screen.

Drawing a Shape

To draw a shape, we will need to draw each line one by one, joining the relevant set of (X,Y) coordinates.

For instance to draw a rectangle:

10 MODE 2
20 MOVE 150,100
30 DRAW 350,100
40 DRAW 350,200
50 DRAW 150,200
60 DRAW 150,100

Changing Colours

Use GCOL() instruction to change drawing colour:

GCOL 0,2

The second number selects the colour. You can start using the following colour codes for your drawings:

Understanding the PLOT Command

The PLOT() command can be used as either as an alternative to or alongside the DRAW() and MOVE() commands. It enables to draw more complex shapes including circles and ellipses. It is also used to “close shapes” and fill them in with a colour.

The structure of this command is:

PLOT mode, x, y

The first parameter (mode) tells BBC BASIC what type of graphics action to perform.

Filling a Triangle

To fill a triangle, use:

PLOT 85, x, y

85 fills a triangle using:

• The last two graphics points visited
• The new coordinate (x,y)

Example:

10 MODE 2
20 GCOL 0,2

30 MOVE 200,100
40 DRAW 300,200
50 DRAW 100,200
70 PLOT 85,200,100

Using BBC Basic it is possible to condense your code by writting multiple instructions on the same line using a colon (:) between each instruction: e.g.

10 MODE 2
20 GCOL 0,2

30 MOVE 200,100:DRAW 300,200:DRAW 100,200:PLOT 85,200,100

Filling a Rectangle or Parallelogram

To fill a parallelogram (including rectangles), use:

PLOT 69, x, y

69 fills the shape formed by:

• The last three visited points
• The new coordinate

Example:

10 MODE 2
20 GCOL 0,1

30 MOVE 150,100
40 DRAW 350,100
50 DRAW 350,200

60 GCOL 0,3
70 PLOT 69,150,200

Drawing Circles

The command to draw a circle outline is:

PLOT 145, x, y, radius

Example:

10 MODE 2
20 GCOL 0,6
30 PLOT 145,300,150,50

145 = circle outline.

Filled Circle

The command to draw a filled circle is:

PLOT 153,300,150,50

153 = filled circle.

Drawing Ellipses

The command to draw an ellipse outline is:

PLOT 147, x, y, radiusX, radiusY

Example:

10 MODE 2
20 GCOL 0,5
30 PLOT 147,300,150,80,40

Filled Ellipse

The command to draw a filled ellipse is:

PLOT 135, x, y, radiusX, radiusY

PLOT 155,300,150,80,40

Summary Table

Challenge #1: Drawing Flags by Combining Shapes

Use all the skills described in this blog post to draw the following flags n the screen:

Challenge #2: Complete the 3D Cube

Here is the code to draw a cube in 3D. However some edges are missing. Add the correct MOVE and DRAW commands to complete this code.

10 MODE 2
20 GCOL 0,7

30 REM Front square
40 MOVE 200,200
50 DRAW 400,200
60 DRAW 400,400
70 DRAW 200,400
80 DRAW 200,200

90 REM Back square
40 MOVE 250,250
50 DRAW 450,250
60 DRAW 450,450
70 DRAW 250,450
80 DRAW 250,250

150 REM Connect corners
160 MOVE 200,200
170 DRAW 250,250

180 MOVE 400,200
190 DRAW 450,250

200 REM Add code for the missing edges of our cube...

Extension Task:

• Fill one face of the cube.
• Use different colours for each face.
• Animate the cube by shifting coordinates in a loop.