Part IV: graphics

THE WIZARDS PART IV - GRAPHIC TRICKS
by Erik of The Exceptions

The fourth part of this highly popular series is here. This time, 
ES will talk about some graphic-tricks like transparent graphics, 
anti-aliasing and more like that.  Many thanks have to go to  Mr. 
Tarik  Ahmia  (68000'er/ST Magazin) who gave  permission  to  use 
these articles in ST NEWS. 

 Hi de hi, readers! Have you gained enough energy for yet another 
round  of TEX-tips?  For this part you don't even  need  specific 
assembler knowledge,  since it mainly covers my personal field of 
expertise:  Graphics.  Some  of you might now think that  there's 
rather little left to be said about that;  many pages in books as 
well  as  magazines have been filled with  the  subject  already, 
aren't they?  But I am sure that there are some more or less rare 
tricks and tips from which you didn't know anything;  or are  you 
familiar with:

 - Anti-aliasing
 - Animated graphics by palette animation
 - Transparent effects
 - Back-and foreground scrolling without programming trouble

  You don't know anything about this?  Then it'll be soon -  just 
read  on.  Additionally,  I  will tell you  something  about  the 
"Neochrome"  drawing program that your surely didn't  know.  Just 
like all earlier episodes in this series,  all things said  refer 
to  the low resolution of the ST,  where you can normally use  16 
colours  (readers of ST NEWS Volume 3 Issue 5 will now of  course 
chuckle lightly).
  Well,  let's  start  to talk about the  subjects  listed  above 
systematically.  'Anti-aliasing' is listed first there.  This  is 
commonly  used  in  professional  circles  of  computer  graphics 
artists. Freely interpreted, this would mean: "How the heck can I 
avoid that gradation in my computer picture?"
 You all know that the ST, just like its colleague-homecomputers, 
has  a  fairly  limited  screen  resolution.   This  means   that 
especially  diagonal  lines or circles show  typical  gradations. 
Since we cannot fool the hardware in this case, we'll simply have 
to fool another 'peripheral':  The human eye.  We can hereby  use 
the way an eye sees contrast.  When Anti-aliasing,  one uses  the 
following scheme: At the boundary of two colours, one insert some 
dots  on  the  gradation that have colours  in  between  the  two 
colours that you use. That's all.
  To  demonstrate the remarkable effect,  please  make  a  little 
practical exercise. You surely have a drawing program with a zoom 
function. Load it and define the following colours:

  Background color - 000
  Drawing color 1  - 711
  Drawing color 2  - 600
  Drawing color 3  - 400
  Drawing color 4  - 300

  Now just draw a triangle with drawing colour 1,  and  therefore 
draw three lines, for example for the upper left corner (position 
x=0 and y=0) to position x=20 and y=80, then back to x=0 and y=80 
and  then back to the upper left hand corner.  Fill it  as  well, 
with  drawing  color 1.  Now,  a bright red triangle is  on  your 
screen  of which the right side clearly demonstrates the  typical 
gradation.
 Now copy this triangle,  so that you have two triangles next  to 
each  other  on  the screen.  The second one will  now  be  anti-
aliased.
 Enter zoom mode again and select drawing color 2. Put ONE dot of 
this color on each 'stairs' of the gradation at the right side of 
the triangle.  Then select drawing color 3 and do the same, and a 
third  time  with  drawing color 4.  Now  you  have  added  three 
darkening red colors to every gradation. Leave zoom mode and look 
at the effect.  The difference is quite stunning,  isn't it?  The 
second triangle seems to be displayed in a much higher resolution 
than the first one. That's anti-aliasing; quite simple!
 When you'd like to experiment a bit more,  you can draw a filled 
circle  in drawing color 1 and again put the darkening shades  of 
red on the gradation steps.  You will then also develop a feeling 
of where you can put which number of anti-aliasing-dots,  since a 
circle contains all different gradation sizes.
 Using this technique,  all graphics can be enhanced if the color 
palette has been properly designed.  In our example,  black (000) 
was the background color,  bright red (711) the drawing color and 
2-4 were the anti-aliasing colors.
 Have fun experimenting with these effects!

 Now,  what's up next?  Ah! Color palette animation! First, let's 
start with a small explanation what this actually is.
  The ST has sixteen color registers;  when some or all of  these 
are  swapped in a cyclic way,  this is called 'color cycling'  or 
palette animation.  This is often used to simulate flowing water, 
and  one of the oldest "Neochrome" pictures,  "Waterfall",  is  a 
typical example.  In this case,  the shades of blue contained  in 
the water are swapped in a circle.
 But there are much more possibilities with palette animation.  I 
have  always  had the dubious pleasure of creating  effects  with 
this  that many people considered to be  graphic  programming.  A 
very  nice application of this technique can be found in the  TEX 
program "Super Neo Demo Show".  There is a scrolling text in  the 
lower  border of the screen,  and under that are a lot  of  small 
propellers.  After  this  introduction you will probably  not  be 
surprised  to  hear  that these rotating lines  are  nothing  but 
palette  animation  - which many people were  when  we  initially 
explained this trick to them.
 How it's done?
  Well,  it's quite difficult to put into words (like  love,  ex-
ED.), but I'll give it a try.
  Just imagine that you've drawn 12 lines that cross one  another 
