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.

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 write-up to the [Homework 1] Write-Up: Rasterizer assignment. Please remember to select your pages.

As a reminder, you are solely graded on your write-up PDF submission. Having a website link 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.

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.
  • 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 to include and turn in all of the other files (such as images) that are linked in your report!
  • 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 projects for the rest of this semester, and all future semesters!