CS 315+733 in Fall 2024

Meetings

Weekly Schedule (Tentative)

Week of Meetings Topics Items of Note
Mon-02-Sep-2024 01

Topics

Noteworthy Items

Mon-09-Sep-2024 02 03

Topics

CS-315 Lab1

Mon-16-Sep-2024 04 05

Topics

Noteworthy Items

Mon-23-Sep-2024 06 07

Topics

CS-315 Lab2

Mon-30-Sep-2024 08

Topics

Noteworthy Items

Mon-07-Oct-2024 09 10

Topics

CS-315 Lab3

Mon-14-Oct-2024
Mon-21-Oct-2024 11 12

Topics

Mon-28-Oct-2024 13 14

Topics

Noteworthy Items

Mon-04-Nov-2024 15 16

Topics

CS-315 Lab5

Mon-11-Nov-2024 17

Topics

Noteworthy Items

Mon-18-Nov-2024 18 19

Topics

CS-315 Lab6

Mon-25-Nov-2024 20 21

Topics

Noteworthy Items

Mon-02-Dec-2024 22 23

Topics

Noteworthy Items

Office Hours and Semester Schedule

Schedule

Times Mon Tue Wed Thu Fri
00:00-08:30
08:30-09:00
09:00-09:30
09:30-10:00
10:00-10:30
10:30-11:00 Office Office
11:00-11:30
11:30-12:00
12:00-12:30
12:30-13:00
13:00-13:30
13:30-14:00
14:00-14:30
14:30-15:00 CS-315+733
DHH URC
CS-315+733
DHH URC
15:00-15:30
15:30-16:00
16:00-16:30
16:30-17:00
17:00-17:30
17:30-23:59

Code

Assignments

Introduction to WebGL2 ()

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
Grade penalties will be applied in the following situations for assignment submissions:
  • on time but the written instructions for the submission were not followed: deduct 10% of the earned grade
  • late (but within 48 hours of the due date and time): deduct 10% of the earned grade
  • late by more than 48 hours: deduct 20% of the earned grade

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

Criterion and Weight Exemplary Sufficient Developing Needs Improvement
Random (2) Code functions as required and code is easily readable. Comments well written and explain rationale. Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Completed but code does not function as required. Comments not consistently done. Not completed. Little to no comments in code.
Recursive (2) Code functions as required and code is easily readable. Comments well written and explain rationale. Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Completed but code does not function as required. Comments not consistently done. Not completed. Little to no comments in code.
Calculator
Rubric Criteria
Penalties
Copy Output to Clipboard

Testing, Triangles, and Transformations ()

Testing, Triangles, and Transformations

WebGL2 Program

Write a WebGL2 program (HTML and JavaScript) that generates a 3D to Sierpiński’s Tetrahedron and builds a 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. You may use the sample code discussed in class 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 discuss the how to determine the settings for the highest precision image that can be displayed without doing extra 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

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

Grading
Grade penalties will be applied in the following situations for assignment submissions:
  • on time but the written instructions for the submission were not followed: deduct 10% of the earned grade
  • late (but within 48 hours of the due date and time): deduct 10% of the earned grade
  • late by more than 48 hours: deduct 20% of the earned grade

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

Criterion and Weight Exemplary Sufficient Developing Needs Improvement
WebGL2 Programming (5) Code functions as required and code is easily readable. Comments well written and explain rationale. Code functions as required but code is not so easily readable. Comments well written but do not fully explain rationale. Completed but code does not function as required. Comments not consistently done. Not completed. Little to no comments in code.
Testing (1)
Transformation (1)
Calculator
Rubric Criteria
Penalties
Copy Output to Clipboard

Exams

In 202430: