CS 733 in Fall 2022

Schedule

Code

• Code Directory

Links

• Syllabus (pdf)
• UR Courses

Assignments

Assignment 1 ()

• Marks: 8
• Due Date: 03-Oct-2022 @ 23:59
• Discuss
• Submit

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

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

Calculator

Rubric Criteria

Implementation (6) criteria_GL01 Choose... Exemplary (+): Code functions as required and code is easily readable Exemplary: Code functions as required and code is easily readable Exemplary (-): Code functions as required and code is easily readable Sufficient (+): Code functions as required but code is not so easily readable Sufficient: Code functions as required but code is not so easily readable Sufficient (-): Code functions as required but code is not so easily readable Developing (+): Completed but code does not function as required Developing: Completed but code does not function as required Developing (-): Completed but code does not function as required Needs Improvement: Not completed

Comments (2) criteria_GL01 Choose... Exemplary (+): Comments well written and explain rationale Exemplary: Comments well written and explain rationale Exemplary (-): Comments well written and explain rationale Sufficient (+): Comments well written but do not fully explain rationale Sufficient: Comments well written but do not fully explain rationale Sufficient (-): Comments well written but do not fully explain rationale Developing (+): Comments not consistently done Developing: Comments not consistently done Developing (-): Comments not consistently done Needs Improvement: 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

Assignment 2 ()

• Marks: 8
• Due Date: 17-Oct-2022 @ 23:59
• Discuss
• Submit

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

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

Calculator

Rubric Criteria

Graphics Implementation (based on squarem.html/js) (1.33) criteria_GL02 Choose... Exemplary (+): Code functions as required and code is easily readable Exemplary: Code functions as required and code is easily readable Exemplary (-): Code functions as required and code is easily readable Sufficient (+): Code functions as required but code is not so easily readable Sufficient: Code functions as required but code is not so easily readable Sufficient (-): Code functions as required but code is not so easily readable Developing (+): Completed but code does not function as required Developing: Completed but code does not function as required Developing (-): Completed but code does not function as required Needs Improvement: Not completed / does not use WebGL 2.0

Interaction Implementation (based on squarem.html/js) (1.33) criteria_GL02 Choose... Exemplary (+): Code functions as required and code is easily readable Exemplary: Code functions as required and code is easily readable Exemplary (-): Code functions as required and code is easily readable Sufficient (+): Code functions as required but code is not so easily readable Sufficient: Code functions as required but code is not so easily readable Sufficient (-): Code functions as required but code is not so easily readable Developing (+): Completed but code does not function as required Developing: Completed but code does not function as required Developing (-): Completed but code does not function as required Needs Improvement: Not completed / does not use Bootstrap

Comments (in your version of squarem.html/js) (1.34) criteria_GL02 Choose... Exemplary (+): Comments well-written, explain rationale, identify own contributions Exemplary: Comments well-written, explain rationale, identify own contributions Exemplary (-): Comments well-written, explain rationale, identify own contributions Sufficient (+): Comments well written but do not fully explain rationale Sufficient: Comments well written but do not fully explain rationale Sufficient (-): Comments well written but do not fully explain rationale Developing (+): Comments not consistently done Developing: Comments not consistently done Developing (-): Comments not consistently done Needs Improvement: Little to no comments in code / own contribtions not identified

Graphics Implementation (based on trackball*.html/js) (1.33) criteria_GL02 Choose... Exemplary (+): Code functions as required and code is easily readable Exemplary: Code functions as required and code is easily readable Exemplary (-): Code functions as required and code is easily readable Sufficient (+): Code functions as required but code is not so easily readable Sufficient: Code functions as required but code is not so easily readable Sufficient (-): Code functions as required but code is not so easily readable Developing (+): Completed but code does not function as required Developing: Completed but code does not function as required Developing (-): Completed but code does not function as required Needs Improvement: Not completed / does not use WebGL 2.0

Interaction Implementation (based on trackball*.html/js) (1.33) criteria_GL02 Choose... Exemplary (+): Code functions as required and code is easily readable Exemplary: Code functions as required and code is easily readable Exemplary (-): Code functions as required and code is easily readable Sufficient (+): Code functions as required but code is not so easily readable Sufficient: Code functions as required but code is not so easily readable Sufficient (-): Code functions as required but code is not so easily readable Developing (+): Completed but code does not function as required Developing: Completed but code does not function as required Developing (-): Completed but code does not function as required Needs Improvement: Not completed / does not use Bootstrap

Comments (in your version of trackball*.html/js) (1.34) criteria_GL02 Choose... Exemplary (+): Comments well-written, explain rationale, identify own contributions Exemplary: Comments well-written, explain rationale, identify own contributions Exemplary (-): Comments well-written, explain rationale, identify own contributions Sufficient (+): Comments well written but do not fully explain rationale Sufficient: Comments well written but do not fully explain rationale Sufficient (-): Comments well written but do not fully explain rationale Developing (+): Comments not consistently done Developing: Comments not consistently done Developing (-): Comments not consistently done Needs Improvement: Little to no comments in code / own contribtions not identified

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

Assignment 3 ()

• Marks: 8
• Due Date: 31-Oct-2022 @ 23:59
• Discuss
• Submit

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

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

Calculator

Rubric Criteria

