CG Class 5, Thu 2018-09-13
Table of contents
1 How to print info from inside your javascript program
-
There are several ways; here is the easiest.
-
Reference: http://www.w3schools.com/js/js_output.asp
-
Examples to do inside square.js:
- window.alert('this is an alert');
- window.alert('vertices length: ' + vertices.length + ' 1: ' + vertices[1]);
-
Note that you can write variable values as well as strings.
-
Another way is to write to the console log thus:
console.log('this is a log message');
-
In firefox, you can display the log window with F12.
-
An advantage of the log is that you see all the messages together.
-
I'll demo these methods.
2 Today's demo program
For today's demo program, I'll modify triangle to add a slider that controls the amount of green to add to the triangle color.
- The amount of green will be read from a slider.
- Scrounge your slider code from gasket5.
- The value will be transmitted to the fragment shader in a uniform variable.
- Scrounge around in Angel's examples to see how to use a uniform variable. (I grepped for 'uniform').
3 Extra material on colors ctd
-
CIE chromaticity diagram
This maps spectral colors into a human perceptual coordinate system. Use it to determine what one color a mixture of colors will appear to be. The curve of pure spectral colors was determined experimentally.
- More info: http://wikipedia.org/wiki/CIE_xyY .
- Purple is not a spectral color.
-
Color video standards: NTSC, SECAM, etc
-
My enrichment note on NTSC And Other TV Formats. NTSC, the American analog TV standard, is now getting obsolete. However it was a beautiful example of engineering design. First B&W TV was invented. Then color was added in a way that was upward compatible, downward compatible, and used no more bandwidth.
-
Retina is a neural net - Mach band effect. When one cone is brightly lit, it inhibits its neighbors from firing so easily. This acts like a high frequency filter, to emphasize small details in the scene. Note: the details of how this works are uncertain.
4 Textbook slides
We'll continue with the textbook powerpoint slides.
5 SIGGRAPH 2017 videos
SIGGRAPH is the world's leading CG conference. I'll show various videos from it.
-
BendSketch: Modeling Freeform Surfaces Through 2D Sketching.
My local copies (MP4 and WEBM) are here.
6 Next few lectures will be mostly mathematics
I'm replacing the Angel lecture at Incremental and Quaternion Rotation, with my own material. Feel free to read ahead.