Bottom     Previous     Contents

4 Animation

While it is relatively easy to draw complex static objects, animation is considerably harder. The processing power and memory size of the BBC machine limit the quality of animated images that can be produced. To achieve a fully--animated picture, a series of views of the scene must be rapidly displayed in sequence. This requires a large amount of processing to be done. Despite this, it is possible to derive good effects by exploiting the ability to change the palette of logical-physical colour relationships.

Redrawing

One way of producing movement is to continuously alter the picture that is being displayed. The following program uses this technique to simulate a kaleidoscope. This does not produce a smoothly-animated image, but the pattern produced is animated in the sense that it is always in a state of f1ux. The program also demonstrates that simply redrawing a pattern is not fast enough to produce true animation.

Kaleidoscope

In a mechanical kaleidoscope coloured flakes are randomly shaken up, and a symmetrical pattern is produced by reflecting these in two mirrors. This program generates three random points that form the edges of a triangle, and then rotates and reflects the triangle to produce a similar effect to that produced by the mirrors.

KALEIDO

0 REM Kaleidoscope

20 MODE2

30 VDU5

40 VDU29,640;520;

50 REPEAT

60 FORL%=12TO500STEP20

70 GCOL0,RND(8)-1

80 X%=RND(L%):Y%=RND(X%)

90 X1%=RND(L%):Y1%=RND(X1%)

100 X2%=RND(L%):Y2%=RND(X2%)

110 MOVEX%,Y%:MOVEX1%,Y1%:PLOT85,X2%,Y2%

120 MOVE-X%,Y%:MOVE-X1%,Y1%:PLOT85,-X2%,Y2%

130 MOVEX%,-Y%:MOVEX1%,-Y1%:PLOT85,X2%,-Y2%

140 MOVE-X%,-Y%:MOVE-X1%,-Y1%:PLOT85,-X2%,-Y2%

150 MOVEY%,X%:MOVEY1%,X1%:PLOT85,Y2%,X2%

160 MOVE-Y%,X%:MOVE-Y1%,X1%:PLOT85,-Y2%,X2%

170 MOVEY%,-X%:MOVEY1%,-X1%:PLOT85,Y2%,-X2%

180 MOVE-Y%,-X%:MOVE-Y1%,-X1%:PLOT85,-Y2%,-X2%

190 NEXT L%

200 UNTIL FALSE

Description of program

20	16-colour mode (actually, only 8 non-flashing colours).
30	Remove text cursor.
40	Define the centre of the kaleidoscope to be at the origin - here this is just off-centre of the screen.
60	L% controls the size of the kaleidoscope. This loop makes the pattern grow outwards. Select a colour at random, including black.
80-100	Choose the corners of the initial triangle.
110-180	Fill in the initial triangle with 5 other rotations and reflections of it.
190	Start again.

Palette changes

Drawing or redrawing an object is a relatively slow process, but palette changes can alter the appearance of an object very rapidly. If a single object is drawn with a number of different colours you can give the illusion of motion simply by changing the palette, and this avoids the need to redraw each view of the object. A similar technique is commonly used in neon signs that appear to move by changing the coloured lights that are turned on.

Animation by palette changes alone is most easily applied to a rotating object such as a beach ball, where the rotating object does not 'change shape' but stays within the confines of its original outline as it turns.

In programs that use rapid palette changes 'you may notice that the display is subject to dark bands and flicker. This is because the palette changes are not synchronised to the video scan time. To avoid this you could wait for vertical sync before changing the palette. This can be done using the operating system call *FXl9 which exists in release 1.0 of the MOS.

Flat Spiral

Here is a short program that uses palette changes to rotate a flat spiral as it is being drawn. The spiral grows outwards from the centre of the screen, rotating as it expands. The pattern drawn is in fact an ellipse, and this gives the impression of a 3-dimensional spinning disc. SPIRAL1

SPIRAL1

0 REM Flat Spiral

20 MODE1

30 VDU5

40 C%=1:F%=RND(5)

50 VDU29,640;512;

60 MOVE0,0

70 FORA=0TO300STEP0.2

80 GCOL0,1+(3.8*A)MOD3

90 DRAW3*A*SIN(A),2*A*COS(A)

100 FORI%=1TO3

110 VDU19,I%,(C%+I%)MOD3+F%;0;

120 NEXT

130 C%=(C%+1)MOD3

140 NEXT

150 GOTO 20

Description of program

