Skip to content

Latest commit

 

History

History
54 lines (42 loc) · 6.17 KB

README.md

File metadata and controls

54 lines (42 loc) · 6.17 KB

SFU CMPT 361 Assignment 3: Rasterizing Lines and Triangles!

In this assignment, you will implement rasterization algorithms that allow you to draw lines and solid triangles!

Getting started

To run and develop this assignment you must start a local HTTP server in the directory containing a3.html. The simplest way is using python. In MacOS and Linux python3 -m http.server in a terminal should work out of the box. For Windows or in case of any trouble, see these instructions. Once the HTTP server is up, navigate your browser to http://localhost:8000/a3.html. If you find the browser does not reflect updates in the code after refreshing, try clearing the browser cache. See this stackoverflow question for Chrome, and similar ones for other browsers.

Implementation instructions

We are using a simple framebuffer that you can control using the function setPixel(x, y, color) where x and y specify integer pixel coordinates along the horizontal and vertical axes respectively, with the top-left corner of the image being the origin. The color variable is an array containing RGB color values (i.e. color = [R, G, B]), each represeting as a floating point value in [0,1].

The assignment uses simple text-driven input to specify what we should rasterize. We use the following syntax:

  • v,x,y,r,g,b; specifies a vertex position at x,y with color value color = [r, g, b]. The order in which lines starting with v are provided defines an index for each vertex v. That is, the first v line is the 0-th vertex, the second line is the 1-th vertex etc.
  • p,i; specifies a point (i.e. "pixel") defined by the vertex with index i.
  • l,i,j; specifies a line defined by the start and end vertices with index i and j respectively.
  • t,i,j,k; specifies a triangle defined by the three vertices with indices i, j and k.

You can change the contents of the text box to add vertices as well as point, line and triangle definitions using the defined vertices. Clicking the "Update" button will refresh the image output. The starter code will produce a single pixel at each vertex. Your job is to implement the logic that will rasterize solid lines and triangles with interpolated colors!

Here is a suggested guide for how to approach this assignment:

  1. First, implement line rasterization (see Chapter 8.8-8.9), for now with a constant color value along the line. Start with handling the simple case of slope less than one, and then extend your code to handle other cases. You may base your implementation on the DDA algorithm, correctly extended to handle lines in all orientations. Your implementation should be filled into the drawLine function. [2 pt]
  2. Implement color interpolation along the line. Assume linear interpolation along each RGB color channel from the start to the end of the line. To do this, you will need to define a [0,1] "distance" along the line from start to end points and use the fraction covered up to the current point. You may find it useful to create a helper function but in the end your code will need to be called from the drawLine function to interpolate line color from start to end. [1 pt]
  3. Implement a triangle inside-outside test function to determine whether a pixel is inside a triangle (see Chapter 8.10.1 and Lecture G4). You may base your implementation on the half-plane algorithm described in Lecture G4. You may find it useful to create a helper function pointIsInsideTriangle(v1,v2,v3,p) which you can call from drawTriangle. [3 pt]
  4. Use the above test to implement triangle rasterization in function drawTriangle. Your implementation should avoid naively checking all pixel points. For now, don't worry about colors (you can use a constant color for the entire triangle). [2 pt]
  5. Implement barycentric color interpolation to determine the color value at each pixel inside a triangle. You may find it helpful to define a helper function barycentricCoordinates. [2 pt]
  6. Bonus: do something creative! Now that you can rasterize lines and triangles, have fun with creating an interesting and visually appealing image. Make sure to save the input text that produces this creative artifact into the DEF_INPUT variable. [1 pt]

A bonus point is available for handing in the assignment by the suggested due date.

Some additional points on implementation details:

  • You should only add code to a3.js. No other file should be changed, and you should also not change the import and export statements at the top and bottom of a3.js.
  • Be careful to handle cases such as line endpoints starting and ending at higher or lower x and y values, or endpoints falling in the same pixel.
  • Also be careful to handle cases such as adjacent triangles sharing an edge (there should be no gaps between such triangles, and pixels should be colored in only once so that the order in which triangles are rasterized does not matter)
  • Note that in this assignment we only work with positive (x,y) coordinates on the plane.
  • A bonus point is available for handling some of the hardest corner cases.
  • You will likely need to use some functions from the Javascript Math library (e.g., Math.min()).
  • You are not allowed to use any external libraries, or to copy code from anywhere without appropriate attribution. The assignment should only require simple math operations that you can achieve using JavaScript and a handful of functions from the built-in Math library.

The default input should produce an image like the below when you have completed all parts of the assignment: output

You are free to discuss this assignment online on the CourSys discussion forum, or elsewere but you need to implement this assignment individually and by yourself. We will not tolerate any breach of academic integrity (copying code from other students or elsewhere, providing code to other students).

Submit only your completed a3.js file to CourSys. Your implementation must function correctly with all other files as provided in the starter code.