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

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

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 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

Output

Evaluate Copy Output to Clipboard Clear Form

Exams

In 202430: