CS 315+733 in Fall 2024

Schedule

Code

• Code Directory

Links

• Syllabus (pdf)
• UR Courses
• Meetings Calendar file (meetings.ics)
• CS-315 lab page
• Website for textbook
• WebGL2 Fundamentals

Assignments

Introduction to WebGL2 ()

• Marks: 4
• Due Date: 27-Sep-2024 @ 23:59
• Discuss
• Submit

Introduction to WebGL2

Write 2 WebGL2 programs (HTML and JavaScript) to generate a Sierpiński Gasket (as named by Benoit B Mandelbrot) in 2D. One of your programs will use the random algorithm (Chaos Game, introduced by Barnsley) – see https://interactivecomputergraphics.com/8E/Code/02/gasket1.html – and the other will use the recursive algorithm – see https://interactivecomputergraphics.com/8E/Code/02/gasket2.html. You may use the sample code discussed in class as starting points for your work but remember to acknowledge your sources!

• your HTML should include some controls to adjust some parameters in your code (including but not limited to the number of points for the random algorithm and the number of subdivisions for the recursive algorithm). Add the option to perturb the midpoint of each side of the triangle before subdivision (a similar technique was used in the genesis sequence in Star Trek The Wrath of Khan).
• your code should use 9 different colours when rendering to highlight the last 2 transformations applied. See the chaos game sample and the recursive sample.
• you should comment your code, explain the WebGL2 functions used, and discuss the how to determine the settings for the highest precision image that can be displayed without doing extra work

Grading

This assignment is worth 4 marks, according to the following rubric:

Rubric

DePaul Univerity’s Center for Teaching and Learning has a useful resource describing the process of creating rubrics. Your comments about the following rubric are welcome via email

Calculator

Rubric Criteria

Random (2) criteria_IG01 Choose... Exemplary (+): Code functions as required and code is easily readable. Comments well written and explain rationale. Exemplary: Code functions as required and code is easily readable. Comments well written and explain rationale. Exemplary (-): Code functions as required and code is easily readable. Comments well written and explain rationale. Sufficient (+): Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Sufficient: Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Sufficient (-): Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Developing (+): Completed but code does not function as required. Comments not consistently done. Developing: Completed but code does not function as required. Comments not consistently done. Developing (-): Completed but code does not function as required. Comments not consistently done. Needs Improvement: Not completed. Little to no comments in code.

Recursive (2) criteria_IG01 Choose... Exemplary (+): Code functions as required and code is easily readable. Comments well written and explain rationale. Exemplary: Code functions as required and code is easily readable. Comments well written and explain rationale. Exemplary (-): Code functions as required and code is easily readable. Comments well written and explain rationale. Sufficient (+): Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Sufficient: Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Sufficient (-): Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Developing (+): Completed but code does not function as required. Comments not consistently done. Developing: Completed but code does not function as required. Comments not consistently done. Developing (-): Completed but code does not function as required. Comments not consistently done. Needs Improvement: Not completed. Little to no comments in code.

Penalties

None (on-time and followed instructions)

Instructions not followed

Assignment submitted late, but within 48 hours

Assignment submitted more than 48 hours late and before cut-off date

Assignment not submitted before cut-off date

Output

Evaluate Copy Output to Clipboard Clear Form

Testing, Triangles, and Transformations ()

• Marks: 7
• Due Date: 28-Oct-2024 @ 23:59
• Discuss
• Submit

Testing, Triangles, and Transformations

WebGL2 Program

Write a WebGL2 program (HTML and JavaScript) that generates a 3D Sierpiński’s Tetrahedron and builds an opaque (not wireframe) container around it that encloses the tetrahedron. This container should have a lid that opens (while being connected to the rest of the container along a common edge). Create a means to open the lid with an animation and to show that the tetrahedron is inside. Here is a sample tetrahedron from the textbook code. You may use the sample code discussed in class and the 315 lab as a starting point for your work but remember to acknowledge your sources!

