Commodore Banner Exchange

Zooming a square with Commodore 64 BASIC – a simple 2D realtime zoomer using sprites

Coding a zoomer on a vintage computer is something that usually asks for machine language. And even with that language, very clever code may be required to achieve nice results. Apparently simple tasks like zooming a square do require some thinkering, especially if we want the effect to be realtime. And on a Commodore 64, you have many hardware features for graphics. These can be of great help, but you have to select which one to use for the purpose.

Let’s try to code a realtime zoomer of a square (or rectangle, the concept is the same) with Commodore 64 BASIC. The task may seem a bit intimidating, but by making a proper use of what we have available, things are not as difficult as one may expect.

Given the four vertexes of the square, we have to modify the coordinates of each point so that the square becomes bigger.

The square with blue vertexes is the image to be zoomed. Given the coordinate system like on the picture, original coordinates and zoomed coordinates can be expressed as follows. We are assuming a 10 pixels zoom for each side (the size of the square will get 20 pixels longer).

A (xa, ya) ----> A' (xa-10, ya-10)
B (xb, yb) ----> B' (xb+10, yb-10)
C (xc, yc) ----> C' (xc+10, yc+10)
D (xd, yd) ----> D' (xd-10, yd+10)

Using the bitmap screen is not adviced here. Simons’ BASIC or other BASIC extensions may be not fast enough to draw the lines needed to join the vertexes. Furthermore, we want the square to be filled, and the filling routines provided are just too slow to get a fast effect.

Anyway, if we are happy with smooth zooming (e.g. zooming-in the square by 1 pixel per side only each time), the following Simons’ BASIC program will accomplish the task (you may paste it to the Vice emulator – edit menu). Anyway, line drawing routines are still not fast enough to allow for a smooth effect, so the result is not that good. If speed is required, the bitmap screen just asks for machine language.

10 colour 0,11
20 hires 7,11
22 l=1:x=159:y=99:k=1
24 c(2)=1:c(0)=0
30 rec x,y,l,l,c(k+1)
32 l=l+2*k:x=x-k:y=y-k:ifl>80orl<2then k=-k
38 goto 30

Sprites are helpful instead. We can move many points very efficiently with them, even by using BASIC. But since sprites only offer efficient translation of graphical objects, what are they useful for in this situation? A zoomer seems to be something much more complex than simple translations.

We are not going to use sprites to draw the square itself. Sprites will be used to hide the fully zoomed square. And, since they can be moved very smoothly and efficiently, we will make them move so that they will let you see the square. On each movement, only a small additional part of the square will be shown. As soon as sprites keep moving, a bigger part of the square will be shown. Motion is arranged so that you actually get the idea of a zooming square. But, what you see is only what you believe. Actually, that’s not a zooming square. It’s just that the space between the sprites is shaped like a square, and as soon as sprites move, this space becomes bigger and bigger.

The programs

The following programs will show off some methods to code a zooming square with Commodore 64 BASIC V2.

Be sure to test these programs on a stock Commodore 64 computer with no cartridge inserted, as some cartridges may affect the timing of these routines and cause flickering.

The program zoomer V1 only makes use of expanded sprites. Four sprites are moved so that they create a square-shaped space. Two sprites are moved horizontally, and the other two are moved vertically. A total of four POKE instructions per frame is required to move them. Sprites are hidden – they have the same color as the background. This way, you will only see the zooming square.

Notice that X and Y coordinates of the sprites are changed according to the formulas above. A one pixel movement for each side is performed here, but it’s easy to obtain a movement by two, three or more pixels.

The program zoomer v1 tricks just shows you how the trick works by setting the sprites’ color to a different value than background color. This way, sprites can be viewed.

In order to zoom a bigger square, the program zoomer V2 makes use of both four expanded sprites and multi-color programmable characters.

Programmable characters allow for efficient vertical movement, even with BASIC. In facts, to obtain the zoom effect along the Y direction, only two POKEs are required.

Sprites work best for horizontal movement. You only need one POKE to move an entire sprite. To move all the pixels of a single programmable character instead, eight POKE instructions would be needed.

To zoom a square as big as the one of the program zoomer v2 by using sprites only, eight sprites would be needed. That would ask for eight POKEs to move them all. Instead, by using sprites and programmable characters combined, only six POKEs are needed for each step. A smaller number of counters can be used as well, allowing faster program execution.

The program zoomer v2 tricks shows off the trick used to simulate the zoom effect.

The Commodore 64 Programmer’s Reference Guide offers a nice introduction to sprites. That information is what I have used to code these programs. Despite the need of several POKE instructions, sprites are quite easy to handle even with BASIC 2.0. A simple sprite tutorial may be found here.

Although those programs are not perfect, I think that movement is smooth enough. And, such programs show off once more the ability of the Commodore 64 to achieve with BASIC V2 tasks commonly thought to be machine language only.

Commodore Banner Exchange
Insert math as
$${}$$