GFAgraphics

From Atari Wiki
Revision as of 17:22, 13 April 2007 by Simonsunnyboy (talk | contribs)
Jump to navigation Jump to search

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