• your HTML should include some controls to open (and close) the lid and to show that the tetrahedron is inside the container.
• your code should use different colours for different pieces.
• you should comment your code, explain the WebGL2 functions used, and indicate your sources of inspiration (and code) that you are submitting. Be clear about what you have done and don’t take credit for someone else’s work.

Testing

Devise and describe tests to ensure:

• that the 3 vertices of a triangle do not lie on the same line (are not co-linear)
• that the 4 vertices of a quadrilateral are co-planar

This is not intended to be a programming question.

Transformation

In two dimensions, we can specify a line by the equation y = mx + b, where m is the slope of the line and b is the point where it intercepts the y axis. Find an affine transformation that reflects two dimensional points about this line. Given a point P = (x, y), derive a transformation matrix M such that P’ = M x P is the reflected image of P. Note that if P is on this line, P’ == P

This is not intended to be a programming question.

Submission

Submit all your files in a single zip archive. The contents of your archive should include all the files needed to run your code (including copies of the Common files). Include a README file at the top level of your archive that explains where to find things. You should use the textbook’s convention of putting the shaders in your HTML file.

Grading

This assignment is worth 7 marks, according to the following rubric:

Rubric

DePaul Univerity’s Center for Teaching and Learning has a useful resource describing the process of creating rubrics. Your comments about the following rubric are welcome via email

Calculator

Rubric Criteria

WebGL2 Programming (5) criteria_IG02 Choose... Exemplary (+): Code functions as required and code is easily readable. Comments well written and explain rationale. Exemplary: Code functions as required and code is easily readable. Comments well written and explain rationale. Exemplary (-): Code functions as required and code is easily readable. Comments well written and explain rationale. Sufficient (+): Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Sufficient: Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Sufficient (-): Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Developing (+): Completed but code does not function as required. Comments not consistently done. Developing: Completed but code does not function as required. Comments not consistently done. Developing (-): Completed but code does not function as required. Comments not consistently done. Needs Improvement: Not completed. Little to no comments in code.

Testing (1) criteria_IG02 Choose... Exemplary (+): Exemplary: Exemplary (-): Sufficient (+): Sufficient: Sufficient (-): Developing (+): Developing: Developing (-): Needs Improvement:

Transformation (1) criteria_IG02 Choose... Exemplary (+): Exemplary: Exemplary (-): Sufficient (+): Sufficient: Sufficient (-): Developing (+): Developing: Developing (-): Needs Improvement:

Penalties

None (on-time and followed instructions)

Instructions not followed

Assignment submitted late, but within 48 hours

Assignment submitted more than 48 hours late and before cut-off date

Assignment not submitted before cut-off date

Output

Evaluate Copy Output to Clipboard Clear Form

Fly-by ()

• Marks: 7
• Due Date: 25-Nov-2024 @ 23:59
• Discuss
• Submit

Fly-by

WebGL2 Program

Write a WebGL2 program (HTML and JavaScript) that builds on your code from Assignment 2 (code is provided if you did not complete Assignment 2), add some other boxes (or other objects) to the scene then add the ability for the camera to fly around the scene in 2 ways:

1. following a straight line, have the camera look down at the scene and update the point at which you are looking as you move along the line. Keep the same relationship between camera (eye point) and the point you are looking at as you move along the line: say your camera starts at location at (0,5,0) and ends at (0,5,-10) then your camera might start looking at (0,0,-1) and end looking at (0,0,-11). The height should be constant and allow you to fly over your scene at a comfortable distance (without hitting it).

2. following a circular spiral path, have the camera always looking at the centre of your scene (say (cx,0,cz)). Start your camera’s descent from a comfortable height (x,h,z) and a distance (r) from the centre (cx,h,cz). Make one or more complete passes to reach a height of (h/2) so that the camera stops at (x,h/2,z).

Provide an interface that allows the fly-by option to be selected and the parameters to be adjusted. See this example for interface ideas, which you can use as a starting point for your work but remember to acknowledge your sources!