40	C% keeps track of the current state of the palette. F% determines which physical colours will appear.
50	Put the origin in the centre of the screen.
70	The variable A determines the angle around
the spiral and the size.
100-120	Change the colours of the arms as we draw around the spiral. The factor 3.8 makes the arms reasonably straight.
100-120	Change the palette to give the impression of movement by moving each of the physical-logical colour relationships on one step.
130	Alter C% so that next time the palette is changed the colours will move on one step.
150	Start again.

Rotating squares

This program produces a curious spiral pattern by rotating squares that gradually increase in size. When the pattern has been completed a moving effect is produced by changing the palette.

ROTSQ

0 REM Rotating Square

20 MODE1

30 VDU5

40 VDU29,640;512;

50 C%=1

60 FORI%=0TO900 STEP 12

70 A=I%/200

80 X%=I%*SIN(A)

90 Y%=I%*COS(A)

100 MOVEX%,Y%

110 DRAW-Y%,X%:DRAW-X%,-Y%:DRAWY%,-X%:

DRAWX%,Y%

120 GCOL0,C%

130 C%=(C%+1)MOD3+1

140 NEXT

150 F%=3

160 REPEAT

170 FORJ%=1TO3

180 VDU19,J%,(J%+C%)MOD3+F%;0;

190 NEXT

200 C%=(C%+1)MOD3+1

210 DELAY=INKEY(10)

220 UNTIL FALSE

Description of program

20	4-colour mode.
30	Remove text cursor.
40	Put the origin in the centre of the screen.
50	Hold the the current logical colour.
60	The size of the squares is determined by I%.
70	A is the angle through which each square is rotated.
80-90	Calculate the coordinates of one corner.
100-110	Draw a rotated square.
120	Select colour.
130	Choose the colour of the next square.
140	On leaving this loop the pattern has been drawn. All that follows is the palette changes which give the impression of animation.
150	F% determines which three physical colours
will be displayed.
170-190	Change each colour to the one next to it.
200	Select the next colour.
210	Cause a short delay. (Pressing any key will cancel the delay.)

Multi-coloured spiral

Animation using palette changes becomes smoother as more logical colours are used. Here all the non-flashing colours are used to fill a spiral, which is then rotated when any key is pressed. The spiral is filled using rings of triangles that alternately point inwards and outwards, so that adjacent rings mesh together.

SPIRAL2

0 REM Spiral

20 MODE2

30 VDU29,640;512;23;9;0;0;0;

40 MOVE0,0

50 MOVE0,0

60 Z=512

70 A%=180

80 P=8

90 DIMA(480):FORQ=0TO480:A(Q)=SINRADQ

:NEXT

100 R%=1

110 VDU5

120 REPEAT

130 R%=R%-1:IFR%=0 R%=6

140 FORB%=0TO5

150 FORA%=B%TOB%+359STEP6

160 GCOL0,R%:R%=R%+1:IFR%>6 R%=1

170 PLOT&55,A(A%+90)*Z+1,A(A%)*Z+1

180 MOVEA(A%+93)*(Z-72),A(A%+3)*(Z-72)

190 NEXT

200 Z=Z-P

210 NEXT

220 UNTILZ<=120

230 FORI%=0TO7:VDU19,I%,0;0;:NEXT

240 A%=GET

250 DIM A$(7)

260 FORZ=1TO6:FORY=1TO6

270 A$(Z)=CHR$19+CHR$Y+CHR$((Y+Z-1)MOD

6+1)+CHR$0+CHR$0+CHR$0+A$(Z):NEXT

280 NEXT

290 FORQ%=1TO6:N%=TIME+4:REPEATUNTILTI

ME>N%:PRINTA$(Q%);:NEXT

300 GOTO290

Description of program

30	Set up the origin at the centre of the screen and turn interlace off.
90	Compile a table of sine values to save time later on.
110	Turn cursor off.
120	This outer loop, in conjunction with the loop starting at line 140, decrements the radius of the circles drawn by the inner loop (lines 150-190), thus making the spiral grow inwards.
150-190	This inner loop draws the circle of triangles.
200-220	Close outer loop
230	Make the screen go black.
240	Wait for a key to be pressed.
250-280	Set up string array A$ to change the palette.
290-300	Change the palette using predefined array.

Rotating Fan

Here is a program that simulates the rotating fans inside a jet engine. The fan blades are coloured red, white and blue, and are drawn to give a perspective view of the fan. Three fans are drawn, and then rotated. The central fan appears to rotate in the opposite direction to the other two; this is because when this fan is drawn it is coloured in the opposite direction to the outer fans.

