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.
There is another command to draw continuous sets of lines, the POLYLINE command. Refer to your GFABASIC manual on that one.
Boxes and other rectangles
You will probably want to draw some boxes as well. With the following knowledge you could something like this:
CLS COLOR 1 LINE 10,10,100,10 LINE 100,10,100,100 LINE 100,100,10,100 LINE 10,100,10,10
That should draw a box on screen but you have to use 4 commands, one for each side of the box. GFABASIC can do this in one go for you. Just use the BOX command. It takes two coordinates as parameters, the upper left corner and the lower right corner of your box. In the case above the following would do the same, and much faster:
BOX 10,10,100,100
Let's use the accumulated knowledge to draw a pattern on screen:
CLS FOR x%=0 to 19 FOR y%=0 to 10 COLOR 1 BOX x%*16,y%*16,x%*16+14,y%*16+14 COLOR 3 LINE x%*16,y%*16+14,x%*16+14,y%*16 NEXT y% NEXT x%
The screen should fill with a pattern of boxes that have a diagonal line inside. Color monitor users will see different colors too :)
Another variation of drawing rectangles is to give them rounded edges. Simply write RBOX instead of BOX and the corners of your box are now rounded. Try the following:
CLS FOR r%=10 TO 140 STEP 10 RBOX 160-r%,100-r%,160+r%,100+r% NEXT r%
It is quite easy to use.
Round 'nd round
GFABASIC can also draw circles and ellipses for you. To draw circles you use the, surprise surprise, CIRCLE command. It takes 3 parameters, a pair of coordinates and the radius of the circle you want to draw. The coordinate pair describes the center point of the circle you are going to draw onto the screen. The radius is simply measured in pixels as well. Let's try it out:
CLS COLOR 1 FOR r%=10 TO 90 STEP 10 CIRCLE 150,100,r% NEXT r%
If you look quickly, you should see that the diameter of the circle is growing with every iteration of the loop. One can also draw arcs with the CIRCLE command but I leave that up to you GFA manual to find out how.
Let's go on and draw some ellipses. They use the ELLIPSE command and simply take another radius parameter. The first radius describes the horizontal size of the ellipse and the second one the vertical size. So it is quite easy. Try the following slightly different program:
CLS COLOR 1 FOR c%=20 TO 90 STEP 10 ELLIPSE c%,100,c%,c%/2 NEXT c%
It will just draw a pattern consisting of growing ellipses on screen.
Filled structures
Sofar you have only drawn lines and single pixels. How about filling the void with some color and/or pattern? You can select a color and pattern to use for filled objects with the DEFFILL command. Its syntax is as follows:
DEFFILL color.nr%,pattern.set%,pattern%
The parameters are easy to explain. The color number specifies the number of color you want to use for the fill. The pattern set allows you to select between 3 different sets of fill styles but let me tell you right here, the first one is pretty boring. The pattern index itself goes up to 32. Let me show you with a simple program:
CLS FOR s%=1 to 3 FOR c%=0 to 31 DEFFILL 1,s%,c% PBOX c%*8,s%*30,c%*8+7,s%*30+29 NEXT c% NEXT s%
Noted the PBOX command? It does the same as BOX but fills the box right away. That works with the other comamnds as well so you have PCIRCLE, PELLIPSE and PRBOX at your hand as well. But you can also fill a single location on screen. This floodfill will even follow any irregularities in your graphics on screen. Use the FILL command as follows:
FILL x%,y%
x% and y% simply form another coordinate pair just like the PLOT command did. Try it out with the following program:
CLS COLOR 1 FOR x%=0 to 319 STEP 5 FILL 0,0,x%,195 NEXT x% DEFFILL 3,2,4 FILL 0,199
The FILL command is pretty slow as you can see so I recommend to use it only to prepare graphics and store them to disk and/or memory for later use.
That should be sufficient for now. In the next tutorial I'll tell you how to change the colors used in your screen and how to manipulate blocks of graphics.
For the moment enjoy yourself and experiment with the graphical power of GFABASIC!
back to GFA Tutorial