## Graphics Introduction

Toby Opferman http://www.opferman.net toby@opferman.net Introduction To Graphics In this tutorial we talk about graphics independent of the system you program it on. DOS, Windows, Linux, PalmOS, BeOS, SNES, PSX, etc. We talk about the general topic of graphics and how they apply. This is nothing more than some basic theory. You have some theory of the PC hardware in the last tutor, now some basic theory in this tutor. In the next tutor we put them together. There are for the most part, 2D and 3D worlds in graphics programming. Of course, there will be dispute to what is "true 3D" since you can have a 2D mathematical wise game that can look 3D. But, let us first talk of what you should have a good grasp on to do graphics. Algerbra and basic math is of course the heart of graphics. You should be able to add and subtract very well :-) This may seem funny, but everything you do will envolve this. Basic 2D graphics can be done easily with only addition, subtraction and basic algerbra/geometry graphing techniques. More advanced 2D graphics would require Triginometry. 3D Graphics envolves Linear Algerbra, Triginometry and geometry. That is all you would basically need to be good at for the basic run. If you want to talk about more advanced graphics such would be certain effects, or image processing. Image processing where they manipulate photos to make them more clear or anything like that, you would need calculus and advanced maths. Anyway, we will start off basicly. Let us talk about movement in a 2D world. If you want to move something at a certain speed, what would you do? You would keep drawing it of course. * The above is a dot. You want to move it, you would increment it's current location to the new location, erase the * and redraw it. * Simple math. Now, what if you're dealing with a background? .... ..*. .... You have your dot's movement at (1,1). That means that every movement, the object will increment it's X and Y by 1. ...* .. . .... Now, there is an empty space where it left from. There are 2 ways to deal with this. The first way is to keep with the image you are moving a background image. So, before you draw in an area, copy that area. Then, next time you move, just redraw over top of where you just were, the background and copy the next background and redraw your figure. You want to do the next move. .... .*.. .... Redraw the background where your character is. .... .... .... Save the next location as background "." .... .... .... Draw your figure. ..*. .... .... The other way would be to redraw the entire background every time. Now, you want to know. "If I have an image that has some places that you can see thru, how do I draw it?" Well, of course, you won't have box images but in a computer you have to store them as a linear unit and think of it as a box. Lets say we have this as our structure for our characters: LocationX, LocationY Our current location VelX, VelY Our velocity the character moves each time Image Our Character BackGround The background of where our character is. WidthX, HeightX The Width & Height of the object There are two ways to draw this image with background showing. Way #1 is you have 2 images. The first image should have a black background. The second image should have a white background. You take the first image and you OR it with the screen. Black is defined at 0. So, 0 OR background = background. The next thing you do is AND the white background with the image. Since white would be defined as all colors set you AND it with less colors and the less colors would stay. This also seperates the image from the background in the original OR. You should know a bit about logical operators to do the top bit. The next way would be to TEST every pixel before you draw it. Make the background a certain color (Usually black) on the image and when you draw each pixel: if Pixel != Black Then Draw(Image) Drawing the image is simple. You simply go to the current location and that would be the top left corner. You then draw the width, then increment the height, draw the width again, and etc. Graphics primatives. Graphics Primatives would be lines and pixels. You can go further, but every image is based on these points. You have triangles, circles, squares and etc. as well. Animation. Animation is nothing more than drawing something, erasing it, redrawing it elsewhere or different. Take our old structure. LocationX, LocationY Our current location VelX, VelY Our velocity the character moves each time ArrayImage Array of Images BackGround The background of where our character is. WidthX, HeightX The Width & Height of the object Number The Number we are at. Max The Max Number of Array Images So, you can draw ArrayImage[Number]. Every movement or a specified movement you can change the Number. If a character is walking you just every time instead of redrawing the same image, you draw the next in the list. Once you get to Max, you loop back around. As well, you can have a seperate number for standing position or any other position. Certain actions can make Number turn into certain positions. The next part would be to detect if something 'hit' something else. This again, is simple math. +-----------+ | 1 | | +--+--------+ +--------+--+ 2 | | | +-----------+ You have Box 1 and Box 2. Now, their images are not 'boxes' but it is easier to do collision detection on boxes than it would be on curved surfaces. You first check if they are in the same range, either up and down or left to right. X1 + WidthX1 > X2 If this isn't true, then there is not possible collision because Object 1 would lie to the left of object 2. The next test would be: X2 + WidthX2 > X1 If this isn't true, then there is no possible collision because Ojbect 1 would lie to the right of object 2. So, now you know that the object is in range, but is it on top of object 2, on bottom of object 2 or intersecting? Y1 + HeightY1 > Y2 If this isn't true, then the object 1 would be above object 2. Y2 + HeightY2 > Y1 If this isn't true, then the object 1 would be below object 2. With these 4 conditions met. Object 1 intersects Object 2. Rotations are done with the following trig formula: NewX = x*cos(theta) - y*sin(theta) NewY = y*cos(theat) + x*sin(theta) This is rotation in 2D (Or, Rotation in 3D around the Z axis) In 3D you just add one more dimention, depth. In a mathematical sense: Z ^ | | | | +-------------> Y / / / X But, people rotate this around to Right and Left hand coordinate systems. Rotate each of those counter clockwise. So Y is on top, Z at the bottom and X to the right side. That is how most graphics tutorials look. 3D graphics coninsides with Vectors and linear algerbra. In 3D you define objects in 3 Dimentions and you spend your math tring to calculate what not to print (The parts you don't see). We will get into that when you reach the final part of the tutorial. For now, we are just going to concentrate on 2D.