CS 733 in Fall 2022

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
11:00-11:30
11:30-12:00 CS-428+730
DHH URC
CS-428+730
DHH URC
12:00-12:30
12:30-13:00
13:00-13:30 Office Office
13:30-14:00
14:00-14:30
14:30-15:00 CS-280
DHH URC
CS-280
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

Assignment 1 ()

Assignment 1

Write 2 WebGL 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) and the other will use the recursive algorithm. You may use the sample code discussed in class as starting points for your work.

  • your HTML should use Bootstrap, including 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)
  • your code should use different colours when rendering (to highlight the different transformations used: 3 colours to distinguish the last transformation and 9 colours to distinguish the last 2 transformations)
  • you should comment your code, explain the WebGL 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 8 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
Implementation (6) Code functions as required and code is easily readable Code functions as required but code is not so easily readable Completed but code does not function as required Not completed
Comments (2) Comments well written and explain rationale Comments well written but do not fully explain rationale Comments not consistently done Little to no comments in code
Calculator
Rubric Criteria
Penalties
Copy Output to Clipboard

Assignment 2 ()

Assignment 2

Write 2 WebGL 2.0 programs (HTML and JavaScript) that improve and add functionality to code from the text:

  • squarem.html — allow for selection of colours; allow for input positions to be overwritten so that storage is not exhausted (the reference version’s display goes blank after a while); and permit the mouse coordinate input to work correctly when the canvas is not at the top left of the browser window
  • trackball (trackball.html and trackballQuaternion.html) — combine the code from the two samples into one with a toggle for quaternions and provide information and feedback about the trackball operation on the HTML page

Code which does not use WebGL 2.0 or Bootstrap will receive the lowest grade for that criterion.

Your comments should identify you, what you have added to the sample code to realize the requested functionality (and why), as well as explaining what is happening in the code (in both what you use from the sample code and what you have written). If you have used code from other sources, please make sure to identify and attribute it!

Submission

Submit a single zip file that contains code (html,js,css) that can be run in place. Use separate folders for each program and put a README file at the top level that explains the contents.

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 8 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
Graphics Implementation (based on squarem.html/js) (1.33) Code functions as required and code is easily readable Code functions as required but code is not so easily readable Completed but code does not function as required Not completed / does not use WebGL 2.0
Interaction Implementation (based on squarem.html/js) (1.33) Code functions as required and code is easily readable Code functions as required but code is not so easily readable Completed but code does not function as required Not completed / does not use Bootstrap
Comments (in your version of squarem.html/js) (1.34) Comments well-written, explain rationale, identify own contributions Comments well written but do not fully explain rationale Comments not consistently done Little to no comments in code / own contribtions not identified
Graphics Implementation (based on trackball*.html/js) (1.33) Code functions as required and code is easily readable Code functions as required but code is not so easily readable Completed but code does not function as required Not completed / does not use WebGL 2.0
Interaction Implementation (based on trackball*.html/js) (1.33) Code functions as required and code is easily readable Code functions as required but code is not so easily readable Completed but code does not function as required Not completed / does not use Bootstrap
Comments (in your version of trackball*.html/js) (1.34) Comments well-written, explain rationale, identify own contributions Comments well written but do not fully explain rationale Comments not consistently done Little to no comments in code / own contribtions not identified
Calculator
Rubric Criteria
Penalties
Copy Output to Clipboard

Assignment 3 ()

Assignment 3

Write a WebGL 2.0 program (HTML and JavaScript) that combines the 2 cube shaders that were presented in class (see vertex.html and fragment.html) so that both versions of the cube are displayed at the same time and are controlled by a single set of interface elements (so the rotations are applied the same to both). Additionally, add controls to change other parameters affecting the shading (light position and so forth) and allow the projection to be toggled between parallel and perspective (no need to adjust those parameters).

This page may help with inspiration: webgl2fundamentals.org. Alternatively, here is the sample.html from Meeting 19.

Code which does not use WebGL 2.0 or Bootstrap will receive the lowest grade for that criterion.

Your comments should identify you, what you have added to the sample code to realize the requested functionality (and why), as well as explaining what is happening in the code (in both what you use from the sample code and what you have written). If you have used code from other sources, please make sure to identify and attribute it!

Submission

Submit a single zip file that contains code (html,js,css) that can be run in place. Use separate folders for each program and put a README file at the top level that explains the contents.

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 8 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
Graphics Implementation (2.66) Code functions as required and code is easily readable Code functions as required but code is not so easily readable Completed but code does not function as required Not completed / does not use WebGL 2.0
Interaction Implementation (2.66) Code functions as required and code is easily readable Code functions as required but code is not so easily readable Completed but code does not function as required Not completed / does not use Bootstrap
Comments (2.68) Comments well-written, explain rationale, identify own contributions Comments well written but do not fully explain rationale Comments not consistently done Little to no comments in code / own contribtions not identified
Calculator
Rubric Criteria
Penalties
Copy Output to Clipboard

Assignment 4 ()

Assignment 4

Add textures and light to figure.html. Here is a simple example with roboticArm.html.

Code which does not use WebGL 2.0 or Bootstrap will receive the lowest grade for that criterion.

Your comments should identify you, what you have added to the sample code to realize the requested functionality (and why), as well as explaining what is happening in the code (in both what you use from the sample code and what you have written). If you have used code from other sources, please make sure to identify and attribute it!

Submission

Submit a single zip file that contains code (html,js,css) that can be run in place. Use separate folders for each program and put a README file at the top level that explains the contents.

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 8 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
Graphics Implementation (2.66) Code functions as required and code is easily readable Code functions as required but code is not so easily readable Completed but code does not function as required Not completed / does not use WebGL 2.0
Interaction Implementation (2.66) Code functions as required and code is easily readable Code functions as required but code is not so easily readable Completed but code does not function as required Not completed / does not use Bootstrap
Comments (2.68) Comments well-written, explain rationale, identify own contributions Comments well written but do not fully explain rationale Comments not consistently done Little to no comments in code / own contributions not identified
Calculator
Rubric Criteria
Penalties
Copy Output to Clipboard

Assignment 5 ()

Assignment 5

Animate figure.html. Here is a simple example with roboticArm.html.

Code which does not use WebGL 2.0 or Bootstrap will receive the lowest grade for that criterion.

Your comments should identify you, what you have added to the sample code to realize the requested functionality (and why), as well as explaining what is happening in the code (in both what you use from the sample code and what you have written). If you have used code from other sources, please make sure to identify and attribute it!

Submission

Submit a single zip file that contains code (html,js,css) that can be run in place. Use separate folders for each program and put a README file at the top level that explains the contents.

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 8 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
Graphics Implementation (2.66) Code functions as required and code is easily readable Code functions as required but code is not so easily readable Completed but code does not function as required Not completed / does not use WebGL 2.0
Interaction Implementation (2.66) Code functions as required and code is easily readable Code functions as required but code is not so easily readable Completed but code does not function as required Not completed / does not use Bootstrap
Comments (2.68) Comments well-written, explain rationale, identify own contributions Comments well written but do not fully explain rationale Comments not consistently done Little to no comments in code / own contributions not identified
Calculator
Rubric Criteria
Penalties
Copy Output to Clipboard

Exams

From previous offerings:

Feedback