CSCI 441 - Computer Graphics

Fall 2023 - Assignment 1 - Hoist Your Sign

This assignment is due by Friday, September 08, 2023 11:59pm.

Every day has felt the same lately. You've been in the town for several weeks now. Your accommodations are minimal, but they suffice. It's a safe place to rest, and you've been able to store the gear you've slowly been accumulating.

cloaked figure After being in town for a week, you were taken on as a shopkeeper's assistant. The shopkeeper had you frequently running back to the port to transfer goods and this gave you the opportunity to make a few friends that help you with favors.

Not long after, you decided to open your own shop. Business has been steady, and you're reputation has grown. This morning an individual draped in a cloak enters the shop. The figure seems to browsing in circles, but you then realize they are waiting. Once everyone else has left the store and it's just the two of you, the figure approaches you at the counter.

"He's noticed you around town. You seem to be able to go where you please and are quite well respected. He could use your help as well. I'd recommend you listen to all that I have to say, you wouldn't want to disappoint him."

Wait, disappoint who?

"It isn't safe to talk here, too many ears listening. Close shop and follow me."

You pause, unsure what to do. Realizing that you were always looking down at the figure, you worry they may be a patupaiarehe. Not wanting to bring bad luck to your shop, you decide to do as they say. You flip the sign in the window, close the door, and follow.

Part I - Create Your Sign

After twisting through the narrow streets, the cloaked figure stops. There's a pile of lumber and other supplies tossed about.

"It's time to prove yourself. Maui will call for you when he's ready."

Who?

"I was able to salvage what I could from the port for you to use as a starting point. Sorry about the odd sizes, but you should be able to assemble a 700 pakihiwi by 150 pakihiwi banner to advertise your shop. You must follow the instructions. Begin accepting trades for your goods. He'll be watching. When you've acquired the set of items he needs, I shall return."

rolled up scroll A hand then extends holding a scroll. You take it. You unroll it, but it's in a language not native to your region. Sensing your puzzlement the figure says

"You must begin at once. I will translate for you."

For this assignment, create an OpenGL / GLFW program that displays your hero's name and a crest of your choosing to represent your hometown. It is recommended to use a clean version of Lab00B (Lab00BEngine.h & Lab00BEngine.cpp) as a starting point. Rename them to be A1Engine and start creating your new image.

Create a window that matches the size of the materials 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 must be constructed using only OpenGL primitives (GL_TRIANGLES,GL_TRIANGLE_FAN,GL_TRIANGLE_STRIP.) 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.

Combinatorics: Be sure to try out the different triangle primitives that are available. There are many different types, so do not be afraid to experiment with all of them at once 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 glm::translate(), glm::scale(), & glm::rotate() appropriately and respectively. Make sure at least one letter is used in conjunction 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 sign is created, your hero will proudly display their sign on their hero page, accessible from the leaderboard.

With very little to go on, you step back and admire your work. Not too bad. Hopefully he will be pleased. Despite the mystery of what is coming, you begin to have a feeling of optimism. This all may work out.

Part II - Create Your Website

In addition to making a sign, create a webpage that showcases your work. There is a template available for your website. If you wish to use it, download this .zip file and extract it. 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 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.

Whether 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 UpperCamelCase. (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 expected 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:

Grading Rubric

Your submission will be graded according to the following rubric:

Percentage Requirement 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).
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, CMakeLists.txt, 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 formatted, compiles, and executes properly.

Experience Gained & Available Achievements

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

Submission

Please update your compilation such that it produces an executable with the name a1 and contains a class named A1Engine. When you are completed with the assignment, zip together your source code, CMakeLists.txt, and README.txt into a folder named src/ plus include your www/ folder. Name the zip file, HeroName_A1.zip . Upload this file to Canvas under A1. The structure of your submission should look as follows:

This assignment is due by Friday, September 08, 2023 11:59pm.