Deliverables

You will submit your code as well as some deliverables (see below) in a webpage write-up. We recommend utilizing our HW Webpages GitHub Classroom, as we’ve created the necessary directory structure there for each homework. You can review our write-up guide for instructions on how to deploy your site.

Checkpoint Quiz

The Checkpoint Quiz for Homework 1 is due on Friday, February 7, 2025.

Deliverable: Please complete the [Homework 1] Checkpoint assignment.

Unfortunately, you cannot use slip days on the checkpoint.

If you use slip days for this homework, the number of slip days counted will be based on the later submission between your code and write-up. For example, if you submit your code on time but turn in the write-up half a day late, you will use one slip day for the entire assignment.

Code

The code for Homework 1 is due on Tuesday, February 18, 2025.

Deliverable: Please submit your code to the [Homework 1] Code: Rasterizer assignment. We recommend submitting by linking your GitHub account to Gradescope and selecting the relevant repository. Please reference our Student Handbook for more information.

Write-Up

The write-up for Homework 1 is due on Tuesday, February 18, 2025.

Deliverable: Please submit a PDF version of your webpage write-up to the [Homework 1] Write-Up: Rasterizer assignment. Please remember to select your pages. We have guidance on submission ediquette in our Student Handbook.

As a reminder, you are primarily graded on your write-up submission. Having a public website is a requirement, and can serve as a portfolio for you to show off your amazing graphics work in future years, but will not be utilized while grading, so please make sure to check that your PDF catches all images and updates that you’ve made to your website.

We have provided a simple HTML skeleton in index.html found within the docs directory to help you get started and structure your write-up.

You are also welcome to create your own webpage report from scratch using your own preferred frameworks or tools. However, please follow the same overall structure as described in the deliverables section below.

The goals of your write-up are for you to (a) think about and articulate what you’ve built and learned in your own words, (b) have a write-up of the homework to take away from the class. Your write-up should include:

An overview of the homework, your approach to and implementation for each of the parts, and what problems you encountered and how you solved them. Strive for clarity and succinctness.
On each part, make sure to include the results described in the corresponding Deliverables section in addition to your explanation. If you failed to generate any results correctly, provide a brief explanation of why.
The final (optional) part for the art competition is where you have the opportunity to be creative and individual, so be sure to provide a good description of what you were going for and how you implemented it.
Clearly indicate any extra credit items you completed, and provide a thorough explanation and illustration for each of them.

The write-up is one of our main methods of evaluating your work, so it is important to spend the time to do it correctly and thoroughly. Plan ahead to allocate time for the write-up well before the deadline.

Write-Up Rubric

Note that this rubric is rather coarse. The content and quality of your write-up are extremely important, and you should make sure to at least address all the points listed below. The extra credit portions are intended for students who want to challenge themselves and explore methods beyond the fundamentals, and are not worth a large amount of points. In other words, don’t necessarily expect to use the extra credit points on these homeworks to make up for lost points elsewhere.

Note: As a reminder, your screenshots need to be generated by using the 'S' hotkey, not using your operating systems native screenshotting mechanism. You can refer back to our guide on Using the GUI on how to generate these images, and where to find them once they’re generated.

Overview

Give a high-level overview of what you have implemented in this assignment. Think about what you have built as a whole. Share your thoughts on what interesting things you have learned from completing this assignment.

Task 1 (20 pts)

Walk through how you rasterize triangles in your own words.
Explain how your algorithm is no worse than one that checks each sample within the bounding box of the triangle. The bounding box of the triangle is defined as the smallest rectangle that can be drawn whilst ensuring that the entire triangle is within it.
Show a png screenshot of basic/test4.svg with the default viewing parameters and with the pixel inspector centered on an interesting part of the scene.
Extra credit: Explain any special optimizations you did beyond simple bounding box triangle rasterization, with a timing comparison table (we suggest using the c++ clock() function around the svg.draw() command in DrawRend::redraw() to compare millisecond timings with your various optimizations off and on).

Task 2 (20 pts)

