COMPUTER GRAPHICS Some Hints on How to Improve Your Graphics ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Here are some hints for those of you who would like to improve your technique when making your own illustrations, for example paintings and title screens on the Amiga. I would like to stress the point that this article will not turn you into an instant artist as the subject is technique, not art. The computer as a medium for creating graphics has some built-in problems. However, let it be known that other mediums such as oil-paint, watercolour, ink, and crayon just to mention a few have just as many shortcomings and limitations. Some of the shortcomings of computer painting are: i) the limited number of colours ii) creating gradual shading or flow of colour iii) putting in extremely small details iv) the step effect created by lines that are on an angle v) expression of material e.g. hair vi) the screen (canvas) size Some of these problems along with some others will be dealt with in the course of this article. CREATING A WORKING DISK If you don't want to go to the trouble of creating a formatted blank disk with a directory for the images, you have to make enough disk space on the disk with the painting programme to save your creations. CHOOSING YOUR OBJECT Care should be taken in choosing your object to be painted. The two biggest pitfalls are small details and the need for too many colours. Start off by choosing a painting that has no more than one or two objects. It will help you to cope with the limited number of colours at your disposal. For this exercise I would choose a flower as most flowers are of a single colour, and basically you will need only two colours, one for the flower itself and one for the stem and leaves. The other 14, or so colours left, depending on the resolution you are using (more of that later) can be devoted to shading, highlights, and shadows. TRANSFER OF OBJECT TO THE SCREEN I suggest that you copy an existing illustration to start off with because there are enough technical problems without creating artistic ones as well. Having chosen your object to copy how do you get the outline and details onto the screen? If you are painting from a photograph, postcard, magazine, or book you are faced with the problem of transferring the image to the screen preferably without damage to the original. Programs like DEGAS ELITE have a grid-tool that will help you to create a screen that looks like graph paper. Using this grid-tool create a grid where both the vertical and horizontal lines are approximately 10 mm apart on the screen. To get the grid for Degas Elite: Go back to the screen and count the number of whole squares from top to bottom. Do not count the incomplete block at the top and the bottom. Next, go back to the picture and measure the height only. Divide the height by the number of vertical squares that you have counted on the screen. For Example: picture height 260mm, number of squares on the screen 13. Divide 260mm by 13 screen squares = 20mm. Divide your picture now by drawing vertical lines 20mm apart. If you do not wish to damage your picture stretch a sheet of tracing paper over the top of it and do all line work on the tracing paper. Number the row of blocks along the top starting by placing a 1 (one) in the block on the left. Number the row of vertical blocks on the left hand side starting by placing a 1 (one) in the block at the top. The number 1 (one) will be common to both the vertical and horizontal rows of blocks. Go back to the screen and with the freehand-tool write in the numbers corresponding to those on your picture. Make sure that the numbered grid is in the centre of the screen. (When finding the middle line of the screen don't forget the part under the palette.) Rows of blocks on the right and left of the centered grid can be deleted. If your picture happens to have more horizontal blocks than the screen has you will have to decide which part of the picture horizontally is most important to you. This, however, does not happen very often. Now draw the outline and details by looking at the picture and drawing lines in the corresponding blocks. The numbers at the top and bottom of the screen and the picture will help you to identify corresponding blocks.The mouse is not the ideal tool for drawing, but the outline does not have to be perfect. If you have chosen a face or head make sure the important details such as eyes and nose are in the right place. When you have finished with the outline and details remove all the grid lines by using the background colour. My use of colours, in most cases is black for the background and cream-white or brown for the line work and grid lines. Background colours other than black are likely to interfere with colours in the picture and white line work is hard on the eye. CHOOSING YOUR PIXEL SIZE Not much choice here...unless you use something like SPECTRUM 512 you've got 16 colours in lo-res. If you are about to start your first picture I would recommend using lo-res. (surprise,surprise) The interference of adjacent colours can be very useful. Dots of white and red next to each other will result in pink. Two white dots with one red dot on the side will give white with a pink edge. Five shades of grey with one red (6 basic colours) will result in 15 colours - 1 red + 5 shades of grey + 5 combinations of red with grey + 4 further combinations of grey. I will leave it to you to figure out the total number of combinations possible with 16 colours. CHOOSING YOUR PALETTE The choice of the palette is probably the most important step. A bad choice of colours will result in a continuous struggle for more colours. Because there is no interference from adjacent colours with lo-res care should be taken to ensure that besides the basic colour chosen for your object you have 2 or 3 shades that are lighter and darker than it. This will make it easier to create shadows and highlights. The computer programmes have a feature called "range". After you specify the darkest colour and say 5 colours away, the lightest colour, the programme will select the in-between colours. To modify the Degas palette check them DOCs! We've also covered some other Art packages like NEO, so take your pick! The colour to be changed you can alter the colour with the RGB-controls. All 16 colours can be changed, but care should be taken with some of the colours as they are basic to background, lettering and borders. It is of note that AMIGA users get very used to lots of colors.Because only 16 colours are available to us it is very important that every colour can be used to create several other colours. For example, white with dark green could cut out the need for light green. Some experimentation on a free part of the screen will help you to decide. Because I do not know what you are going to paint I can only give a typical palette. It should contain black and white and at least 4 following shades of grey and brown. Since grey and brown are not very strong and are easily overshadowed by the prime colours (red, blue and yellow) their effect will result in darker and lighter shades of the prime colours so essential for good shadow work and highlight details. CREATING YOUR MASTERPIECE At this stage we have an outline of the picture, and a palette. If you wish to use the spray-paint tool this is the time to use it. Spray painting can be very effective for some backgrounds. Choose a "spread" that is not too big, and limit the numb er of dots. Give the background the basic colour you want it to be and spray the desired pattern. If you do not use "masking" of your major object the limited spread and small number of dots will prevent too many unwanted dots getting into your object. Also, staying away from the object and imitating the spray pattern close to it using a single pixel brush will help. If using more than one spray colour use the darker spray at the bottom and the lighter one at the top. The dark colour will work as a foundation. However, if you use spray for sky the darker colour should go to the top. It will give the painting depth. Filling in is the next step. Before you use the fill-in tool make sure you do not have any breaks or gaps in your outline. You can check for breaks by using the magnifying-tool. If you overlooked a gap and part of the painting that you didn't want to fill-in gets filled-in, use the UNDO to remove it, close the gap and try again. After filling-in all the basic colours check for details that are out of place. Most of the shading in can be obtained by using a progression of colours. Sometimes better results are obtained by using a basic colour and a progression of darker brown dots for red, yellow and green, and grey dots for white and blue. At the cost of time you can create a checkered pattern. It could for example be made up of red and brown squares. By progressively using darker browns the red will also darken by the influence of the brown. The brown dots can't be seen as the red is the mo re dominant colour. It will appear that the red gets darker, creating an illusion of a shadow. Using two shades of red will extend the range from light to dark even further. A typical annoying feature of computer graphics is that lines on an angle and curves have little steps. Most of these steps can be eliminated by putting in an intermediate colour. For example, if the object with the steps is red and the background colour is black put brown dots in the corners of the steps. The ragged outline will then be smoothed out. Most of what has been said here can be seen by scrutinizing my two paintings on this disk. Both of the paintings are med-res and they can be transferred to a painting programme to be looked at with the magnifying-tool. BACK-UP Finally, I would like to advise you to save your work each hour. Also, at the end of your day's work make a back-up copy. Detailed paintings can take several days to complete. To lose a painting because of memory or disk failure can be very disheartening. (And don't we just know it!!) ~~~~~~~~~~~~~~~~~~~~~~~~~~~ END OF PAINTHINTS ~~~~~~~~~~~~~~~~~~~~~~~~~~~ TEX PAINT-HINTS..Part of a series in ST NEWS disc magazine. 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. 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 source listing referred to can be found on the relevant ST NEWS disc, but you need K-SEKA to assemble the bloody thing! S.P