GFAgraphics

Introduction to graphics

Thanks to the VDI GFABASIC offers the coder a wealth of commands to draw something on screen. This part of the tutorial aims to help you getting started with graphics from GFABASIC.

First of all you have to understand how a nice picture works on the Atari ST. Everything you see on your screen is made up from tiny little dots. With the various graphics commands you can manipulate all of those dots to display anything on screen.

The amount of dots you can manipulate is dictated by the current screen resolution. The ST offers 3 different resolutions. By default GFABASIC starts your program in the current one so if you did boot GFA from a medium resolution desktop your program will use medium resolution too. (One can change that behaviour but that is not the goal of this part of the tutorial.)

The screen resolutions differ on their size and the amount of colors you can use to draw the picture. Without tricks the ST offers the following video modes:

• ST-LOW: 320x200 pixels, 16 colors
• ST-MED: 640x200 pixels, 4 colors
• ST-HIGH: 640x400 pixels, 2 colors

Pixels are addressed by pairs of cartesian coordinates. However their behaviour is different from what you know fom your math lessons at school. On the ST 0,0 is the upper left corner, but 100,100 is down to the right. Just take an easy example, simply type in the following program and click run. It will draw 3 dots on screen.

CLS
COLOR 1
PLOT 10,10
PLOT 75,50
PLOT 150,150
VOID INP(2)
EDIT

You now have learned two important commands. COLOR allows you to choose one of the colors you want to use from that on to draw on your screen. Take note it only affects line and dot commands and not filled structures. The other command is PLOT which draws a single dot.

Let's see the following program. It will fill the screen line by line very slowly because drawing single pixels is slow compared to drawing multiple ones in one go. This code also shows you a way to determine the screen resolution your ST is in.

CLS
SELECT XBIOS(4)   ! which resolution are we in?
CASE 0  ! ST-LOW
 COLOR 4
 width%=319
 height%=199
CASE 1  ! ST-MED
 COLOR 2
 width%=639
 height%=199
CASE 2  ! ST-HIGH
 COLOR 1
 width%=639
 height%=399
ENDSELECT
' now we loop through all lines on screen
FOR y%=0 to height%
 ' draw a pixel in all columns of the current line
 FOR x%=0 to width%
  PLOT x%,y%    ! draw pixel
 NEXT x%
NEXT y%

As you can see the coordinates count up and the screen fills from top down. Users of a color monitor will notice that the screen fills in a different color.

That was awfully slow don't you think? We can improve it!

Drawing lines

Basically the program above does draw lines on screen. But instead of drawing each dot yourself you can let GFABASIC do this tedious task for you. Not very surprisingly this is very easy and a lot faster too. Simply eliminate the inner loop of the program above, the FOR x%=... one including its NEXT x% statement and write the following:

LINE 0,y%,width%,y%

And presto, the whole thing is faster now. LINE does exactly what its name implies, it draws lines. And those lines do not need to be horizontal at all. They can go from any location to another on screen. Just alter the coordinate pairs. Try the following little program:

CLS
COLOR 1
FOR x%=0 to 199 STEP 10
 LINE x%,0,199-x%,199
NEXT x%

As you should have figured out by now the LINE command takes 2 coordinates as inputs. But what if you want to draw more than one line and you want to continue from where your last line ended? No worries, GFABASIC has something for this aswell. Try the following program:

CLS
COLOR 1
DRAW 10,10 TO 309,99 TO 10,190 TO 10,10

And now you should see a triangle on screen. You can also do this continous inside of a loop, a sort of using a pen and continuing drawing from time to time:

CLS
COLOR 1
DRAW RANDOM(310)+5,RANDOM(190)+5
FOR c%=1 to 19
 DRAW TO RANDOM(319),RANDOM(199)
NEXT c%

That should draw a continuous line through a set of 20 random points.

back to GFA Tutorial