Simple graphics with GP142
Author: David L. Dewey, ddewey@cs.washington.edu
Copyright © 2001 UW Dept. of Computer Science and Engineering
NOTE: This lab is optional and ungraded, so there are no
restrictions on what resources you can utilize to help you when you get stuck.
Please feel free to work in groups or receive help from other students. Unlike
with homework assignments, for this lab the consultants can give you direct
answers to problems you are having trouble with. If you are struggling too much
with a particular step, you might want to have a consultant or TA just give you
the answer so you can move on to the next step.
In this lab you will create simple line drawings using the GP142 graphics package. You will learn step by step how to create simple shapes, and how to do simple geometry calculations to array objects in circles. You will also get practice in functional decomposition.
You may want to briefly skim through the documentation for GP142 on the web at http://www.cs.washington.edu/education/courses/142/GP142/GP142.html. Don’t worry if you don’t understand a lot of it. You will only be learning the most basic features of the drawing package for this lab.
Download the GP142 archive for the platform you are working
on, and extract the files. The files you need are GP142.h, GP142lib.H,
and GP142.c.
Put these files in the same directory with the other files in your project.
Create a file main.c where you will place your main function
and the other functions you will be writing. You need to #include
"GP142.h". Note that unlike other includes you’ve done in the past,
the name of the file here should be in double quotes, not angled brackets.
Your main function should look just like this:
int main(void)
{
int mouse_x, mouse_y;
char key_pressed;
GP142_open(); /* Open and initialize the GP142 Graphics Window */
GP142_logging(LOG_OFF); /* logging is useful to students during debugging, */
/* but annoying during the demo; turn it off. */
draw_stuff(); /* draw some cool stuff on the screen */
while (GP142_await_event(&mouse_x, &mouse_y,
&key_pressed)!=GP142_QUIT)
{}
GP142_close(); /* Clean up and close graphics window */
return 0;
}
Don’t worry about anything but the call to draw_stuff(). That’s the function where you’re going to do all your work. Make a prototype and body for this function. It doesn’t need to take any parameters or return a value.
Now practice drawing a few shapes, putting all your drawing code in the draw_stuff function you defined. First draw a line by calling the GP142_lineXY function. This function takes six int parameters, the color, the x and y coordinates of the line start location, the x and y coordinates of the line end location, and the line width. Try calling GP142_line (BLACK, -300, 250, 300, -250, 1). Compile and run your program to view the results. Now add some more lines to your drawing, with various start and end locations. This should give you a good feel for the range of the coordinates in the drawing window.
You can draw ovals using the GP142_ovalXYfunction. This function also takes six parameters, but the two coordinates are locations of two opposite corners of a bounding box for the oval. For example, GP142_ovalXY(RED, -10, -10, 10, 10, 1) draws a red circle of radius 10 at the center of the screen. Experiment with drawing ovals of various shapes and sizes.
Now create your own function that draws a circle. It will call the oval function you just learned, and will have only five parameters. These will represent the color, x and y coordinates of the center of the circle, radius, and line width. For example, instead of calling GP142_ovalXY(RED, -10, -10, 10, 10, 1) you should be able to simply call circle(RED, 0, 0, 10, 1).
Now it’s time to do something more difficult. You will create a function that draws a sun, consisting of a circle with ten line segments (the sun’s rays) arrayed around it in a circle. For now, your function should take no parameters. Just declare the function as void sun().
The first thing you will do in the body of your function is to draw a circle of radius 10 centered at the origin. This is just a call to the circle function you made in the previous step. Add code to draw this now.
The sun’s rays will be short line segments extending from evenly spaced points on the circle outward. How will you draw these? You need some way to find x and y values for locations spaced evenly around the outside of a circle. The functions sin and cos in math.h allow you to do this easily. Each takes a double as a parameter. You can think of this parameter as being the distance in the counter-clockwise direction along the perimeter of a unit circle centered at the origin, measuring from the right-most point on the circle. Call this distance theta. Then sin(theta) gives the y-value of the point corresponding to that distance around the circle, and cos(theta) gives the x-value of that point.
Now a unit circle has a radius of 1, and thus its perimeter is 2*pi*r = 2*pi. So, for example, the point pi/2 units around the circle would be at the very top of the circle, and thus sin(pi/2) = 1 and cos(pi/2) = 0. Can you see how this works? Try to calculate sin and cos of zero, pi, and 3*pi/2. Draw a picture of a unit circle centered at the origin to help you.
Note: you should #define pi. The value of pi is approximately 3.14159265359.
Sin(0) = _____________ |
Sin(pi) = ____________ |
Sin(3/2 pi) = ________ |
Cos(0) = _____________ |
Cos(pi) = ____________ |
Cos(3/2 pi) = ________ |
Step 7: Drawing a single ray
We’re trying to find points on a circle centered on the origin, but it’s not a unit circle. This is easy to remedy. We simply scale the results we get from sin and cos by the radius of our circle. For example, the top of our radius 10 circle will be at the point x = 10 * cos(pi/2) = 0 and y = 10 * sin(pi/2) = 10.
Thus you have a way to find points around your circle. But how about making them into rays? To see how to make rays, just imagine another circle larger than your sun circle and also centered at the origin. You can find points around this larger circle by using a larger scaling factor than 10 for your sin and cos results. Simply connect points on the inner circle to points on the outer with lines to make rays. For example, one ray drawn might go from the point x1=10*cos(3*pi/5), y1=10*sin(3*pi/5)) to the point x2=15*cos(3*pi/5), y2=15*sin(3*pi/5)). To draw this ray you will draw a line from x1, y1 to x2, y2. Add lines to your sun function to calculate this particular x1, y1, x2, and y2, and draw the line connecting the points. Then run your program and see if the single ray you’ve draw is in the place you expected.
Now we know enough to go through a loop that finds 10 evenly spaced points on the perimeter of a circle. Since going around the whole circle corresponds to 2*pi, to have ten rays we need to jump by 2*pi/10 = pi/5 every step of the way. Doing this is easy. To calculate your parameter for the sin and cos functions, you will simply multiply pi/5 by the for loop counter i, instead of 3 as you did above. So simply put the body of your for loop around the statements you have to draw your single ray, and change the 3 to i (or whatever you’ve called your for loop counter). Make sure your for loop counts from 0 to 9. Run your program and see your sun shining with ten beautiful rays!
Now add some parameters to your sun function. First add a parameter that allows you to specify the radius of the sun. You probably want to have your sun function adjust the length of the rays based on the radius of the sun. Next add parameters (x and y) that specify the center point of the sun. After all, you probably want your sun to be drawn up in the air, not on the middle of the screen! To do this you will simply add on these new x and y values everywhere you draw something. For example, if your sun function has the call GP142_line(BLACK, x1, y1, x2, y2, 1) you will change it to GP142_line(BLACK, x1 + x, y1 + y, x2 +x, y2 +y, 1).
A third parameter you might add is the number of rays that the sun should have. This is fairly trivial to do. After you’ve added these four parameters, add any more parameters for your sun that you think would make the sun function more useful, for example color, line width, and radius/ray-length ratio.
With your completed sun function, you could draw a sun in the background of a game!
Step 10: Create your own drawing functions
Now get creative and add at least two more functions similar to your sun function that draw other complex objects that will be included as part of your final drawing. You should follow the principals of functional decomposition. For example, if one object requires a hexagon, you should define a separate function for drawing a hexagon. Then if you need a hexagon somewhere else later, you won’t have to copy the code for it. If you go to the List of Functions section in the GP142 User’s Guide, you will find several functions for drawing basic shapes that will come in handy to you.
Good luck!