in  the middle;  each line has its own color.  Now,  you set  all 
colors  to  black with one exceptions:  One  color  remains  e.g. 
black.  In the middle you put a small circle with a non-animating 
color  to cover the part where all lines cross.  If you  now  let 
these  12  colors cycle,  you have the impression of  a  rotating 
line,  since  only one of the 12 lines is displayed in red  at  a 
time.
 There are more tricks of this kind, e.g. the hopping dots in the 
2nd Psych-O-Screen of our "B.I.G. Demo", but they principally all 
use the same trick:  About all used colors are put in  background 
color,  and only some of them are colored;  by palette animation, 
movement starts. One can use this to such extend that an animated 
figure, e.g. a little man, walks across the screen. The method is 
the same;  you draw the movement phases in an other color at each 
time  and  you  set  them next to each  other  (they  should  not 
overlap).  Since each of the men 'lights up' after the other  due 
to  the  color animation,  it appears as though the  shape  walks 
across   the  screen.   True  animation  effects  can   thus   be 
accomplished  by animating the colors.  The disadvantage of  this 
trick  is  obvious:  When  you  use a lot  of  colors  for  color 
animation,  only  few are left for the rest of the  picture.  But 
that's each one's own decision.

 Well,  dear readers, now we're really starting. The previous was 
only  to be classified among 'harmless toying  around',  but  now 
we're  really cookin'.  Maybe you have seen graphics that  seemed 
like  transparent  glass or that seemed to float in some  of  our 
programs.  Maybe  you  wondered  which  wonderful  and  difficult 
program sat behind it all.  Ha!  All wrong! I suppose you're just 
about used to it, but this is also covered by a sleazy trick. But 
to  understand  it,  you must know something  about  the  graphic 
buildup of the ST - so I will mention it here in short to refresh 
your memory.
 In low resolution, it looks like this: A certain piece of memory 
is referred to as 'screen memory'.  There, four sequential memory 
words  (1 word = 16 bits) always belong together,  and each  word 
represents a so-called 'plane'.  It's best to imagine these  four 
words  lying under each other;  this way you see best  that  each 
pixel is represented by four bits.  According to this combination 
of bits,  the color value is taken from one of the sixteen  color 
registers. With a resolution of 320x200 (640,000 pixels) of which 
each pixel can take one of 16 colors,  each plane is therefore  8 
Kb in size; an ST graphic screen thus costs 32 Kb.
  These planes do not only have to be used to  represent  colors, 
but  when you truly look upon them as 'planes' and use them  like 
that program-technically, there are some interesting aspects.
  Let's presume we made a piece of graphics that only uses  eight 
colors.  These  colors  can be realised with only 3  'planes'  (3 
'stacked'  bits  means 8 combinations possible),  so  that  their 
colors will be found in color registers 1 to 8.  But there's  one 
plane left!  In this plane, it is for example possible to display 
a piece of graphics that only uses one color.  When we set  color 
registers  9-16  to the same value,  we can move  this  piece  of 
graphics  in  just one plane (the program only uses  each  fourth 
word) and the corresponding bit combinations only give the colors 
in register 9-16. That's how it is possible to put a single-color 
piece  of  graphics  on  top of one that  has  8  colors  without 
difficult logical operations.
 That's all.

 Oh,  I hear you call:  "What's up then with transparent effects, 
