COMP 361
Weeks 5 and 6 (April 2 - 13)

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   DaileyDP@gcc.edu (Should you wish to stay in touch beyond this semester, then david.dailey@sru.edu should remain active.)

For this week and the next (time allowing):

Using <canvas> in HTML (getting ready for ThreeJS) (writing and reading bits in canvas)
SVG:
a template (with namespaces, script and simple functions)
using JavaScript to create new things
SVG script 1
SVG script 2
SVG script 3
More SVG scripting
filters (blurring, convolution, color transfer, composition, etc.)
trefoil (simple) and derivation of the curve and some more on related topics 
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
Example 1c -- using a different material (MeshLambertMaterial) and positional lighting (rather than ambient)
Example 1d -- moving lights and objects
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
Other examples to consider (web graphics):
the class web page (note use of gradient, CSS, interaction)
centering things (JavaScript, CSS, SVG)


For later weeks:

SVG transform matrix (explanation from Mozilla
interaction and animation
texture and pattern
more ThreeJS (materials, positional lighting, textures, shapes, interaction, etc.)
Example 1earth -- same as (simplified) above, but with bitmap/texture from NASA/JPL-Caltech, as suggested by Tony Parisi's book "WebGL"
Example 1h -- two ways of putting plain (2D text) in a scene (either put a div atop the scene, or map a texture to a canvas that has text drawn in it)
in-class discussion of how "real" three D text is a) difficult and b) not accessible in Three.js, but how it is easy and accessible in <replicate>.
Note how this related example (trying to draw a bitmap on a canvas and then loading that onto the sides of a cube) works in Firefox, but not in Chrome.
Example 1i -- click on a shape to make it move
Example 1j -- moving an individual vertex within a geometry (using myobject.geometry.verticesNeedUpdate = true;
            and myobject.geometry.dynamic = true;)
noise (smooth and particulate)
fractals
shaders
2D meets 3D
drawing from canvas to ThreeJS
drawing from SVG to canvas
replicate
SVG in 3JS
SVG with CSS3D (Firefox is better than Chrome for this)
HTML in SVG
HTML in 3JS
2.5D and illusion (fun: tangles and paradox, example1, example2triangulated warp)
Vector spaces
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"
JavaScript
string manipulation
sorting objects
data analysis
the basics (a somewhat polemic and naive treatise)
bouncy game
another game
DOM methods
JavaScript array methods
SVG:
overview,
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
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 Project: (in lieu of Final Exam): Due last class meeting, Tuesday, May 8th.   Details to be announced.