CS16, Winter 2010

proj0: ("project 0")
Simple graphics

Introduction

In this project, you'll learn how to write C code that can make drawings like these (made by the instructor):

BW HouseColor HouseSnowmanMany SnowmenFlags

And drawings like these (the following are actual student drawings from CS16 Fall 2009):

student drawing
student drawing
student drawing
student drawing
student drawing
student drawing
student drawing

What all of these drawings have in common is that they include some kind of parameterization—that is, the same drawing (e.g. the awesome face), can be drawing at:

This is essentially an exercise in designing functions. You need to:

You'll be given some basic tools to draw in either black and white, or color:

We can also discuss, as student interests dictate, how to extend those routine to do other interesting things like

There's a program called ourDrawing.c—that's where you'll put your code for this project. All the other files—you pretty much shouldn't have to make any changes to those.

In ourDrawing.c, you'll use the functions provided in the other files to make your drawing.

What you draw is up to you—as we'll explain in lecture.

The code that does the basic underlying drawing of lines, boxes, etc. is provided for you, as well as code that copies your file to the web. However, what is good is that the vast majority of that code is code that you already have the capacity to understand at this point in your journey with the C programming language. There isn't time in a 10 week course to guide you the process of developing all that code, but we can go through some of it in lecture to explain how it works—and as time permits, we will.

Goals for this project

By the time you have completed this project, you should:

Prior Skills/Knowledge Needed

Before starting this project, you should have completed the labs up through lab07. In particular, you should be comfortable working with arrays, structs, arrays of structs, and passing structs and arrays of structs to functions.

This is a pair programming project

Work with the same partner you had in lab07/lab08—or if he/she is not available for some reason, see your TA and/or instructor about getting a new pair partner assigned.

If you do work with a new partner, please complete a new version of W01, and post your new assignment to the forum on Gauchospace.

 

Step by Step Instructions

Step 0: Get together with your pair partner, and decide whose account you'll work in

If he/she is not available, and you are assigned a new partner, then complete a new version of worksheet W01 (html, pdf), including posting to the "Updated pair partners for proj0 forum" on Gauchospace.

Remember: don't share passwords. Instead, use scp or email to share files with each other at the end of each work session. (See previous labs for details.)

It is only necessary for one member of the pair to submit—but you are BOTH responsible for seeing that this HAS been done and that both of your names are in the ourDrawing.c file.

Step 1: Log on to CSIL, create ~/cs16/proj0 and copy the files for this project

Log on to CSIL, create ~/cs16/proj0

The files for this project can be found here:

And here:

~pconrad/public_html/cs16/10W/projects/proj0/files/*

You can use the same techniques described in earlier labs to copy those into your ~/cs16/proj0 directory.

Step 2: Listen to the presentation in lecture.

The following material will be covered in lecture either before, or just this project is being assigned.

What you are given is a collection of code containing three libraries:

You'll also see header files that support these C files:

You'll also see some programs that contain main programs that use these libraries:

file what it does sample image
testMain.c contains only test cases, mostly for the functions in shapeFunctions.c n/a
drawHouse.c draws a black and white house, using simple lines BW House
drawFilledColorHouse.c draws a filled house in color Filled color house
drawSnowman.c draws a single snowman in black and white Single snowman
drawManySnowmen.c shows how to make drawing a snowman be a function, so you can draw several snowmen of different sizes Many Snowmen
drawFlags.c shows how to draw a simple tri-color flag (in this case the GermanFlag) using filledBoxes. Another example of abstracting a drawing into a function Flags
ourDrawing.c draws whatever you want (at the moment, it's blank!) A blank drawing

We'll also go over what happens when you type "make". This week there is a Makefile that controls what happens.

You'll need to understand just two things:

How to use the code:

To start off, type "make" (all by itself) at the Unix command prompt.
When you do you'll see output indicating that

Here's an example: 

-bash-3.2$ make
gcc -c testMain.c
gcc -c drawingFunctions.c
gcc -c shapeFunctions.c
gcc -c tdd.c
gcc -lm -Wall -g  drawingFunctions.o shapeFunctions.o tdd.o testMain.o -o testMain
gcc -c drawHouse.c
...

(many lines of output deleted... full transcript available in make.output.txt)

All tests passed!
-bash-3.2$.

The key line of output to look for is this one—except it will have your username, not jsmith—unless your username happens to be jsmith:

Visit http://www.cs.ucsb.edu/~jsmith/cs16/proj0 to see your pics
Go to that website, and you'll see something like this:

proj0 web page

The drawings in that directory are the ones created by the code in the files below:

GIF file C file
filledHouse.gif drawFilledColorHouse.c
flags.gif drawFlags.c
house.gif drawHouse.c
manySnowmen.gif drawManySnowmen.c
ourDrawing.gif
This is where your drawing will appear!		 ourDrawing.c
This is where you put your code!
snowman.gif drawSnowman.gif

The "make clean" command:

If your files get messed up and you want to start over, the "make clean" command will get rid of all the extra files is your current directory so that you can type "make" again from scratch.

What you need to do:

  1. Look at the code in the C files shown above for examples of how to make drawings.
    • Compare the code to the pictures
    • Notice how the code draws using lines, polygons and circles
  2. Together with your lab partner, decide what you want to draw
    • It should be something you can draw using lines, polygons, boxes and circles.
    • Plan out your drawing on paper.
  3. Register your drawing on Gauchospace (see further instructions below in Step 5)
  4. Work on the code for your drawing (see further instructions below in Step 6)

 

Step 5: Registering your drawing on Gauchospace

You need to log into Gauchospace and go to the discussion form near the top of the main page labeled 'register your proj0 drawings here'.

Look to see if anyone else has already registered the same item that you want to draw. You need to draw something that has not already been chosen in order to get full credit.

You may make your item unique by adding a unique "twist"—e.g. if they are drawing a "car", you can't just draw a "car", but you can draw:

Step 6: Working on your drawing

To make your drawing, you put code into the file ourDrawing.c.

The first step is to set up the function call to initDrawing with the correct parameters:

initDrawing(&d, drawing_type, width, height, background_color);

The choices you'll need to make here are:

  1. A black and white, or color drawing?

    If you choose black and white, then you'll use DRAWINGTYPE_BW as your drawing_type, and either BW_WHITE or BW_BLACK as the background color.

    If you choose color, you'll use DRAWINGTYPE_COLOR as your drawing_type, and either COLOR_WHITE, COLOR_BLACK, or one of the other choices in drawing.h such as COLOR_BLUE, COLOR_YELLOW, etc. as your background color.

    You can also use any six digit hexadecimal web color code, preceded by 0x, for example: 0xBDB76B is a shade of khaki.

  2. The size of your drawing?

    The maximum width and height are currently 512 and 512, defined in drawing.h. You may experiment with modifying the values in drawing.h if you want to make a larger drawing—but keep in mind that you may run into disk space issues if the drawing gets too big.

The next step is to add code into one of the two functions called drawShape1 and drawShape2. In each case, you should rename the function to a more sensible name such as:

Decide what parameters the drawing functions will take.

At a minimum, it should take a 'reference point', and at least one dimension—a width, height, or radius—something that allows you to draw your picture at different scales.

What if my drawing has hard coded points?

That's ok as a starting point.

Hard coded points can easily be converted into a formula with a little extra work—once you get the hang of it, it isn't that tough.

A drawing with hard coded points is also ok for partial credit.

What if I don't want my drawing to have "two" of something on it at different sizes?
Or what if my converting my complex drawing from hard coded points is going to be a major pain!

If you already have a drawing that you are very proud of, and you don't want to mess up the artistry, but you still want full credit, here's a work around for you.

This is also a way out if you are not feeling very creative and just want to get this assignment done.

Make a drawing function to draw a drawing consisting of just the initials of your first name, and that of your pair partner. For example, if Ian Smith were to partner with Frieda Jones, their drawing might be IF, and might have points like this:

IF tag

We can label these points like this:

IF tag plan

And then draw this with code like the following:

void drawIF(struct Drawing *d, 
	    struct Point ul, // upper left, or center bottom, or whatever
	    double width,
	    double height, 
	    int color)
{
  double letWidth = width * 0.45; // width of each letter
  double spaceBetween = width * 0.1; // space between letters
  struct Point ulI, umI, urI, llI, lmI, lrI; // I upper left, middle, right, etc.
  struct Point ulF, mlF, llF, urF, mrF;// F upper, middle, and lower left, etc.


  // set points of I across the top
  initPoint(&ulI, ul.x, ul.y);
  initPoint(&umI, ul.x + letWidth/2.0, ul.y);
  initPoint(&urI, ul.x + letWidth, ul.y);



  // set points of I across the bottom
  initPoint(&llI, ul.x, ul.y + height);
  initPoint(&lmI, ul.x + letWidth/2.0, ul.y + height);
  initPoint(&lrI, ul.x + letWidth, ul.y + height);



  // draw the I
  drawLine(d, ulI, urI, color); // across the top
  drawLine(d, llI, lrI, color); // across the bottom
  drawLine(d, umI, lmI, color); // down the middle


  // set points of F down the left hand side, top to bottom
  initPoint(&ulF, ul.x + letWidth + spaceBetween, ul.y);

etc...

}

With this in place, you can now "tag" your drawing with two tags of different sizes and colors, to create an effect something like this:

Tagged Snowmen

With function calls like these:

drawIF(&d,makePoint(10,20),20,80, COLOR_RED);

drawIF(&d,makePoint(265,120),30,20, COLOR_GREEN)

If you do this, then even if your main drawing is hard coded and can't be scaled, you'll get full credit for having created at least one drawing that can be scaled and relocated (i.e. your tag), and you wont have to mess up the artistic integrity of your main drawing.

Why having a drawing in two places at different sizes is so important

The reason it is so important to have a drawing element that appears at different places and with different sizes is that this shows you really understand how to apply the idea of abstraction—which is one of the central ideas in Computer Science.

Finishing up

You are ready to move on to scripting and submitting when:

 

Step 7: Script and submit

To script and submit, create a script proj0.txt in which you:

Check the web site one last time to make sure that your drawing appears there under the name http://www.cs.ucsb.edu/~yourusername/cs16/proj0/ourDrawing.gif.

Then, submit the contents of your proj0 directory via:

turnin proj0@cs16a proj0

 

Evaluation and Grading (300 pts total—but counts double, i.e. 600pts)

* Note that since Gauchospace currently has a maximum point value of 300, we'll compute a grade out of 300 points, and then enter it in Gauchospace twice.

Due Date

Advanced stuff:

For students that really want to go "beyond the call of duty": here are some extra things you may like to experiment with.

Copyright 2010, Phillip T. Conrad, CS Dept, UC Santa Barbara. Permission to copy for non-commercial, non-profit, educational purposes granted, provided appropriate credit is given; all other rights reserved.