Walk through your supersampling algorithm and data structures. Why is supersampling useful? What modifications did you make to the rasterization pipeline in the process? Explain how you used supersampling to antialias your triangles.
Show png screenshots of basic/test4.svg with the default viewing parameters and sample rates 1, 4, and 16 to compare them side-by-side. Position the pixel inspector over an area that showcases the effect dramatically; for example, a very skinny triangle corner. Explain why these results are observed.
Extra credit: If you implemented alternative antialiasing methods, describe them and include comparison pictures demonstrating the difference between your method and grid-based supersampling.

Task 3 (10 pts)

Create an updated version of svg/transforms/robot.svg with cubeman doing something more interesting, like waving or running. Feel free to change his colors or proportions to suit your creativity. Save your svg file as my_robot.svg in your docs/ directory and show a png screenshot of your rendered drawing in your write-up. Explain what you were trying to do with cubeman in words.

Task 4 (10 pts)

Explain barycentric coordinates in your own words and use an image to aid you in your explanation. One idea is to use a svg file that plots a single triangle with one red, one green, and one blue vertex, which should produce a smoothly blended color triangle.
Show a png screenshot of svg/basic/test7.svg with default viewing parameters and sample rate 1. If you make any additional images with color gradients, include them.

Task 5 (15 pts)

Explain pixel sampling in your own words and describe how you implemented it to perform texture mapping. Briefly discuss the two different pixel sampling methods, nearest and bilinear.
Check out the svg files in the svg/texmap/ directory. Use the pixel inspector to find a good example of where bilinear sampling clearly defeats nearest sampling. Show and compare four png screenshots using nearest sampling at 1 sample per pixel, nearest sampling at 16 samples per pixel, bilinear sampling at 1 sample per pixel, and bilinear sampling at 16 samples per pixel.
Comment on the relative differences. Discuss when there will be a large difference between the two methods and why.

Task 6 (25 pts)

Explain level sampling in your own words and describe how you implemented it for texture mapping.
You can now adjust your sampling technique by selecting pixel sampling, level sampling, or the number of samples per pixel. Describe the tradeoffs between speed, memory usage, and antialiasing power between the three various techniques.
Using a png file you find yourself, show us four versions of the image, using the combinations of L_ZERO and P_NEAREST, L_ZERO and P_LINEAR, L_NEAREST and P_NEAREST, as well as L_NEAREST and P_LINEAR.
- To use your own png, make a copy of one of the existing svg files in svg/texmap/ (or create your own modelled after one of the provided svg files). Then, near the top of the file, change the texture filename to point to your own png. From there, you can run ./draw and pass in that svg file to render it and then save a screenshot of your results.
- Note: Choose a png that showcases the different sampling effects well. You may also want to zoom in/out, use the pixel inspector, etc. to demonstrate the differences.
Extra credit: If you implemented any extra filtering methods, describe them and show comparisons between your results with the other above methods.

(Optional) Potential Extra Credit

Save your best svg file as competition.svg in your docs/ directory, and show us a 800x800 png screenshot of it in your write-up!
Explain how you did it. If you wrote a script to generate procedural svg files, include it in your submission in the src/ directory and briefly explain how it works.

Website tips and advice

Please include a link to your webpage at the top of your write-up
Note that only one webpage is needed for both partners
Your main report page should be called index.html.
Be sure that your images all appear in the PDF of your report. If you have videos or gifs, we will check them out on your public webpage.
Use only relative paths to files, such as "./images/image.jpg"
Do NOT use absolute paths, such as "/Users/student/Desktop/image.jpg"
Pay close attention to your filename extensions. Remember that on UNIX systems (such as the instructional machines), capitalization matters. .png != .jpeg != .jpg != .JPG
Be sure to adjust the permissions on your files so that they are world readable. For more information on this please see this tutorial.
Start assembling your webpage early to make sure you have a handle on how to edit the HTML code to insert images and format sections. (Or you can use Markdown)

Feedback (optional, but highly encouraged!)

Please share any feedback you have! This form should only take a minute or two to fill out, is entirely anonymous, and will directly impact how we run and develop homeworks for the rest of this semester, and all future semesters!