Weeks 4 - 6

News: Quiz #1 -- Friday October 14th

Assignment (due date to be announced):
Math exercises

Other topics:
vectors and pixels
bits per pixel, spatial resolution
dithering and anti-aliasing
Color systems for computers: RGB and CMYK,  HSL (vs. RGB) , CIE,  Indexed Color
Compression: GIF vs JPG.
Types of  web animation:
JavaScript: onmousemove transform="matrix", dynamic random scenes and motion
[pros={power, ubiquity},cons={complexity, expertise, >development time}]
SVG/SMIL: example1 example2 example3
[pros={easy, concise, semantic, <development time, sociable},cons={Microsoft, W3C=too busy/weak}]
JavaScript/SMIL combination: example1 example2
[pros=union{pros(JavaScript), pros(SMIL)}, cons=cons(JavaScript), cons(SMIL)]
CSS: example
[pros={HTML+SVG}, cons={experimental, flaky, Microsoft, cumbersome}, uncertain={new features sometimes implemented by browsers sooner in CSS than in SVG -- do we really need 3D and blend modes for hTEXTml before svGRAPHICS????}]
CSS/SMIL combination: example1 example2 (has nasty bug in Firefox-- to be fixed with FF50.)
future [Web Animations ?]
Using <canvas>
Simple example (drawing a line)
Several examples (curves, rectangles, gradients, text)
Simulated 3D
Replicate and random. Firefox recently broke some of these.
More CSS 3D transforms a simpler rotating half-cube (as in assignment #1)
CSS + replicate
A nice presentation on 3D geometry
Getting ready for WebGL
Preparing the <canvas> for 3D
Example modified from website ... comments on original
Stripped down example
Rotation using matrices
Homogeneous coordinates (as used in transforms) -- example being developed

Fabric (earlier from 2012)
Spheres (extra credit to the first one who can get it working -- even sort of (as in having the spheres appear as more than ovals) -- in Chrome)
Wikipedia article
new : ThreeJS Elements
more complex