ROTFAN

0 REM Rotating fan

20 MODE1

30 VDU19,2,4;0;

40 VDU5

50 X%=740:Y%=612:S%=400:C%=1:N%=TRUE

60 FOR FAN=1 TO 3

70 N%=NOT N%

80 X%=X%-100:Y%=Y%-100:S%=S%-50

90 FORA=1.25*PI TO PI/4-PI/35 STEP -P

I/35

100 C%=(C%+1)MOD3

110 IF N% THEN CT%=2-C% ELSE CT%=C%

120 PROCSIDE(X%,Y%,S%,A,CT%+1)

130 PROCSIDE(X%,Y%,S%,2.5*PI-A,3-CT%)

140 NEXT A,FAN

150 C%=1

160 REPEAT

170 FORI%=1 TO 3

180 J%=(C%+I%)MOD3 +1

190 IFJ%=2 THEN J%=4

200 IF J%=3 THEN J%=7

210 VDU19,I%,J%;0;

220 NEXT

230 C%=C%+1

240 DELAY=INKEY(12)

250 UNTIL FALSE

260 DEFPROCSIDE(X%,Y%,S%,A,C%)

270 X1%=S%*COSA:Y1%=S%*SINA

280 D%=S%/3

290 VDU29,X%;Y%;

300 GCOL0,C%

310 MOVE0,0:PLOT0,X1%,Y1%:PLOT81,D%,D%

320 PLOT0,-X1%,-Y1%:PLOT85,0,0

330 ENDPROC

Description of program

30	Redefine the palette to make logical colour
2 appear as dark blue.
50	Position the centre of the current fan at the point (X%, Y% ) . S% gives the radius, C% controls the colour of the blades, and N% affects the order in which the colours are altered and thus the directions in which the fans will rotate.
60	Draw a fan each time round this loop.
70	Toggle N% so that adjacent fan will rotate in opposite directions.
80	Alter X%,Y% and S% so that the fans appear to approach the observer and get smaller towards the front.
90	Draw a fan with two vanes for each value of A.
100	Select the colour of the next vane.
110	Alter the order in which colours are selected depending on the value of N%,
120-130	Draw two vanes. This ensures that the closer vanes obscure the more distant ones.

On leaving these loops the entire picture has been drawn, and all that follows is concerned with palette changes.

150	C% keeps track of the state of the palette.
160	Move all the logical-physical colour relationships on one step each time around this loop.
170	I% runs through all the logical colours for this mode.
180	J% is the next physical colour to select,
190-200	Alter J% so that the colours dark blue and white appear.
210	Change the palette for each value of I%.
230	Update C% so thegt the colours will move on one step.
240	Wait 12 centi--seconds.
250	Carry on forever.
260	PROCSIDE draws a single vane of the fan, which resembles a page of an open book, and takes the following parameters:
	X%,Y% gives position of the centre of the fan.
	S% is the radius of the fan.
	A is the angle of the vane.
	C% is the logical colour of the vane.
280	(Xl%,Yl%) is the point on the front edge of the vane.
290	D% is used to draw to the back the vane.
310-320	Put the origin at (X%,Y%).

Beach balls

This program draws a ring of multicoloured beach balls. These are then rotated by palette changes. The procedure PROCEALL draws a single ball. Since it takes quite a long time to draw the entire ring it might be best to alter the program to draw and rotate a single ball first. This will avoid delays if the palette-changing code does not work the first time you run it.

BEACHBA

0 REM Beach Balls

20 MODE 1

30 VDU 5

40 S%=100

50 FOR T=0 TO PI-PI/6 STEP PI/6

60 S%=S%+10

70 PROCBALL(S%,640+500*SIN(T),512+150*COS(T),1)

80 NEXT

90 S%=100

100 FOR T=-PI/6 TO -PI STEP -PI/6

110 S%=S%+10

120 PROCBALL(S%,640+500*SIN(T),512+150*COS(T),1)

130 NEXT

140 REPEAT

150 FOR F=1 TO 6 STEP 0.02

160 FOR I%=1 TO 3

170 VDU 19,I%,(C%+I%)MOD3+F;0;

180 NEXT

190 C%=(C%+1)MOD3

200 A=INKEY(10)

210 NEXT

220 UNTIL FALSE

230 END

Description of program

40	S% gives the radius of the ball.
50-80	Draw the balls on the right-hand side of the ring, increasing the size of the balls as they come towards the viewer.
90-130	Draw the balls on the left-hand side of the ring, starting with the most distant ball as before.
140	Now rotate the balls forever.
150	Determine which physical colours will appear in the ball. This loop makes the balls change colour after rotating for a while.
160-210	Rotate the balls using palette changes.