• your HTML should include some controls to select the fly-by option (1 or 2) and allow the parameters to be set for each one.
• your code should use different colours.
• you should comment your code, explain the WebGL2 functions used, and indicate your sources of inspiration (and code) that you are submitting. Be clear about what you have done and don’t take credit for someone else’s work.

Submission

Submit all your files in a single zip archive. The contents of your archive should include all the files needed to run your code (including copies of the Common files). Include a README file at the top level of your archive that explains where to find things. You should use the textbook’s convention of putting the shaders in your HTML file.

Grading

This assignment is worth 7 marks, according to the following rubric:

Rubric

DePaul Univerity’s Center for Teaching and Learning has a useful resource describing the process of creating rubrics. Your comments about the following rubric are welcome via email

Calculator

Rubric Criteria

WebGL2 Programming (7) criteria_IG03 Choose... Exemplary (+): Code functions as required and code is easily readable. Comments well written and explain rationale. Exemplary: Code functions as required and code is easily readable. Comments well written and explain rationale. Exemplary (-): Code functions as required and code is easily readable. Comments well written and explain rationale. Sufficient (+): Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Sufficient: Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Sufficient (-): Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Developing (+): Completed but code does not function as required. Comments not consistently done. Developing: Completed but code does not function as required. Comments not consistently done. Developing (-): Completed but code does not function as required. Comments not consistently done. Needs Improvement: Not completed. Little to no comments in code.

Penalties

None (on-time and followed instructions)

Instructions not followed

Assignment submitted late, but within 48 hours

Assignment submitted more than 48 hours late and before cut-off date

Assignment not submitted before cut-off date

Output

Evaluate Copy Output to Clipboard Clear Form

Light it Up ()

• Marks: 7
• Due Date: 6-Dec-2024 @ 23:59
• Discuss
• Submit

Light it Up

WebGL2 Program

Write a WebGL2 program (HTML and JavaScript) that builds on your code from Assignment 3. For fly-by option 1 (straight line), move the light with the camera and for fly-by option 2 (circular spiral), the light should be stationary. Add interface controls for the parameters of the lighting and shading. You can use the same material for your whole scene. See this example for interface ideas, which you can use as a starting point for your work but remember to acknowledge your sources!

• your HTML should include some controls to select the fly-by option (1 or 2) and allow the parameters, including lighting and shading, to be set for each one
• your code should use different colours.
• you should comment your code, explain the WebGL2 functions used, and indicate your sources of inspiration (and code) that you are submitting. Be clear about what you have done and don’t take credit for someone else’s work.

Submission

Submit all your files in a single zip archive. The contents of your archive should include all the files needed to run your code (including copies of the Common files). Include a README file at the top level of your archive that explains where to find things. You should use the textbook’s convention of putting the shaders in your HTML file.

Grading

This assignment is worth 7 marks, according to the following rubric:

Rubric

DePaul Univerity’s Center for Teaching and Learning has a useful resource describing the process of creating rubrics. Your comments about the following rubric are welcome via email

Calculator

Rubric Criteria

WebGL2 Programming (7) criteria_IG04 Choose... Exemplary (+): Code functions as required and code is easily readable. Comments well written and explain rationale. Exemplary: Code functions as required and code is easily readable. Comments well written and explain rationale. Exemplary (-): Code functions as required and code is easily readable. Comments well written and explain rationale. Sufficient (+): Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Sufficient: Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Sufficient (-): Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Developing (+): Completed but code does not function as required. Comments not consistently done. Developing: Completed but code does not function as required. Comments not consistently done. Developing (-): Completed but code does not function as required. Comments not consistently done. Needs Improvement: Not completed. Little to no comments in code.

Penalties

None (on-time and followed instructions)

Instructions not followed

Assignment submitted late, but within 48 hours

Assignment submitted more than 48 hours late and before cut-off date

Assignment not submitted before cut-off date

Output

Evaluate Copy Output to Clipboard Clear Form

Exams

In 202430: