Lesson 2

AT, BRIGHT, PLOT, CIRCLE, DRAW

In this lesson you will learn some more codewords for changing what you see on the computer screen while your program is running.

AT – When you want the computer to display something the AT codeword tells the computer where on the screen you want it to be displayed.

BRIGHT – The BRIGHT codeword tells the computer to display something in brighter colours than usual.

PLOT – This codeword tells the computer to put a dot of colour (called a “pixel”) on the screen.

CIRCLE – This codeword draws a circle on the screen.

DRAW – You can draw straight lines and curves on the screen by using the DRAW codeword.

 

The AT codeword

The AT codeword is a print item.

You can use the AT codeword together with PRINT to tell the computer where you want new characters to be displayed on the screen.

How to use the AT codeword

You can think of the Spectrum screen as being made up of tiny boxes arranged in rows and columns. The rows run across the screen from left to right. The columns run down the screen from top to bottom. There are 22 rows numbered from 0 to 21, and 32 columns numbered from 0 to 31.

When you want to tell the computer where to display something you need to tell it the column number and the row number, separated by a comma, like this:

10 PRINT AT 21,0; "The lowest line"

The first number following the AT codeword (the number 21 in this example) tells the computer in which row you want it to display something. Then after the comma, the second number following AT (the number 0 in this example) tells the computer in which column you want to display it. Finally, after the semicolon (;) we see what the computer is being told to display; it is the words: “The lowest line”  These words will start at the position given after the AT codeword, in this example the starting letter “T”  will be displayed at position 21,0 

 

The BRIGHT codeword

The BRIGHT codeword is a statement/command.

You can use the BRIGHT codeword to display characters in brighter colours than normal.

 

How to use the BRIGHT codeword

When you use the BRIGHT codeword you must put a number after it. This number may be 0, 1 or 8.

BRIGHT 1  tells the computer that, until further notice, all characters displayed by the PRINT codeword should appear in brighter ink, and the paper behind the ink is also displayed brighter.

BRIGHT 8  tells the computer that we should not change the BRIGHT values at any time – so that if we write letters over the top of bright letters, they should remain the same brightness.

BRIGHT 0  tells the computer to cancel the most recent BRIGHT 1 or BRIGHT 8 instruction so that all characters subsequently displayed are normal.

 

Using the BRIGHT codeword with other display codewords

You can use the BRIGHT codeword following one of the display codewords to affect the brightness of what you are telling the computer to display. You do this by putting a semicolon (;) after the number 1,8 or 0 which follows the BRIGHT codeword, but before the data that you want to display. For example:

50 PRINT BRIGHT 1;"WARNING"

Here line 50 means that the word “WARNING”  should be displayed and that it should appear in brighter ink, and with the paper also brighter.

 

The PLOT codeword

The PLOT codeword is a statement/command.

The PLOT codeword is used with the high-resolution grid which you learned about with the AT codeword in Lesson 2. The high-resolution grid allows you to tell the computer to plot a pixel or dot of colour at a particular position on the screen.

 

How to use the PLOT codeword

When you learned about the AT codeword you also learned about a special drawing grid, called a “high resolution grid”. On this high resolution drawing grid there are more rows (YYY of them) than the 32 on the character grid, and more columns (XXX of them) than the 22 on the character grid.

You can use the PLOT codeword to tell the computer where on the screen to display a dot (called a “pixel”).  The PLOT codeword is normally followed by two numbers separated by a comma, for example:
50 PLOT 128, 87

The first number after  “PLOT”  may range from 0 to 255. It tells the computer how many high-resolution columns across the screen, from left to right, you want it to go to display a pixel. The second number may range from 0 to 175 and tells the computer how many high-resolution rows up the screen, from bottom to top, you want it to go to display that pixel.

The computer will then display the pixel in the current ink colour at the screen location indicated by these two numbers.

You can also use the PLOT codeword to tell the computer where it should start to draw, the next time it comes across the DRAW codeword in your program.

 

The CIRCLE codeword

The CIRCLE codeword is a statement/command.

The CIRCLE codeword draws a circle on the screen.

 

How to use the CIRCLE codeword

You can use the CIRCLE codeword to draw a circle on the screen. You may choose exactly where on the screen the centre of your circle is located. And you may choose how big the circle is by telling the computer the length of the radius.

When you learned about the AT codeword you also learned about the 22 rows and 32 columns on the screen where you can decide to put a character. These rows and columns form what we call a grid – in that case the grid is described as being 22 x 32.

