CSCI 441 - Computer Graphics

Fall 2016 - Assignment 1 - Adorn Your Temple



|   Home |  Syllabus |  Assignments |  Leaderboard |  Schedule |  Resources   |
This assignment is due by August 31, 2016 11:59pm.

Free to walk about the town, you make your way through the maze of streets. Many people are moving about, every which way, but all seem to be ignoring you for the most part. Actually, no one pays any attention to anyone else. They pay enough mind to not run into each other, but the nicities end there. Tired of dodging these creatures, you are not quite sure what some of these people even are, you turn into a seemingly abandoned temple.

This temple must once have been a gilded hall with statues lining the walls. Now it is dusty, gray, and filled with rubble of broken statues. Carefully you make your way through the minefield of debris and approach what appears to have been an altar. You have this uneasy feeling that you are not alone in here, but as you continually scan the room you are indeed the only one there.

When you get closer to the altar, you realize these are the only stones that have not been damaged. You place your hand upon the large, flat, smooth stone that makes up the apparent altar and moments later you hear a voice, barely a whisper. Turning around, there's an old beggar woman sitting in the middle of the room where you just walked through. She motions for you to come closer.
"I can tell you are loyal to our cause. That boat you came in on, there are others. We have not yet determined if they are on our side or not. If we are to preserve our land that we fought so hard for many years ago, then we must gather all those who worship with us.

This Temple. It was once tribute to the most powerful of Gods, until it was destroyed during the Titanomachy. You must restore it. Here, take this piece of cloth. I have held it since the day the columns fell in. Use it to signal those like you. I sense something in you, but it is much too faint. We need the others if we are to prevail."
You take the cloth and gaze down at the strange fabric. It seems to have some magical properties to it. You begin to ask the woman what this is, where it came from, but you look around and the woman has vanished. Where did she go?

As she spoke, there was something very familiar about her. Had you seen her before? Was she on the boat? Trusting her words, you immediately begin affixing her requests to the soon to be banner. There is not much time to waste.


Part I - Display Your Banner


You quickly realize the fabric continues to grow as you unfurl it to quite an odd size - 700 cubits by 150 cubits. This scrap of cloth originally fit in the palm of your hand. Wanting to make the most of the materials at hand, you plan to use it all. As you stretch the cloth out on the ground, you find a note that must have fallen out that reads:
For this assignment, create an OpenGL / GLUT program that displays your hero's name and a crest of your choosing to represent your homeworld. Create a window that matches the size of the fabric you have - that is, make the window 700 pixels wide by 150 pixels tall. Do not use any predefined fonts, instead draw each letter using a filled OpenGL polygon. Each letter should be constructed using OpenGL primitives (GL_TRIANGLES, GL_TRIANGLE_FAN, GL_QUADS, etc. Do not use GL_POLYGON) and a set of manually created vertices. The vertices can be hardcoded in the program or read from a file if you are feeling particularly fancy. Be sure to try out the different primitives that are available. There are many different types, so do not be afraid to experiment with all of them within your banner.

In addition, more than one color must be used when drawing the letters. The letters need to be translated, scaled, and rotated by calling glTranslatef(), glScalef(), & glRotatef() respectively. Make sure at least one letter is used in conjuction with each transformation.

It would be good practice to begin encapsulating data within subroutines and functions (for instance, have a function drawLetterC() that handles drawing the letter C and a separate function drawLetterS() that handles drawing the letter S). While a simple example right now, this will become much more important later on when we discuss model hierarchy and object oriented program design.
Once your banner is created, your hero will proudly display their banner on their hero page, accessible from the leaderboard. Proud of your work, your hero steps back and realizes you will need more than just a paltry flag hanging in the Temple. Your hero quickly begins looking around for any equipment that's at hand.


Part II - Create Your Website


In addition to making a banner, create a webpage that showcases your work. There is a template available for your website. If you wish to use it, download this .tar.gz file (or .zip file) and extract it in your dropbox. It will create a www/ directory with the stylesheet from the course webpage, which you can use if you like. You'll be adding to it for each homework assignment, with a screenshot or screenshots of your work, a short description of the assignment, and the opportunity to talk about any neat implementation details if you so choose. The websites are a way for you to keep track of the projects you've made over the course of the semester, but you should also aim to make the descriptions accessible to people outside of the course as a way to share and showcase your coursework. Hopefully you can use this as a portfolio along with your resumé.

Inside the www/ directory, there is an images/ folder. Place any screenshots and other images into this folder.

If you're not familiar with HTML, don't worry; the template shouldn't do anything crazy - a <br> signifies a newline, the <img> tag places an image. There are plenty of tutorials available for HTML if you want to add tables, change font styles, or play with the formatting. There are some comments in the template file to help you out as well.

If you choose to use the template or your own template, be sure to name the webpage <HeroName>.html where <HeroName> is the name of your hero without spaces in CamelCase. (For example, my submission would look like ElvishScout.html.) If you have a question about what you should name your file, please ask the instructor and he will confirm how your name should look.


Documentation


With this and all future assignments, you are expeced to appropriately document your code. This includes writing comments in your source code - remember that your comments should explain what a piece of code is supposed to do and why; don't just re-write what the code says in plain English. Comments serve the dual purpose of explaining your code to someone unfamiliar with it and assisting in debugging. If you know what a piece of code is supposed to be doing, you can figure out where it's going awry more easily. (Interestingly enough, this code review of Doom 3's source code says the exact opposite - well written code should require no comments. Well, we don't work at id so we're going to comment.)

Proper documentation also means including a README.txt file with your submission. In your submission folder, always include a file called README.txt that lists:
  • Your Name / HeroName
  • Homework Number / Project Title
  • A brief, high level description of what the program is / does
  • A usage section, explaining how to run the program, which keys perform which actions, etc.
  • Instructions on compiling your code
  • Notes about bugs, implementation details, etc. if necessary
  • How long did this assignment take you?
  • How much did the lab help you for this assignment? 1-10 (1 - did not help at all, 10 - this was exactly the same as the lab)
  • How fun was this assignment? 1-10 (1 - discontinue this assignment, 10 - I wish I had more time to make it even better!)


Grading Rubric


Your submission will be graded according to the following rubric.

PercentageRequirement Description
15%Hero's name and crest are drawn to screen.
5%Window is sized appropriately
20%Hero's name and crest are made up of solid OpenGL primitives
(GL_TRIANGLES / _STRIP / _FAN, _QUADS / _STRIP).
10%Hero's name and crest are made up of more than one color.
15%Letters are translated, scaled, and rotated.
10%Submission includes source code, Makefile, and README.txt with proper documentation.
Source code is well documented.
10%Webpage named <HeroName>.html submitted and updated with screenshot from latest assignment.
15%Submission compiles and executes properly.


Experience Gained & Available Achievements


Assignment Attribute
Assignments +100 XP
Web Attribute
Web +100 XP
Combinatorics
Combinatorics


Submission


Please update your Makefile so it produces an executable with the name a1. When you are completed with the assignment, zip together your source code, Makefile, README.txt, and www/ folder. Name the zip file, HeroName_A1.zip. Upload this file to Blackboard.


This assignment is due by August 31, 2016 11:59pm.
Last Updated: 01/01/70 00:00


Valid HTML 4.01 Strict Valid CSS! Level Triple-A conformance, W3C WAI Web Content Accessibility Guidelines 2.0