Skip to main content

CG Class 5, Mon 2019-09-09

1   How to print info from inside your javascript program

  1. There are several ways; here is the easiest.

  2. Reference: http://www.w3schools.com/js/js_output.asp

  3. Examples to do inside square.js:

    1. window.alert('this is an alert');
    2. window.alert('vertices length: ' + vertices.length + ' 1: ' + vertices[1]);
  4. Note that you can write variable values as well as strings.

  5. Another way is to write to the console log thus:

    console.log('this is a log message');

  6. In firefox, you can display the log window with F12.

  7. An advantage of the log is that you see all the messages together.

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

  1. The amount of green will be read from a slider.
  2. Scrounge your slider code from gasket5.
  3. The value will be transmitted to the fragment shader in a uniform variable.
  4. Scrounge around in Angel's examples to see how to use a uniform variable. (I grepped for 'uniform').

3   Textbook slides

We'll finish the Chapter 2 slides.

4   Iclicker questions

  1. What is your major?
  1. CSYS
  2. ELEC
  3. CSCI
  4. GSAS
  5. Other
  1. What is your class?
    1. 2020
    2. 2021
    3. 2022
    4. Grad
    5. Other
  2. What is the correct order of the graphics pipeline?
    1. vertex-shader fragment-shader rasterizer primitive-assembly
    2. fragment-shader rasterizer primitive-assembly vertex-shader
    3. rasterizer primitive-assembly vertex-shader fragment-shader
    4. primitive-assembly vertex-shader fragment-shader rasterizer
    5. vertex-shader primitive-assembly rasterizer fragment-shader
  3. If you wanted to change all the vertex positions by multiplying each x-coordinate by the same vertex's y-coordinate, the best place to do it is:
    1. with a javascript function
    2. in the vertex shader
    3. in the fragment shader
    4. in the html file
    5. it can't be done.