Bottom     Previous     Contents

3 Drawing simple shapes

3.0 Introduction
3.1 Codes for the PLOT statement
3.2 Activities
3.3 Using the PLOT statement
3.4 Activities
3.5 Discussion of activities

3.0 Introduction

The BBC Microcomputer provides a wide variety of plotting facilities. It can plot points, draw lines, and fill in areas - all in colour. With such a wide variety, it is not possible to have individually named statements. Instead a single statement, controlled by a series of codes, provides for all of them. It is the PLOT statement. In this chapter, we explain the various ways in which you can use the PLOT statement.

0 move relative* to last point
1 draw line relative* in current graphics foreground colour
2 draw line relative* in the logical inverse colour
3 draw line relative* in current graphics background colour
4 move to absolute position
5 draw line absolute in current graphics foreground colour
6 draw line absolute in logical inverse colour
7 draw line absolute in current graphics background colour
+16 same effects as each of the above except that it plots a dotted line
+64 same effects as each of the above except that only a single point is plotted
+72 draw a horizontal line in both directions from the current point
+80 same effects as each of the above except that it refers to filling in a triangular area between the specified point and the last two points used in plotting actions
+88 draw a horizontal line to the right of the current, reaching to the right-hand edge of the screen or to an area of background colour **

* Plotting relative means that the computer considers the origin to be the previous point which it remembers. The true screen origin is still at (0,0).

** Only available on operating systems 1.0 onwards.

Table 3.1 Codes for N in the PLOT statement

3.1 Codes for the PLOT statement

The PLOT statement is very important in graphics. It has the following form, where N can have a wide range of values depending on the type of plot which is required; and X and Y refer to the co-ordinate to which you want to PLOT:

PLOT N,X,Y

For example the following version of the PLOT statement is equivalent to the DRAW statement:

PLOT 5,X,Y

Table 3.1 shows a simplified set of codes for N in the PLOT statement, together with the feature that it produces. To use Table 3.1, you must first decide what effects you want. You wit\ probably want several simultaneously. You qet them by adding up the codes for each one. For example, to draw a dotted line, select code 5 for a line and code l6 for a dotted effect. Since the total is 21, the code for a dotted line is 21.
Some of the more commonly used codes are as shown in table 3.2. Most programs use m only a small seletion of these codes, such as 69 for plotting a point, 5 for drawing a line or 85 for filling a triangular area.

code effect
4 equivalent of MOVE
5 equivalent of DRAW
21 draw dotted
69 plot a point
71 remove a point
85 fill a triangle
77 *'fill' a fine
*For 1.0 operating systems onwards

Table 3.2 Most commonly used codes for N in the PLOT statement

The last code (77) which applies only to models with the 1.0 or later operating systems, is said to 'fill' a line. This means that it draws a line in the current foreground colour, extending horizontally left and right until it reaches either the edge of the screen or a non-background colour. It is particularly suitable for filling in the colour of some irregularly shaped area. Nevertheless it is not a complete fill routine, as it only fills up irregularities on the left or right. It does not extend up and down. In the next activities there is an example of the 77 fill form of the PLOT statement.
You will find a program much easier to read if, at the beginning of the program, you define some aptly named variables such as:

dot = 69
or line = 5
or triangle = 85

Then the PLOT statements further on in the program are much more readily recognizable because they appear as:

PLOT dot,X,Y
or PLOT 1ine,X,Y
or PLOT triangle,X,Y etc,

3.2 Activities


i. If you have a 1.0 or above operating system, you can get the feel of the fill form of the PLOT statement by running the following program, It uses the RND function in line 60 to mark at a random edge which is the left-hand edge of the block to be filled. PLOT77 is called by line 110 inside a FOR ... NEXT loop. (You can find out which version of the operating system you have by entering *FX0 which causes the number of your operating system to appear on the screen.)

10 MODE 5 :GCOL 0,129 :GCOL 0,2

20 CLG

30 REM Draw a random left-hand edge

40 MOVE 500,100

50 FOR Y=l00 TO 1000 STEP 20

60 DRAW 200+RND(600),Y

70 NEXT Y

80 MOVE 800,100

90 REM Now for the fill routine

100 FOR Y=100 TO 1000 STEP 4

110 PLOT77,900,Y

120 NEXT Y