and fore-and background,  eh?!" Well,  program-technical  nothing 
else  happens  than what I just described  above.  All  else   is 
simple brainmangling thought about setting proper color palettes. 
Again: Transparent-as well as back-and foreground effects are now 
only realised by simply setting proper color palettes!
 Therefore you must thoroughly realise what's happening with  the 
bit  combinations when a piece of graphics in one plane is  moved 
'over'  the  three  others.  The  colors  that  result  into  the 
corresponding effect are always the last eight (number 9-16), the 
colors   located  that  are  called  by  the  corresponding   bit 
combinations are located there.  These are the colors that appear 
when  the  separate plane is moved 'over' the other  three  -  in 
other words when the fourth bit (fourth plane) is set or cleared.
 When you understand this, it is easy to think of a way to create 
the 'transparent' effect:  Simply put intermediate colors in  the 
upper  half of the palette that correspond to the  brightness  of 
the other eight.  In our program example (present in the disk  in 
the  PROGRAMS folder as a .S file) a bright red 'plate of  glass' 
moves  over a background pattern that only uses shades  of  grey. 
The colors are hereby set as follows:  Color 1-8 are black  (000) 
along all shades of grey to white (777). The 'transparent colors' 
9-16  go from dark red (004) to yellow (770).  So when  the  one-
color  graphics block of the fourth plane goes 'over'  the  other 
three planes,  color 9 appears where 1 used to appear, 10 where 2 
used to appear,  etc.  Program-technically speaking, this is very 
simple, but about that we haven't even talked.
 Udo and the others were also quite blabbergasted when I came  up 
with the idea,  you'll believe me.  The whole back-and foreground 
business is very much the same;  just look at the B.I.G. scroller 
in  our "B.I.G.  Demo" where a scrolling text scrolls in  between 
the fore-and background.
  With  this effect,  one has to set the upper  eight  colors  as 
follows:  With  each of the colors that the one-colored piece  of 
graphics should go behind,  you set the corresponding upper color 
to  the same.  All colors that should be covered by the  graphics 
block  should get the value you want them to have when they  move 
'in front' of it.  So if you want the one-plane graphics block to 
move  all in the background of all three other planes,  one  sets 
the upper colors exactly the same as the lower ones.
 Not really simple, you think?
 Hmm.  You might be right.  But we do everything to get the  very 
last thing possible out of the ST, don't we?
  With this effects,  it is also not quite simple to put it  into 
words (sigh, ex-ED.). When you have a look at our listing (in the 
PROGRAMS folder), your last doubts will disappear.
 The program does the following:  It builds a background  pattern 
in three planes, thus using the first eight colors. It then makes 
a graphic block in the fourth plane move to and fro.  Using  keys 
1-4,  it is possible to call different color palettes,  that will 
support  the  description I have above.  By only  pressing  these 
keys, the following effects are realised:

 Key 1 : Palette 1, one-colored block moves over graphics
 Key 2 : Palette 2, block moves in background
 Key 3 : Palette 3, block moves through the pattern
 Key 4 : Palette 4, transparent block moves over graphics

  Have  fun  trying.  It is easy to use some of  your  own  color 
palettes; some extremely funny effects can be created that way.

 This almost made an end to this issue's "Wizards"  article.  But 
at the end I found it necessary to make a plea.  No! Nothing like 
"Tortured  ST users everywhere get together!";  it is  much  more 
about my favourite drawing program that I (and many others) think 
is one of the most grotesquely underestimated programs on the ST. 
I'm  talking about "Neochrome" here,  that was supplied with  the 
Atari ST in the early days (version 0.5).  It was supposed to  be 
sold  in  the  better version 1.0,  but  it  was  never  properly 
marketed.  Most salesmen also considered 1.0 to be Public  Domain 
and that's why just about every ST user could get the program.
  The reasons why the program is so gut will be explained to  you 
in just a little while,  when I will tell you something about the 
program  that  most of you probably didn't  know.  The  basis  is 
actually  brief:   "Neochrome"  already  includes  (almost)   all 
functions one would need for creating GOOD pictures;  unnecessary 
function  are  not present and it is  fast,  very  FAST.  It  has 
several  function that would even make "Degas Elite" look  rather 
basic.
 When you've drawn pictures yourself,  you'll have to admit  that 