PROCEALL

The ball is drawn by running round and round an ellipse that gradually gets thinner and thinner. The impression of depth results from the way in which the differently-coloured ellipses are overlayed to resemble the segments of a beach ball. The procedure uses the following parameters:

SIZE% gives the radius of the ball.

(X%,Y%) is the position of the centre of the ball.

C% is the first colour to be used. This affects the direction in which the ball will rotate when the palette changes begin.

240 DEFPROCBALL(SIZE%,X%,Y%,C%)

250 VDU 29,X%;Y%;

260 MOVE 0,0

270 MOVE0,SIZE%

280 FOR A=0 TO 60.4 STEP 0.2

290 SA=SIN(A)

300 Q%=1+(1+A/(PI*2))MOD3

310 GCOL 0,Q%

320 IF SA<0 THEN GCOL 0,4-Q%

330 X%=SIZE%*SA*COS(A/40)

340 PLOT 85,X%,SIZE%*COS(A)

350 PLOT 85,X%,0

360 NEXT

370 ENDPROC

Description of PROCBALL

250	Put the origin at the centre of the ball.
260	Move to the first point on the shrinking ellipse path.
280	Sweep round and round the ellipse incrementing the angle A.
290	Save SIN(A) as SA so that this is only calculated once.

Instant plotting

The idea behind 'instant plotting' is to use' palette changes to obscure the next view while it is being drawn. Then by altering the palette it is possible to swap instantly from one frame to the next.

The simple approach of using a different logical colour for the next view is complicated by the fact that in each frame the object being drawn will probably overlap with the previous view. To overcome this the next view can be drawn using the graphics action OR, while the palette changes take care of the added complication of overlapping parts that this introduces.

The various stages in the method are illustrated in the diagrams that follow.

  1. Start with the initial view drawn in logical colour l.

  2. Draw the next view in logical colour 2 using graphics action OR.

  3. Change the palette to show logical colour 2 and obscure logical colour l.
  4. Remove the old view by redrawing it in logical colour 2 using graphics action AND.

  5. Repeat from step I but now the initial view is in colour 2.

Tumbling box

This program demonstrates how the 'instant plotting' technique can be used to produce a remarkably effective animated view. The program shows a box tumbling towards you.

BOX

0 REM Tumbling box

20 MODE1

30 VDU29,640;512;

40 VDU5

50 COL%=RND(7)

60 VDU19,3,COL%;0;19,1,COL%;0;

70 C%=1:A=4

80 GCOL0,C%:PROCBOX(A,A*10)

90 PROCBOX(A,A*10)

100 VDU19,C%,COL%;0;19,3-C%,0;0;

110 REPEATA=A+0.1

120 C%=C%EOR3

130 GCOL1,C%:PROCBOX(A,A*10)

140 VDU19,C%,COL%;0;19,3-C%,0;0;

150 GCOL2,C%:PROCBOX(A-0.1,10*(A-0.1))

160 UNTIL FALSE

Description of program

50	Determine the physical colour of the moving box.
60	Make logical colours 3 and I appear as physical colour COL%.
70	C% determines the physical colour to use. A gives the size and orientation of the box.
80-90	Draw the first view of the box.
100	Ensure the next view will not appear while it is being drawn.
110	Each time around this loop a new box is drawn and the previous view is undrawn.
120	Toggle the value of C% between I and 2. OR the new box.
140	Show the new view and obscure the old one.
150	Remove the old box by ANDing with logical colour C%.
160	Carry on forever.

PROCBOX

This draws a wire-frame view of a box. The position and orientation of the box are determined by the value of AN. S% gives the size of the box. The box is constructed by first drawing the 'front' face, and then drawing an identically-shaped 'back' face running up and down the connecting edges as this is done.

Description of PROCBOX

280	Draw one face.
210	Draw an edge joining the 'front' and 'back' faces.
220-240	Draw three lines of the 'back' face with back-front connecting edges.
250	Draw the final line of the back face.

Condor

Here, four lines are used to represent a majestic condor soaring above the Andes. The image is convincing because of the way in which these simple lines are smoothly-animated to capture the motion of the bird's wings. The various wing positions used in this animation are shown below:

The background landscape is built out of random lines. These give the impression of dark peaks rising from a seething mass of vegetation.

CONDOR

0 REM Condor

20 MODE1