Well, when you want to draw circles or lines on the screen their position can be fixed on a special drawing grid, called a “high resolution grid”. On this drawing grid there are more rows (176 of them) and more columns (256 of them).

If you want the computer to draw a circle on the screen your program needs to tell it where the centre of the circle is located, and what is the radius of the circle.

The location of the centre of the circle is a point on the high resolution grid. You need to tell the computer in which row of the grid and in which column of the grid to put the centre. These are the first two numbers that follow the CIRCLE codeword. The third number which follows CIRCLE is the radius of the circle you want the computer to display on the screen.

So when you use the CIRCLE codeword it will look like this, with commas between the numbers:

80 CIRCLE x, y, z

Line 80 of the program means that the centre of the circle is located in column number x, counting from the left of the screen, and in row number y, counting from the bottom, and that the length of the radius of the circle is z.

When you choose these numbers x, y and z you must try to make sure that the circle does not overlap outside the display area of the screen.

An example of using the CIRCLE codeword is the program line:

80 CIRCLE 128, 88, 87

This draws a circle which takes up most of the display area.

 

The DRAW codeword

The DRAW codeword is a statement/command.

The DRAW codeword draws straight lines and curves on the screen.

How to use the DRAW codeword

You can use the DRAW codeword to draw a straight line on the screen. You may choose exactly where on the screen the ends of your straight line are located.

The ends of your straight line can be fixed on the “high resolution grid”. You need to tell the computer in which row of the grid and in which column of the grid to put each end of the straight line.

If you have already used a DRAW codeword (or a PLOT codeword) in your program the computer will think you want one end of your straight line to be at the location of the last point it knew about, from the previous DRAW or PLOT codeword.

If you have not already used a DRAW or PLOT codeword in your program, the computer will think that you want one end of your straight line to be at the lower left hand location on the screen – we describe this location as (0,0) because it is 0 columns to the right and 0 rows upwards.

Here is an example.

40 DRAW x,y

This will draw a straight line on the high-resolution graphics grid, starting from the position defined by the previous DRAW statement or the previous PLOT statement, whichever was used more recently.  If there is no previous PLOT or DRAW statement, the line starts at position 0,0 (the bottom left-hand corner of the screen).

The first value (x in line 40) is the horizontal distance from this position, and the second value (y in line 40) is the vertical distance. The x value is negative if you want the line to go to the left, and the y value is negative if you want the line to go downwards.

When you use the DRAW codeword it is important to make sure that the line you tell the computer to draw does not go outside the display area.

Example Program

This programs draw a clock, complete with hands.
In Line 20 it draws the clock face.
Lines 40 to 150 draw the hour marks on the clock.
The big hand of the clock is drawn in line 160 and line 170 draws the small hand.

10 INK 0: FLASH 0: BRIGHT 0: CLS
11 REM BLACK ink,No flashing
12 REM no brightness, clear screen
20 CIRCLE 128,88,80
21 REM Draw a circle for the clock face
30 BRIGHT 1
31 REM Turn brightness on
40 PLOT 128,168: DRAW 0,-10: PRINT AT 2,15;"12"
41 REM Draw the mark for 12
50 PLOT 168,157: DRAW -5,-9: PRINT AT 3,20;"1"
51 REM Draw the mark for 1
60 PLOT 197,128: DRAW -9,-5: PRINT AT 6,23;"2"
61 REM Draw the mark for 2
70 PLOT 208,88: DRAW -10,0: PRINT AT 11,24;"3"
71 REM Draw the mark for 3
80 PLOT 197,48: DRAW -9,5: PRINT AT 15,23;"4"
81 REM Draw the mark for 4
90 PLOT 168,18: DRAW -5,9: PRINT AT 18,20;"5"
91 REM Draw the mark for 5
100 PLOT 128,8: DRAW 0,10: PRINT AT 19,16;"6"
101 REM Draw the mark for 6
110 PLOT 87,18: DRAW 5,9: PRINT AT 18,11;"7"
111 REM Draw the mark for 7
120 PLOT 58,47: DRAW 9,5: PRINT AT 15,8;"8"
121 REM Draw the mark for 8
130 PLOT 48,88: DRAW 10,0: PRINT AT 10,7;"9"
131 REM Draw the mark for 9
140 PLOT 58,129: DRAW 9,-5: PRINT AT 6,8;"10"
141 REM Draw the mark for 10
150 PLOT 87,157: DRAW 5,-9: PRINT AT 3,11;"11"
151 REM Draw the mark for 11
160 PLOT 128,88: DRAW 0,62
161 REM draw the big hand"
170 PLOT 128,88: DRAW 43,-25
171 REM draw the little hand