Lucrare de curs la SDALucrare de curs la SDA

Colun Mihailgr. FAF-081

Computer graphics applications in CComputer graphics applications in C

• Introduction;• Basic functions;• Examples of graphic possibilities in C;

Circles on diagonal;Moving Triangle;Pseudo-3D function;

Structure

IntroductionIntroduction

Basics element of an digital image is the pixel with specific coordinate and color,in C++ we have build in graphic driver of resolution 640x480 pixels(total 307300 ) of different 16 colors build in C

Colors build in C++ which can be replaced by some other color by changing the

quantity of red green and blue color in a pixel.

There an example of table in which is There an example of table in which is described the quantity of each basic color described the quantity of each basic color

(red, green and blue)(red, green and blue)

Each quantity of color Each quantity of color can takes values from can takes values from

0 to 255.Totally we 0 to 255.Totally we have 256have 25633 colors colors

(16.777.216)(16.777.216)

Coordinates in C graphThe coordinates in graph are

quite different from standard, the origin of coordinates system is

placed in the top left corner and the positive direction of

Y is down. The visible values of X is from 0 to 639,and for Y from 0 to

479,it can take also values out of this set but they will

not be visible in our interface.

Get beginning to drawGet beginning to draw1. initialize the drive:

/* request auto detection */ int gdriver = DETECT, gmode;

/* initialize graphics and local variables */ initgraph(&gdriver, &gmode, "");

Note: we must enable the graphics library from Options/Linker/Library/click on Graphics option. Also we

must check if in our version of C++ has the needed driver file Egavga.bgi in folder BIN, otherwise we will get an error in

initialization of graphic driver.Windows Vista or 7 doesn’t support C graph resolution

Basic functionsBasic functions• Putpixel(x,y,color) – function that draw a pixel on the screen

with x, y coordinates and specified c color.• setcolor(c) - set the current drawing color in graph.

0 1 2 3 4 5 6 7 8 9 10 11

12 13 14 15

setrgbpalette(pal.colors[c], r,g ,b )C is the number of color. Do not forget that our driver supports only 16 colors.Line(x1, y1, x2, y2) - where (x1,y1) are the coordinates of first point and (x2,y2) are the coordinates of second point, by this way we construct a segment that contains the endpoints in specified points.Note: Polygons can be represented as combinations of 3 or more lines with the same endpoints.Rectangle(x1, y1, x2, y2) - where the (x1, y1) are the coordinates of first corner and the (x2, y2)the coordinates of second corner, by this way we draw an rectangle that contains 2 specified points as corners, the other to corners are drawn automatically. bar(x1, y1, x2, y2) - draws a rectangle and automatically floodfill it.

bar3d(x1, y1, x2, y2, d, t) - draws a 3d bar in 2d where d is the depth of bar and t is the govern whether a three-dimensional top is put on the bar.

Circle(x, y, r) - the coordinates of center and the radius measured in pixels. Ellipse(x, y, a1, a2, r1, r2) - (x, y) the coordinates of the center,a1 is the startangle and a2 is the endangle of the ellipse,r1 is the radius along x axes and r2 is the radius along y axes.Note: to draw a full ellipse a1=0 and a2 =360. arc(x, y, a1, a2, r) - draws a curve line which has the center point in (x, y) and the startangle a1 and the endangle a2 with radius r. outtext (“…”) - draw the specified text on the screen on the current position like on the output screen.outtextxy(x, y, s) - draw a text in the specified coordinates where (x, y) are the top left corner of the text, and s is the string that is going to be output on the screen. settextstyle( f, d, s) - where f is the font style (0..4),d is the direction of the text(0-horizontal,1-vertical,2-horizontal letters and horizontal direction),and s is the size of letters (0..3)Note: default options (0, 0, 1).

getpixel(x,y) - this function return the number of color in a specific point(x, y). getmaxx () - returns the maximum value of x. getmaxy () - returns the maximum value of y. getcolor() - returns the current drawing color. getx() or gety() - returns the current position on the screen. moveto(x,y) - function for changing the current position to (x, y) point.

setbkcolor(c) - changes the background color of the screen.Note: the default background color is black (0).imagesize(x1,y1,x2,y2) - return the image size in bytes needed to store in memory, that is bounded by the rectangle described by those two point (x1,y1),(x2,y2).malloc(imagesize(x1,y1,x2,y2)) - initialize a pointer with the address of size of image.getimage(x1,y1,x2,y2,img) - write in the pointer the address of image specified by those 2 points,img is the pointer.

putimage(x1,y1,img,t) - put the stored image in img pointer on the new coordinates of the screen,(x1, y1) are the coordinates of top left corner of image from img,and t is operation specifies a combination operator that controls how the color for each destination pixel onscreen is computed, based on the pixel already onscreen and the corresponding source pixel in memory. t (0..4)