Graphics Implementation (2.66) criteria_GL03 Choose... Exemplary (+): Code functions as required and code is easily readable Exemplary: Code functions as required and code is easily readable Exemplary (-): Code functions as required and code is easily readable Sufficient (+): Code functions as required but code is not so easily readable Sufficient: Code functions as required but code is not so easily readable Sufficient (-): Code functions as required but code is not so easily readable Developing (+): Completed but code does not function as required Developing: Completed but code does not function as required Developing (-): Completed but code does not function as required Needs Improvement: Not completed / does not use WebGL 2.0

Interaction Implementation (2.66) criteria_GL03 Choose... Exemplary (+): Code functions as required and code is easily readable Exemplary: Code functions as required and code is easily readable Exemplary (-): Code functions as required and code is easily readable Sufficient (+): Code functions as required but code is not so easily readable Sufficient: Code functions as required but code is not so easily readable Sufficient (-): Code functions as required but code is not so easily readable Developing (+): Completed but code does not function as required Developing: Completed but code does not function as required Developing (-): Completed but code does not function as required Needs Improvement: Not completed / does not use Bootstrap

Comments (2.68) criteria_GL03 Choose... Exemplary (+): Comments well-written, explain rationale, identify own contributions Exemplary: Comments well-written, explain rationale, identify own contributions Exemplary (-): Comments well-written, explain rationale, identify own contributions Sufficient (+): Comments well written but do not fully explain rationale Sufficient: Comments well written but do not fully explain rationale Sufficient (-): Comments well written but do not fully explain rationale Developing (+): Comments not consistently done Developing: Comments not consistently done Developing (-): Comments not consistently done Needs Improvement: Little to no comments in code / own contribtions not identified

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

Assignment 4 ()

• Marks: 8
• Due Date: 21-Nov-2022 @ 23:59
• Discuss
• Submit

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

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

Calculator

Rubric Criteria

Graphics Implementation (2.66) criteria_GL04 Choose... Exemplary (+): Code functions as required and code is easily readable Exemplary: Code functions as required and code is easily readable Exemplary (-): Code functions as required and code is easily readable Sufficient (+): Code functions as required but code is not so easily readable Sufficient: Code functions as required but code is not so easily readable Sufficient (-): Code functions as required but code is not so easily readable Developing (+): Completed but code does not function as required Developing: Completed but code does not function as required Developing (-): Completed but code does not function as required Needs Improvement: Not completed / does not use WebGL 2.0

Interaction Implementation (2.66) criteria_GL04 Choose... Exemplary (+): Code functions as required and code is easily readable Exemplary: Code functions as required and code is easily readable Exemplary (-): Code functions as required and code is easily readable Sufficient (+): Code functions as required but code is not so easily readable Sufficient: Code functions as required but code is not so easily readable Sufficient (-): Code functions as required but code is not so easily readable Developing (+): Completed but code does not function as required Developing: Completed but code does not function as required Developing (-): Completed but code does not function as required Needs Improvement: Not completed / does not use Bootstrap

Comments (2.68) criteria_GL04 Choose... Exemplary (+): Comments well-written, explain rationale, identify own contributions Exemplary: Comments well-written, explain rationale, identify own contributions Exemplary (-): Comments well-written, explain rationale, identify own contributions Sufficient (+): Comments well written but do not fully explain rationale Sufficient: Comments well written but do not fully explain rationale Sufficient (-): Comments well written but do not fully explain rationale Developing (+): Comments not consistently done Developing: Comments not consistently done Developing (-): Comments not consistently done Needs Improvement: Little to no comments in code / own contributions not identified

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

Assignment 5 ()

• Marks: 8
• Due Date: 05-Dec-2022 @ 23:59
• Discuss
• Submit

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

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

Calculator

Rubric Criteria

Graphics Implementation (2.66) criteria_GL05 Choose... Exemplary (+): Code functions as required and code is easily readable Exemplary: Code functions as required and code is easily readable Exemplary (-): Code functions as required and code is easily readable Sufficient (+): Code functions as required but code is not so easily readable Sufficient: Code functions as required but code is not so easily readable Sufficient (-): Code functions as required but code is not so easily readable Developing (+): Completed but code does not function as required Developing: Completed but code does not function as required Developing (-): Completed but code does not function as required Needs Improvement: Not completed / does not use WebGL 2.0

Interaction Implementation (2.66) criteria_GL05 Choose... Exemplary (+): Code functions as required and code is easily readable Exemplary: Code functions as required and code is easily readable Exemplary (-): Code functions as required and code is easily readable Sufficient (+): Code functions as required but code is not so easily readable Sufficient: Code functions as required but code is not so easily readable Sufficient (-): Code functions as required but code is not so easily readable Developing (+): Completed but code does not function as required Developing: Completed but code does not function as required Developing (-): Completed but code does not function as required Needs Improvement: Not completed / does not use Bootstrap

Comments (2.68) criteria_GL05 Choose... Exemplary (+): Comments well-written, explain rationale, identify own contributions Exemplary: Comments well-written, explain rationale, identify own contributions Exemplary (-): Comments well-written, explain rationale, identify own contributions Sufficient (+): Comments well written but do not fully explain rationale Sufficient: Comments well written but do not fully explain rationale Sufficient (-): Comments well written but do not fully explain rationale Developing (+): Comments not consistently done Developing: Comments not consistently done Developing (-): Comments not consistently done Needs Improvement: Little to no comments in code / own contributions not identified

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

Previous exams

• 202330 Midterm

Feedback