Web Design IES
Web Design in Easy Steps, now in its 7th Edition, shows you how to make effective websites that work on any device.
Sean McManus explains how to use colour swapping to create effective animations
Animation is an illusion and a magic which is all around us. You only need to have seen its most basic forms to be able to bring it to life in your own programs. Starting with something simple, tracing an image from one piece of paper and altering it slightly can be the basis of a two frame cartoon. Flicking rapidly between the two pages can create the illusion of movement, as long as the pictures are similar enough to each other.
The problem with Basic is that drawing a frame takes so long. The flick has to be quick to fool the eye, and as long as you try to redraw each frame, it's impossible for anything but the simplest sequences to be animated.
The tools are there, though. Each of the pens on a screen can contain an ink which is set using the INK command. Moreover, if it is set to contain two inks, the computer will alternate between these two inks at the rate the user specifies. When an INK command is issued for a pen, all occurances of that pen on screen are filled instantly with the ink concerned. Instantaneous magic.
The first program on the disc is a juggling clown cartoon, based on a design first drawn as a paper flick cartoon. The clown's outline is drawn in pen one. As becomes clear, though, ten balls are drawn in alternating colours. Although double the number of balls exist on screen, the INK command later comes into play to show only half of these at any given time. Pen 2 is set to ink 26,0: i.e. set to flash between bright white and black. Since the background (pen zero) is also set to black, this means that pen two will only be visible half of the time. Pen three is set to 0,26 and will be visible only the other half of the time. The effect is one of animation under automatic pilot.
Part of the beauty of animating in this way is that the computer gets on with it. Once the design has been drawn and the INK commands have been issued, the program doesn't need to attend to the animation again. The Ready prompt at the end of the Juggling Clown demo proves this. While the clown juggles in the background, you can be LISTing, EDITing or doing anything else. In the context of a program, this means that you can have dynamic backgrounds without eating memory and processing time updating them.
Those of us brought up on a solid diet of Amsoft games will remember that the title screens often included the program name in a pen which flashed between loading blocks. Now it's possible to have some form of animation happening sporadically while your game loads.
SPEED INK controls the animation rate. It takes two parameters, each being the amount of time given to each frame. Like INK, its effect is instananeous, so you can make the clown impossibly agile by issuing a SPEED INK from the Ready prompt. If the speed is set too slow, the animation illusion is lost. Values of about 7-10 are usually sensible.
For most animations, you want each frame to be visible for the same amount of time. The game Gribbet! (on the disc) uses a frog graphic, though, whose eyes were made of two pens set to flash. With a huge delay for the first frame, the frog's eyes were open as usual. For frame two, the same pens were green to give the effect of Gribbet blinking for a short while.
The same technique was used in Fishtank Simulator (also on the disc). There are often a couple of inks left over once the graphics are complete and it's worth looking at how these can be used to bring things to life.
Digital watches are much more complex than our flick cartoon, but can still use a similar philosophy. With colour swapping, the amount of a particular colour on screen is irrelevant, so the second demonstration goes for a full screen height animated countdown. It isn't strictly animated: it doesn't create the illusion of movement, as such. But it does rely on changing the screen display rapidly. The nightmare of trying to draw screen high characters anew for each frame doesn't really bear thinking about.
Each panel on the display has a different pen number. The template on the right has the pen numbers in the same arrangement as those on the left, but starting with pen 8 instead of pen 0. This allows the same data as to which panels are to be lit for a number to be used across both digits, but offset by seven for the second digit.
Lines 90 and 510 contain fill commands, which 464 users will need to remove or replace with the fill routine from the disc. The main limitation with this sort of routine is the number of pens available: fifteen at most.
Hand held LCD games show how easy it can be to create the illusion of animation, but are usually difficult to copy in this way because of the limited palette of fifteen pens.
Leicester Square is awash with colour after dark. Advertising hoardings loaded with neon lights reach up for the sky. Familar logos melt into view and away again and colours wash onto and off of the boards in all directions. The overall effect is impressive. On a smaller scale, though, each placard comprises nothing more than tubes of light being switched on and off again. Since we have the ability to flick the switch with colour swapping, it should be relatively easy for us to do animations using several frames.
We have fifteen pens at our disposal in mode 0, which means a potential of fifteen frames. Digital has already shown how this can emulate a digital display. By combining this idea and the original clown idea, we will be able to make designs consisting of many frames. Our designs are more versatile than neon lights in that our frames do not need to be made of one continuous line. We can have shapes all over the place plotted in the same pen and they can still be flicked on at the same time. Our animations can include several moving characters all over the screen which will all be moved by the program routine with no extra effort.
There are two programs on the disc to demonstrate this idea. The first of these is Bunny Simulator. Borrowed from a conjuror's act, our Bunny pops in and out of the magician's top hat. Drawing our rodent friend is a lengthy process, in part because of the presence of circles which always slow things down. While this occurs, the frames are all hidden by setting their pen to the background colour. Since it is worrying to watch a black screen do nothing for a long time, the please wait message is always a good idea. This one includes a two frame animation using an idea we found in the clown demonstration. It makes things look more dynamic and interesting, without actually swallowing any processing time. Control codes have been used to roll this message off the screen smoothly. Pressing escape twice when Bunny's frantic bouncing becomes annoying will reveal all the frames simultaneously. As frames are drawn, they overlap slightly and so they have holes in them where the frame above has cut through. The top rabbit is the last one to be drawn because it is the most important: it is the one the sequence freezes on. It would be possible to plot shared points in a different pen to any of the frames and to switch these on as necessary, but this would corrupt the pens that could be used for the original frames. If XOR were used for plotting, then crossovers between frames one and two would be in ink three. Pen three could no longer be used for a frame in its own right. The aim here is for an illusion, an over all effect, so the detail isn't critical.
Jack in the Box demonstrates this same idea again. A metronome ticks away while you "please wait". There is no reason why it needs to disappear once the animation starts- two frame flicking and program managed sequences can happen simultaneously. Its presence is just inappropriate once things begin properly.Press any key to cue Jack's ascent and descent.
In these routines, a different pen is used for the hat and the box which remains unchanged throughout all frames. Indeed, since there are spare pens on each screen, it would be possible to have a few colourful designs in the background. The main limitation is that these cannot trespass on the tower of jacks and bunnies which run up the screen in various pens.
Here's what the Bunny Simulator looks like with all the pens showing:
Keeping the viewer in the dark while drawing is going on helps to preserve the effect of spontaneity and also keeps things looking tidy. There is another way to switch the screen off while drawing to it (used in Misfit), but using inks is more flexible. As we've seen, it is possible to hide parts of the screen while using a different pen to display messages and even animations. In addition to smartening up presentation by hiding pictures as they are drawn, the INK command allows them to be faded onto the screen. The final colour swapping program shows how a palette can be faded onto the screen and out again. The initial message is more effective because it is much quicker. Line 120 contains the details of the palette colours. Pen zero is to be set to ink zero, pen one to be 26 and so on. If you want to slow things down a little, lines 210 and 280 can be made to contain a delay by cutting the REM statement from the beginning. The order of colours on the Amstrad goes roughly from dark to light but with some odd colours in between. For green screen users these discrepancies are less marked. Colour users might like to consider adapting this routine to change the order the colours follow when they fade in.
The instructions to the game Alien Intervention (on the disc) are revealed a row of pixels at a time. Working out and plotting a row of pixels and then displaying it would take until well beyond bedtime. Instead, all the text is drawn normally, but hidden by switching the inks off. Then, a row of pixels is rolled down the screen in XOR mode, changing the colour of the text as it goes to a visible colour. Chapter four looks at how XOR works on plotting colours. This fancy reverse-fade could easily have been effected horizontally, in circles or any other way you can manage to draw all over the instructions in a sensible time span.
Flashing can be used for drawing attention to important messages on screen. It is important to make sure that the SPEED INK is fast enough to stop the viewer waiting to see what they just missed flashing in the corner of the screen. A lot of people find flashing text irritating, though, and it has most effect when used fairly sparingly to highlight.
The INK command is more than just a means of accessing the full range of colours. It can be the breath of life into backgrounds, foregrounds and cartoons. Animation is an illusion. Nothing really needs to be moved as such to create the effect. As our bunny demonstrates, all you need is a top hat, a few pens and the colour of magic.
You can find these colour swapping demos on my disc of Amstrad software. It also includes the 10-liner Piano Chords Tutor, which uses colour swapping to light up the right piano keys in a chord, and Eye, which is a slightly unsettling animation of a giant eye.
In the next chapter we investigate sound and music.
© Sean McManus. All rights reserved.
Visit www.sean.co.uk for free chapters from Sean's coding books (including Mission Python, Scratch Programming in Easy Steps and Coder Academy) and more!
Web Design in Easy Steps, now in its 7th Edition, shows you how to make effective websites that work on any device.
Power up your Microsoft Excel skills with this powerful pocket-sized book of tips that will save you time and help you learn more from your spreadsheets.
This book, now fully updated for Scratch 3, will take you from the basics of the Scratch language into the depths of its more advanced features. A great way to start programming.
Code a space adventure game in this Python programming book published by No Starch Press.
Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!
In this entertaining techno-thriller for adults, Sean McManus takes a slice through the music industry: from the boardroom to the stage; from the studio to the record fair.