Part 17
Graphics
Subjects covered...
PLOT, DRAW, CIRCLE
Pixels
For all of this section, type in the example programs, commands and
RUN in the small screen (use the edit menu's Screen option).
In this section we shall see how to draw pictures on the +3. The part
of the screen you can see has 22 lines and 32 columns, making 22x32
=704 character positions. As you may remember from part 16, each of
these character positions is made up of an 8 x 8 grid of dots which
are called pixels (picture elements).
A pixel is specified by two numbers - its coordinates. The first, its
x coordinate, says how far it is across from the extreme left-hand
column. The second, its y coordinate, says how far it is up from the
bottom. These coordinates are usually written as a pair in brackets,
so (0,0) (255,0) (0,175) and (255,175) are the bottom left, bottom
right, top left and top right corners of the screen.
If you have trouble memorising which coordinate is which, simply
remember that 'x is a cross' (x is across).
The statements...
PLOT x coordinate, y coordinate
..inks in the pixel with these coordinates, so this measles program...
10 PLOT INT ( RND *256), INT (RND *176): INPUT a$: GO TO 10
...plots a random point each time you press ENTER.
Here is a rather more interesting program. It plots a graph of the
function SIN (a sine wave) for values between 0 and 2*PI...
10 FOR n=0 TO 255
20 PLOT n, 88+80* SIN (n/128*PI )
30 NEXT n
This next program plots a graph of SQR (part of a parabola) between
0 and 4...
10 FOR n=0 TO 255
20 PLOT n, 80* SQR (n/64)
30 NEXT n
Notice that pixel coordinates are rather different from the line and
column in an AT item. You may find that the diagram in part 15 of this
chapter is useful when working out pixel coordinates and line and
column numbers.
To help you with your pictures, the +3 will draw straight lines,
circles and parts of circles for you, using DRAW and CIRCLE
statements.
The statement DRAW (to draw a straight line) takes the form...
DRAW x, y
The starting place of the line is the pixel where the last PLOT, DRAW
or CIRCLE statement left off (this is called the PLOT position - RUN,
CLEAR, CLS and NEW reset it to the bottom left-hand corner, at 0,0);
the finishing place of the line is x pixels to the right of that and y
pixels up. The DRAW statement on its own determines the length and
direction of the line, but not its starting point.
Experiment with a few PLOT and DRAW commands, for instance...
PLOT 0,100: DRAW 80,-35
PLOT 90,150: DRAW 80,-35
Notice that the numbers in a DRAW statement can be negative, but those
in a PLOT statement can't.
You can also plot and draw in colour, although you have to bear in
mind that colours always cover the whole of a character cell and
cannot be specified for individual pixels. When a pixel is plotted, it
is set to show the full ink colour, and the whole of the character
cell containing it is given the current ink colour. This program
demonstrates that point...
10 BORDER 0: PAPER 0: INK 7: CLS: REM black out screen
20 LET x1=0: LET y1=0: REM start of line
30 LET c=1: REM for ink colour, starting blue
40 LET x2= INT ( RND *256): LET y2= INT ( RND *176): REM
random finish on line
50 DRAW INK c;x2-x1,y2-y1
60 LET x1=x2: LET y1=y2: REM next line starts where last
one finished
70 LET c=c+1: IF c=8 THEN LET c=1: REM new colour
80 GO TO 40
The lines seem to get broader as the program goes on, and this is
because a line changes the colours of all the inked-in pixels of all
character cells that it passes through. Note that you can embed PAPER,
INK, FLASH, BRIGHT, INVERSE and OVER items in a PLOT or DRAW statement
just as you could with PRINT and INPUT. They go between the keyword
and the coordinates, and are terminated by either semicolons or
commas.
An extra frill with DRAW is that you can use it to draw part of
circles instead of straight lines, by including an extra number to
specify an angle to be turned through. The form is...
DRAW x,y,a
x and y are used to specify the finishing point of the line just as
before, and a is the number of radians that it must turn through as
it goes. If a is positive then it turns to the left, if a is negative
then it turns to the right. Another way of seeing a is as showing the
fraction of a complete circle that will be drawn, (a complete circle
is 2*PI radians) so if a equals pi it will draw a semicircle, if a
equals 0.5*PI a quarter if a circle, and so on.
For instance, suppose a equals PI. Then whatever values x and y take,
a semicircle will be drawn.
Try...
10 PLOT 100,100: DRAW 50,50, PI
...which will draw this...
`-. Finish at (150,150)
`
`
:
:
;
,'
`--______--'
Start at (100,100)
The drawing starts off in a south-easterly direction, but by the time
it stops, it is going north-west. In between, it has turned through
180 degrees, or PI radians (the value of a).
Run the program several times, with PI replaced by various other
expressions, e.g. -PI, PI/2, 3*PI/2, PI/4, 1, 0, etc.
The last statement in this section is CIRCLE, which draws an entire
circle. You specify the coordinates of the centre and the radius of
the circle using...
CIRCLE x coordinate, y coordinate, radius
Just as with PLOT and DRAW, you can put various sorts of colour items
in at the beginning of a CIRCLE statement.
The POINT function tells you whether a pixel is ink or paper colour.
Its two arguments are the coordinates of the pixel (which must be
enclosed in brackets) and its result is 0 if the pixel is paper
colour, or 1 if its ink colour. Try...
CLS : PRINT POINT (0,0): PLOT 0,0: PRINT POINT (0,0)
Type...
PAPER 7: INK 0
...and investigate how INVERSE and OVER work inside PLOT statement.
These two affect just the relevant pixel, and not the rest of the
character cell. They are normally off (0) in a PLOT statement, so you
only need to mention them to turn them on (1).
Here is a list if the possibilities for reference:
PLOT; - This is the usual form. It plots an ink
dot, i.e. sets the pixel to show the ink
colour.
PLOT INVERSE 1; - This plots a dot of 'ink eradicator',
i.e. it sets the pixel to show the paper
colour.
PLOT OVER 1; - This exchanges the pixel colour with
whatever it was before, so if it was ink
colour then it becomes paper colour, and
vice versa.
PLOT INVERSE 1; OVER 1; - This leaves the pixel exactly as it was
before, but note that it also changes the
PLOT position, so you might use it simply
to do that.
As another example of using OVER statement, fill the screen up with
writing using black on white, and then type...
PLOT 0,0: DRAW OVER 1;255,175
This will draw a fairly decent line, even though it has gaps in it
wherever it hits some writing. Now type in exactly the same command
again. The line will vanish without leaving any trace whatsoever -
this is the great advantage of OVER 1. If you had drawn the line
using...
PLOT 0,0: DRAW 255,175
...and erased using...
PLOT 0,0: DRAW INVERSE 1;255,175
...then you would also have erased some of the writing.
Now try...
PLOT 0,0: DRAW OVER 1;250,175
...and try to 'undraw' it using...
DRAW OVER 1;-250,-175
This doesn't quite work because the pixels that the line uses on the
way back are not quite the same as the ones that it used on the way
there. You must therefore undraw a line in exactly the same direction
as you drew it.
One way to get unusual colours is to speckle two normal ones together
in a single square, using a user-defined graphic. Try this program...
1000 FOR n=o TO 6 STEP 2
1010 POKE USR "a"+n, BIN 01010101: POKE USR "a"+n+1,
BIN 10101010
1020 NEXT n
1030 REM now press GRAPH then A
...which gives the user-defined graphic corresponding to a chessboard
pattern. If you print the character (press GRAPH then A) you will find
that the character is reproduced in a combination of the current paper
and ink colours.
Exercises...
1. Experiment with PAPER, INK, FLASH and BRIGHT items in a PLOT
statement. These are the parts that affect the whole of the character
cell containing the pixel. Normally it is as though the PLOT statement
had started off...
PLOT PAPER 8; FLASH 8; BRIGHT 8; ...etc
...and only the ink colour of a character cell is altered when
something is plotted there, but you can change this if you wish.
Be especially careful when using colours with INVERSE 1, because this
sets the pixel to show the paper colour, and may change the ink
colour, which might not be what you expect.
2. If you have read part 10, see if you can work out how to draw
circles using SIN and COS. Run this program...
10 FOR n=0 TO 2* PI STEP PI /180
20 PLOT 100+80* COS n, 87+80*SIN n
30 NEXT n
40 CIRCLE 150, 87, 80
You can see that the CIRCLE statement is much quicker, albeit less
accurate.
3. Try...
CIRCLE 100,87,80: DRAW 50,50
You can see from this that the CIRCLE statement leaves the PLOT
position at a rather indeterminate place - it is always somewhere
about half way up the right-hand side of the circle. You will usually
need to follow the CIRCLE statement with a PLOT statement before you
do any more drawing.