COPY_PUT 0 Copies source bitmap onto screenXOR_PUT 1 Exclusive ORs source image with that already onscreenOR_PUT 2 Inclusive ORs image with that already onscreenAND_PUT 3 ANDs image with that already onscreenNOT_PUT 4 Copy the inverse of the source

Useful functions

kbhit() - function that returns 1 if the a key is pressed on the keyboard and 0 if not. delay(t) - stop the current image on the screen for some period of time where t is the time measured in milliseconds.Note: To use delay() we must use the dos.h library and for kbhit() conio.h library.

Examples of possibilities in graphics.hExamples of possibilities in graphics.h

Circles on diagonal In the next example we will draw some circle along the diagonal of the screen and flood them with all colors from our driver, also write near the circle the respectively color .

To pass through diagonal I count how quick should x and y change, if we want 16 circles than:640/16= 40 (for x) and 480/16=30 (for y), initial value: x=15, y=15, radius of circles 14 pixels.We will construct a drawing loop that will stop to draw circle when the value of x or y will be bigger than 640 and respectively 480.a will be the color of nearby circle, also will change his value by 1.

while((y<=480)&&(x<=640)){

circle(x,y,14);setfillstyle(1,a);floodfill(x,y,2);

itoa(a,s,10);outtextxy(x+17,y-5,s);

a++;x=x+40;y=y+30;

}

Moving Triangle 1Moving Triangle 1We will draw a triangle which will be moving on an ellipse orbit until a key is pressed. Also we will draw the ellipse orbit to feel that.What we should mention hear that the main variable will be the angle a of float type,The xRadius will be 200 pixels and yRadius will be of 100 pixels, the initial value for a is 0, also on variation of a depends the speed and direction of rotation for triangle; if it’s negative it will rotate contra clock wise direction and positive otherwise. The increment for a will be -0.1 rad. First of all we must draw a triangle with the middle in the center of the screen (320, 240) of length 50 pixels.

Counting the legth of each line

h= ≈ 43 pixels;h/3 = ≈ 14 pixels;2h/3 = ≈ 28 pixels;50/2 = 25 pixels;

Counting the coordinates of each endpoint

line (295,254,345,254);line (295,254,320,212);line (345,254,320,212);

Counting the coordinates of 2 that describes the image of triangle

Write the code that alows us to use the image from memory

size=imagesize (295,212,345,254);img=malloc(size);

getimage (295,212, 345,254 ,img);putimage (295,212, img ,1);

Write the loop that will move our image until it reach the screen’s boarder

for(a=0;!kbhit();a=a-0.1){

x=298+200*cos(a);y=218+100*sin(a);

putimage(x,y,img,1);delay(10);

putimage(x,y,img,1);}

Pseudo-3D function

• In this program I will try to represent a graph in 3 dimensions. Actually it will be 2 dimensional, but the difference of colors will create to us an illusion of 3 dimensional space.

• Basic theory here is the formula of converting a 3D point to 2D and made this point of different color.

I have chosen this type position I have chosen this type position of of 3D3D space because here all space because here all

axes are proportional to axes are proportional to kk scale. scale.The angle between all the axes The angle between all the axes is is 120120 degrees (2π/3).Also the degrees (2π/3).Also the origin of 3D space is the center origin of 3D space is the center

of screen.of screen.

Now the most important thing here is the formula of converting 3D to 2D: 3D: P (x, y, z); 2D: P (320+k*0.866*(y-x), 240+k*0.5*(x + y)-k*z).If you will check you will see that this formula works.Cos (π/6) ≈ 0.866 (30o) and sin (π/6) = 0.5

Also we will need to define a function of 2 variables F(x,y) where we can change the functions law. We will need 2 for statement to scan some area in dependence of value of X and Y. One minus of this program is that it check twice the interval of X and Y, because we need to define the level where the color is changed, by difference of Zmax and Zmin and divide it by 16 (possible colors). e= (max-min)/16;e= (max-min)/16; Also we must set up our colors. getpalette(&pal);for (i=0; i<pal.size; i++)setrgbpalette(pal.colors[i], i*4, i*4, i*4);How we count the specific color for point? In dependence of value of Z:i=(z-min)/e;if (i<1) i=1;By this formula we count the specific point color, the lowest point will be the darkest one, and the points from top will be white. In this way we create the 3D effect, by difference of colors.

Note that full screen mode in C does not support the print screen mode from

windows XP, that’s why last image seems more to a photo.

ConclusionGraph library contains useful things; by composing Graph library contains useful things; by composing logical algorithms of these functions we can create logical algorithms of these functions we can create many interesting many interesting images, animations, function’s images, animations, function’s graphicgraphic and more complicated – and more complicated – games.games.