ii. Speed is an advantage when programming graphics. You can measure the speed of execution of a program by means of the BBC Microcomputer's TIME facility. Investigate the time of execution of the above program by running it with the following additional two lines:

5 TIME = 0

130 PRINT TIME

We discuss this further in Section 3.5.

iii. One way of speeding up BASIC is to use integer variables in place of ordinary variables, For example, the above program can be speeded up by putting the integer variable Y% in place of Y. Use the editing facilities to change all occurrences of Y to Y% and re-run the program.

iv, We now show the use of an area-fill routine. The following program draws a series of circles and then fills in the area around them. The filling routine is written in BASIC but uses integer variables wherever possible to gain speed. In lines 290 and 310 there are references to GOTO, a statement which we have tried to avoid. Unfortunately the standard way round this, which is to use REPEAT ... UNTIL loops, is not possible because the recursive nature of the routine causes too many such loops. Enter the program and run it. You may like to record both the circle-drawing and the fill routines for your own use elsewhere.

10 M0DE4

20 VDUl9,0,4;0;

30 VDUl9,l,3;0;

40 PROCcircle(640,5l2,500)

50 PROCcirc1e(400,700,100)

60 PROCcircle(900,700,100)

70 PROCcircle(640,400,200)

B0 PROCfil1(500,l00)

90 END

100 :

110 DEF PROCcircle(x,y,r)

120 st=2*PI/l00

130 S=SIN(st):C=C0S(st)

140 xp=r :yp=0

150 MOVE x+r,y

160 FOR L%=l TO 200

170 xr=xp*C-yp*S

180 yp=xp*S+yp*C:xp=xr

190 DRAWx+xp,y+yp

200 NEXT L%

210 ENDPROC

220 :

230 DEF PROCfill(B%,C%)

240 LOCAL A%,X%,Y%,F%,O%

250 F%=&FFFF :A%=l3:X%=&B0: Y%=0:0%=&FFF1

260 PROCF:ENDPROC

270 DEF PROCIF:PLOT &4D,B%,C%:CALLLO%:

LOCAL U%,V%:U%=!X%ANDF%

280 B%=U%:C%=C%+4:V%=X%!4 ANDF%

290 PLOT &5C,B%,C%:CALL O%:B%=X%!4+4ANDF%:

IF V%>=B% THEN PROCF:GOTO290

300 B%=U96:C%=C%-8

310 PLDT&5C,B%,C%:CALL O%:B%=X%!4+4ANDF%:

IF V%>=B% THEN PRDCF:GOT0310

320 C%=C%+4:B%=V%:ENDPROC


3.3 Using the PLOT statement

As an example of the various applications of PLOT statements, you may like to examine the development of a program to draw a picture of a sailing boat. The display is very simply produced and is shown in Screen Display 3.1. The actual screen version looks much more interesting because it is in colour,

We assume that the boat is to be drawn anywhere on the screen using a procedure called PROCboat, which we define in terms of other procedures, as follows:

60 DEFPROCboat(X,Y,s)

70 GCOL0,l:PR0Csails(X,Y)

80 GCOL0,2:PRDCmast(X,Y)

90 GCOL0,3:PR0Cbase(X,Y)

100 ENDPROC

Screen Display 3.1

The numbers in the GCOL statements set the foreground colour to be red for the sails, green for the mast and yellow for the base.
We shall develop the procedure PROCsails first as it is the simplest. The sails are to be triangular in shape and so rely on PLOT triangle,X,Y. The same reference point X, Y wilt be chosen when calling each of the procedures, the size of the boat will be controlled by s. This means that we have to decide on the height of the sails above the reference point in terms of s. We call this 'sh' for sail height. The first sail is now drawn by two references to MOVE "and one to PLOT triangle,X,Y. The references to MOVE are necessary as the graphics routine remembers the last two plotted points and draws the triangle between these and the current point. The PROCsails procedure becomes:

120 DEFPROCsails(x,y)

130 sb=l0*s:fr=30*s:ba=40*s:sh=50*s

140 MOVE x+fr,y+sb

150 MOVE xb-a,y+ab

160 PLOT triangle,x,y+sh

170 ENDPROC

In PROCsails the two sails are drawn as a single triangle, because the overlapping mast will separate them into two. PRQCmast draws the mast as a narrow rectangular column by two calls to PLOTtriangle, as shown in lines 220 and 230. The width and height of the mast is set by 'mw' and 'mh' respectively in the following lines:

190 DEFPROCmast(x,y)

200 mw=s:mh=50*s

210 MOVE x-mw,y:MOVE x+mw,y

220 PLOT triangle,x-mw,y+mh

230 PLOT triangle,x+mw,y+mh

240 ENDPROC

The procedure for the base of the boat is given below and uses ideas similar to those for drawing triangular areas. The thickness of the base is set by the variable 'depth' and 'fr' and 'ba' are the distances to the front and the back. To give the angled prow, 'If' is the distance to the lowest part of the boat at the front.

260 DEFPROCbase(x,y)

270 depth=7*s:fr=30*s:ba=40*s:lf=25*s

280 MOVE x+fr,y

290 MOVE x-ba,y

300 PLOT triangie,x+lf,y-depth

310 PLOT triangle,x-ba,y-depth

320 ENDPROC

The complete program is given in Listing 3.1. It has three calls to PROCboat and accordingly causes three boats to be displayed.

3.4 Activities


i. Enter the program in Listing 3.1 and run it.

ii. Try modifying lines 25, 30 and 35 as shown below, order to produce simple animation for one of the boats.

25 FOR X=0 TO 600 STEP 4

30 PROCboat(X,512,4)

35 NEXT X

iii. Although the display illustrates nice animation for the front of the boat, a coloured smear is left behind it. See if you can find a way of removing it by developing a procedure called PROCrubout. We suggest a possibility in Section 3.5,

iv. Try writing a program to make the boat of Screen Display 3.1 move slowly across a green sea with its surface rippled like a sine wave. Can you program this? We give a possible program in Section 3.5.


3.5 Discussion of activities

Activity 3.2 ii: Inside the BBC Microcomputer is an accurate clock. It increments the variable TIME continuously once the computer has been turned on. However, the value held in TIME can be reset by a program at any stage. The value of TIME is measured in hundredths of a second (centiseconds) from the start Of the program where TIME is set to zero.

Activity 3.4 iii: The following is one possibility for PROCrubout:

340 DEF PROCrubout(x,y)

350 MOVE x-mw,y :DRAW x-mw,y+mh

360 DRA W x-ba,y+sb

370 DRA W x-ba,y-depth

380 ENDPROC

Its call would have to be preceded by a GCOL 0,4 statement, as follows, to set the colour to blue for redrawing the sky:

32 GCOL 0,4:PROCrubout(X,5l2)

Activity 3.4 iv: Below is one possible program to give a display Df the boat sailing across a green sea, its surface rippled like a sine wave, against a blue sky.

10 MODE5:GCOL 0,l23:CLG

20 triangie=85

22 PROCsea

25 FOR X=-l20 TO 1500 STEP 8

30 PROCboat(X,5l2,4)

32 GCOL0,4:PROCrubout(X,512)

35 NEXT X

40 END

50 :

60 DEFPROCboat(x,y,s)

70 GCOL0,l:PROCsails(x,y)

80 GCOL0,2:PROCmast(x,y)

90 GCOL0,3:PROCbase(x,y)

100 ENDPROC

110 :

120 DEFPROCsai[s(x,y)

130 sb=l0*s:fr=30*s:ba=40*s:sh=50*s

140 MOVE x+fr,y+sb

150 MOVE x-ba,y+sb

160 PLOT triangle,x,y+sh

170 ENDPROC

180 :

190 DEFPROCmast(x,y)

200 mw=s:mh=50*s

210 MOVE x-mw,y:MDVE x+mw,y

220 PLOT triangle,x-mw,y+mh

230 PLOT triangle,x+mw,y+mh

240 ENDPROC

250 :

260 DEFPR0Cbase(x,y)

270 depth=7*s:fr=30*s:ba=40*s:lf=25*s

280 MOVE x+fr,y

290 MOVE x-ba,y

300 PLOT triangle,x+1f,y-depth

310 PLOT triang1e,x-ba,y-depth

320 ENDPROC

330 :

340 DEF PROCrubout(x,y)

350 MOVE x-mw,y:DRAW x-mw,y+mh

360 DRAW x-ba,y+sb

370 DRAW x-bapy-depth

380 ENDPROC

390 :

400 DEF PROCsea

410 GCOL0,2

420 FOR X=0 TO 1280 STEP 8

430 MOVE X,0 :DRAW X,450+50*SIN(X/40)

440 NEXT X

450 ENDPROC


Next     Top