COMP 361
Weeks 7  - 9 (April 16 - May 8th)

Contact information .

How to hand in your assignments:

  1. Some assignments may require email; others may require handing in written material. For those requiring e-mail, send e-mail to me containing plain text (not an attachment) showing your work.  In some cases, the message may consist of answers to questions, in other cases. it will likely require the submission of (programing assignments) your source code. 
  2. For this class, my email address is (Should you wish to stay in touch beyond this semester, then should remain active.)

For these remaining weeks of the semester:

Using <canvas> in HTML (getting ready for ThreeJS) (writing and reading bits in canvas)
filters (blurring, convolution, color transfer, composition, etc.)
trefoil (simple) and derivation of the curve and some more on related topics
A new thing involving tessellation and script.
perspective and the viewing fustrum
Getting started with ThreeJS
Overview (from Wikipedia)
The main web page
examples: many and diverse from Lee Stemkowski
a note on materials (from CJ Gammon)
ThreeJS examples (made, and hence, explainable by me):
Example 1e -- user-defined shape (simpler version with four faces from six vertices) (looped vertices and faces)
Example 1f -- random colors for faces of a shape (refresh to get new colors)
Example 1g -- using a bitmap as the texture of a face; and simplified and with transparency
More (and more) examples
A-frame: from the FAQ: "A-Frame is an open-source web framework for building virtual reality experiences. We can build VR web pages that we can walk inside with just HTML. Under the hood, it is a three.js framework that brings the entity-component-system pattern to the DOM."
A-frame website
 A simple a-frame example *
and another one
particle system with snow
fancy water shader as used in web game using A-frame

Other examples to consider (web graphics):
the class web page (note use of gradient, CSS, interaction)
centering things (JavaScript, CSS, SVG)

Time allowing...

interaction and animation
texture and pattern ("colors" like gold, textural cues, detection of repetition, wetness, fabric, sheen)
noise (smooth and particulate)
2D meets 3D
drawing from canvas to ThreeJS
drawing from SVG to canvas
SVG in 3JS
SVG with CSS3D (Firefox is better than Chrome for this)
2.5D and illusion (fun: tangles and paradox, example1, example2triangulated warp)
tessellation (note, in particular, the last link here. )
computational geometry

Discussed in previous weeks:
vectors and pixels 
bits per pixel, spatial resolution
dithering and anti-aliasing
Compression: GIF vs JPG.
Human vision and color perception. Gender, Orders of magitude (retina [image source and further (unrequired) reading] vs. monitor)
Color systems for computers: RGB and CMYK,
Web standards for graphics: HTML, CSS, SVG, WebGL (part of Open GL), W3C vs W3Schools
2D Coordinate systems and the screen.
HTML: "pregraphics examples"
string manipulation
sorting objects
data analysis
the basics (a somewhat polemic and naive treatise)
bouncy game
another game
DOM methods
JavaScript array methods
ThreeJS examples:
Example 1a placing simple cubes in a space
Example 1b -- moving the camera
Example 1c -- using a different material (MeshLambertMaterial) and positional lighting (rather than ambient)
Example 1d -- moving lights and objects
a start 
drawn objects in SVG: polygons, paths, curves
a template (with namespaces, script and simple functions)
gradients (defined, examples), clipping and masks (defined), discussion and examples
translation, rotation, scaling: defined, discussion and examples
grouping and reusing: discussion , more examples
using JavaScript to create new things
SVG script 1
SVG script 2
SVG script 3
More SVG scripting
Bzier curves (quadratic and cubic) animated example (from Jason Davies),
rotation (2D, 3D, CSS, SVG)
Color systems for computers: HSL/HSV/HSB (also see examples HSL1 and  HSL2) (vs. RGB) , CIE,  Indexed Color
Human vision and color perception. linguistic and cultural issues, gender.
affine and perspective transformations

Assigned Reading-- the class web page and links leading from it.

"Reading" for the purposes of this class, requires understanding the material sufficiently to 

Assignment #1. Due Tuesday, March 13: Send email (using the proper format) to the instructor verifying that you're in the class!  Also, please review the above topics (from vectors and pixels through computational geometry) and list, in order, the five topics you would like most to learn about this semester.

Assignment #2. Due Tuesday, March 20th. Send me (though email) the source code (plain text) of a web page containing a two textareas and a button. JavaScript (in the <script> of the web page) should, when the button is clicked, take the words contained in the first textarea and display them in alphabetical order inside the second textarea.

Assignment #3. Due Wednesday, April 4th.  Concerning SVG. Details here.

Quiz.  Last hour of the class, Tuesday, April 10th. Concerning all material covered to date. Combination of short answer (multiple choice) and essay (writing code).

Assignment #4. Due Wednesay, April 11th. Concerning ThreeJS. Details here.

Final ProjectDetails here. (in lieu of Final Exam). Due last class meeting, Tuesday, May 8th.