COMP 361
Weeks 3 and 4 (March 19 - 30)

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

For this week and the next (time allowing):

Bzier curves (quadratic and cubic) animated example (from Jason Davies),

Using <canvas> in HTML (getting ready for ThreeJS)
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
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 1a placing simple cubes in a space
Example 1b -- moving the camera
Other examples to consider (web graphics):
the class web page (note use of gradient, CSS, interaction)
centering things (JavaScript, CSS, SVG)
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.

For later weeks:

SVG transform matrix (explanation from Mozilla
affine and perspective transformations
interaction and animation
texture and pattern
more ThreeJS (materials, positional lighting, textures, shapes, interaction, etc.)
noise (smooth and particulate)
filters (blurring, convolution, color transfer, composition, etc.)
2.5D and illusion (fun: tangles and paradox, example1, example2triangulated warp)
Vector spaces
tessellation (note, in particular, the last link here. )
computational geometry

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 to be announced.

Final Project: (in lieu of Final Exam): Due last class meeting, Tuesday, May 8th.   Details to be announced.