the most important tool of all is the zoom mode.  On the contrary 
to all other drawing programs that are available, "Neochrome" has 
a  zoom  mode that is always present,  also when you  operate  on 
blocks,  draw lines,  fill,  etc. This zoom mode is very fast, by 
the  way,   because  it  uses  raster  interrupts.  Further,  the 
'Jackknife' function allows you to cut out whatever form you want 
(not  just  polygons),  and  these  can  also  be  moved  in  the 
background ("DPaint II" on the Amiga can't even do that!).
 I suppose you already know the functions that are implemented on 
the "Neochrome" menu. So I will now talk about some function that 
are not so obvious;  you might be in for a surprise! Many things, 
for  example,  are  hidden  in the right  mouse  button:  In  the 
'normal'  block  menu,  the current block is set on  the  current 
position,  but  with 'Jackknife' you can DRAW with  pressing  the 
right button, just like a brush (and, unlike other programs, this 
also  happens FAST)!  While in 'brush' mode,  pressing the  right 
mouse  button takes care that you draw with the colors that  have 
been installed between the 'color arrows' - this is also the case 
when using nozzles (highly effective when using color animation).
  When you're in 'grabber' mode,  you can get the color of  every 
pixel on the screen you want by pressing the right mouse  button. 
In  'line' mode,  the current line is deleted when you press  the 
right  button with the left one.  When double-clicking the  right 
mouse button on the eraser icon, the entire screen is erased.
 But now a very hot tip,  since only few people know that there's 
a  complete  animation tool in  "Neochrome"!  Dave  Staugas,  the 
programmer, had no time to make it completely bug-free so that he 
just hid it.  This is the way to get the new icon on the  screen: 
Go  to the 'grabber' mode and click with the right  mouse  button 
precisely in the curve of the last 'R' in the word 'GRABBER' that 
will  appear  on  the right side of  the  menu.  A  small  camera 
appears!
  You can now do the following after selecting that  camera:  You 
can define an animation area with the mouse. With the right mouse 
button  you  can now slide the whole picture through  this  area. 
When you have the right part,  you simply click on 'add' and  the 
part  of  the  picture is in  'animation  memory'.  Add  as  many 
pictures as you want,  and then you slide the cutout back on  the 
first cutout (only Dave knows why) and you can use the arrows  to 
play the animation forwards as well as backwards.  With 'Del', it 
is possible to delete the current screen,  and 'Load' and  'Save' 
also  work  (just don't get startled when  the  fileselector  box 
that's busted - stop animation before!). Just experiment a little 
with the animation tool; unlike all other animation tools for the 
ST, this one's EASY to use. The biggest advantage is that you can 
edit  a  figure  that has to be animated  right  in  the  drawing 
program.
 But be warned:  This new menu option is not bug free!  It is for 
example  not quite smart to press the Undo key or make  the  menu 
disappear while the camera is selected.  So it's probably  better 
to  save your picture before you enter the animation  tool.  When 
you  have the VERY OLD St demo with the flying  parrot,  you  can 
load  it  without  problems.  But  do  not  forget  to  load  the 
accompanying picture before (the shore landscape) with regard  to 
the color palette.

  Finally,  a little gag:  You can define the colors in the  menu 
yourself!  When started up,  "Neochrome" looks for a file  called 
"NEO.CMP"  in which 512 words with color values need to  be  that 
will replace the preset palette.
  When  you intend to use "Neochrome" more often in  the  future, 
look  into  your heart and give good ol' Dave something  for  his 
trouble  and his really good program.  He is currently  a  system 
programmer  at Atari and quite disappointed about the  fact  that 
his excellent program wasn't treated accordingly in the  magazine 
- and we're not even talking about the lousy marketing. Financial 
contributions can be sent to:

ATARI Corporation
Personal Mr. Dave Staugas
1196 Borregas Avenue
Sunnyvale, California 94088-3427
U.S.A.

  If you're a "Neochrome" fan,  do not falter!  Dave wrote to  me 
that  he  will consider rewriting old source stuff and  making  a 
better "Neochrome" version if the 'fanmail' is accordingly. I beg 
you: Do so!

 Well,  dear readers,  again we have told you some of our tricks, 
but  the  crown on our work of 'hardware-torturing'  has  yet  to 
come;  we're hereby talking about getting rid of the lower border 
so  that  graphics can be displayed there  as  well!  Using  this 
trick,  you  will be able to effectively display more lines  than 
ever before anticipated by the developers of the ST.
 Just wait for the next episode...
 Bye, bye.

  The  accompanying  source file is called  "WIZARD_4.S"  and  is 
located in the "PROGRAMS" folder on this issue's disk.