30 VDU5

40 PROCANDES

50 C%=1:L%=FALSE

60 ANGLE=0

70 REPEAT

80 ANGLE=ANGLE+0.2

90 C%=C%EOR3:GCOL1,C%

100 OX%=640+500*COS(ANGLE/12)

110 OY%=712+200*SIN(ANGLE/12)

120 X%=(OY%-1030)/4:Y%=X%*COS(ANGLE)

130 A%=X%*1.5:B%=A%*COS(ANGLE-0.4)

140 PROCBIRD(X%,Y%,A%,B%,OX%,OY%)

150 VDU19,C%,2;0;19,3-C%,0;0;

160 IF L% THEN GCOL2,C%:PROCBIRD(X1%,Y

1%,A1%,B1%,OX1%,OY1%) ELSE L%=TRUE

170 X1%=X%:Y1%=Y%

180 A1%=A%:B1%=B%

190 OX1%=OX%:OY1%=OY%

200 UNTIL FALSE

340 ENDPROC

Description of program

50	L% is used to decide whether there is an old view of the bird that has to be undrawn. ANGLE determines both the wing position and the bird's location.
100-110	Calculate the new position of the bird.
120-130	Calculate the new wing positions.
140	Draw the new bird.
150	Flip to view the new bird.
160	Undraw the old bird, unless this is the first time around the loop and there is no old bird to undraw.
170-190	Make the new bird the old bird.

PROCANDES

210 DEFPROCANDES

220 GCOL0,3

230 VDU19,3,2;0;

240 MOVE0,0:DRAW1279,0:DRAW1276,1020:D

RAW0,1020:DRAW0,0

250 FORJ%=-50 TO 100 STEP 4

260 MOVE0,J%

270 FORI%=0TO130

280 PLOT1,10,RND(25)-12

290 NEXT I%,J%

300 ENDPROC

Description of PROCANDES

220	Logical colour 3 is not altered by the animation palette changes.
240	Draw a frame around the screen.
250	For each value of J% we draw a random jagged line across the screen.
270-290	Draw a wiggly line from left to right.

PROCBIRD

310 DEFPROCBIRD(X%,Y%,A%,B%,OX%,OY%)

320 VDU29,OX%;OY%;

330 MOVE-A%,B%:DRAW-X%,Y%:DRAW0,0:DRAWX%,Y%:DRAW

A%,B%

Description of PROCBIRD

310	PROCEIRD takes the following parameters:

	OX% and OY% define the origin for the bird

	A% and B% are the ends of the wings

	X% and Y% are the elbows, or 'bends' in the wings

Plankton

This program draws a weird pattern that looks a bit like a microscopic bug that pollutes the water supply. The program picks a random physical colour for the parts of successive views of the bug that overlap.

PLANK

0 REM Plankton

20 MODE1

30 VDU5

40 DIM S(121)

50 I%=-2

60 FORA=0TO 2*PI STEP PI/30

70 I%=I%+2

80 S(I%)=400*COS(A)

90 S(I%+1)=400*SIN(A)

100 NEXT

110 C%=1:L%=FALSE:COL%=RND(7)

120 VDU19,2,COL%;0;19,3,RND(7);0;

130 REPEAT

140 FOR J%=0 TO 118 STEP 2

150 C%=C%EOR3:GCOL1,C%

160 PROCPAT(J%)

170 VDU19,C%,COL%;0;19,3-C%,0;0;

180 IF L% THEN GCOL2,C%:PROCPAT(J%-2)

ELSE L%=TRUE

190 NEXT

200 UNTIL FALSE

Description of program

40	The array S will hold a table of coordinates.
50-100	Save the coordinates that are calculated from the slow trig functions SIN and COS in the array S.
140	J% has the same effect as an angle that rotates once as J% goes from 0 to 118.
160	Draw the new pattern.
180	Remove the old pattern.

PROCPAT

This draws the micro-organism in an orientation determined by J%.

PROCPAT

210 DEFPROCPAT(J%)

220 FORI%=0TO500 STEP 20

230 J%=(J%+2)MOD120

240 X%=S(J%):Y%=S(J%+1)

250 VDU29,400+I%;512;

260 MOVE X%,-Y%:DRAW0,0:DRAW X%,Y%

270 NEXT

280 ENDPROC

Description of PROCPAT

220 I% runs along the backbone.

230	This puts the legs at different angles.
240	Look up the (X%,Y%) position from the value of J%.
250	Move the origin.
260	Draw a pair of 'legs'.


Next     Top