Assignment 4

Assignment 5

Due 10/17/2022

Transformations

Translate

Rotate

Scale

Matrix

r   r   r   t_x

r   r   r   t_y

r   r   r   t_z

 0   0   0     1  

x, y, z

x, y, z

new

var m = new Float32Array( [
  r, r, r, 0, 
  r, r, r, 0, 
  r, r, r, 0, 
  t_x, t_y, t_z, 1
]);

column-major ordering!

cos(T)   -sin(T)   0   0

sin(T)   cos(T)   0    0

    0          0        1    0

    0          0       0     1

2, 2, 2

?

with T = Pi/2

 = 90°

X

Y

Z

cos(T)   -sin(T)   0   0

sin(T)   cos(T)   0    0

    0          0        1    0

    0          0       0     1

2, 2, 2

with T = Pi/2

 = 90°

-2, 2, 2

cos(T)   -sin(T)   0   0

sin(T)   cos(T)   0    0

    0          0        1    0

    0          0       0     1

2, 2, 2

with T = Pi/2

0

0

1

2 Pi

Pi

Pi/2

1.5 Pi

90°

1

1

-2

2

2

-1

Scene

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

Scene Graph is a Tree-like Hierarchy!

*

*

*

Assignment 6

Due 10 / 24

<html>
  <head>

    <style>
      html, body { 
        background-color:#000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }
    </style>

    <script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
    <script type="text/javascript" src="https://get.goXTK.com/xtk_xdat.gui.js"></script>

    <script type='text/javascript'>

      window.onload = function() {

        // create and initialize a 3D renderer
        var r = new X.renderer3D();
        r.init();
        
        // create a cube
        cube = new X.cube();
        
        
        r.add(cube); // add the cube to the renderer
        r.render(); // ..and render it

        var gui = new dat.GUI();

        var cubeGui = gui.addFolder('cube');
        
        cubeGui.addColor(cube, 'color');
        cubeGui.add(cube, 'visible');
        cubeGui.add(cube, 'lengthX', 0, 200).onChange( function() {
          cube.modified();
        });
        cubeGui.add(cube, 'lengthY', 0, 200).onChange( function() {
          cube.modified();
        });
        cubeGui.add(cube, 'lengthZ', 0, 200).onChange( function() {
          cube.modified();
        });


        pablo2 = {

          'parameter1': 100

        }

        cubeGui.add(pablo2, 'parameter1', 0, 1000);

        cubeGui.add(window, 'pablo');

        cubeGui.open();



      };

      function pablo() {

        console.log('pablo');

      };



    </script>


  </head>

  <body>
  </body>
</html>

Frame of Reference

X

Y

Z

World Frame

Frame of Reference

X

Y

Z

Object Frame

Frame of Reference

X

Y

Z

Object Frame

Frame of Reference

X

Y

Z

Eye Frame

Camera

(Eye)

cos(T)   -sin(T)   0   0

sin(T)   cos(T)   0    0

    0          0        1    0

    0          0       0     1

rotation around Z

Matrix

cos(T)   -sin(T)   0   0

sin(T)   cos(T)   0    0

    0          0        1    0

    0          0       0     1

rotation around Z

cos(T/2)

sin(T/2) * 0

sin(T/2) * 0

sin(T/2) * 1

Matrix

Quaternion

w

x

y

z

cos(T)   -sin(T)   0   0

sin(T)   cos(T)   0    0

    0          0        1    0

    0          0       0     1

rotation around Z

cos(T/2)

sin(T/2) * 0

sin(T/2) * 0

sin(T/2) * 1

Matrix

Quaternion

var m = new Float32Array( [
  Math.cos(T), -Math.sin(T), 0, 0, 
  Math.sin(T), Math.cos(T), 0, 0, 
  0, 0, 1, 0, 
  0, 0, 0, 1
]);
var q = new Float32Array( [
  Math.cos(T/2), 
  Math.sin(T/2)*0,
  Math.sin(T/2)*0,
  Math.sin(T/2)*1
]);
var q = new Float32Array( [
  Math.sin(T/2)*0,
  Math.sin(T/2)*0,
  Math.sin(T/2)*1,
  Math.cos(T/2)
]);

w

x

y

z

    1          0        0          0

     0   cos(T)   -sin(T)   0

    0    sin(T)   cos(T)     0

    0          0       0           1

rotation around X

cos(T/2)

sin(T/2) * 1

sin(T/2) * 0

sin(T/2) * 0

Matrix

Quaternion

cos(T)         0       sin(T)    0  

    0           1              0     0

-sin(T)    0       cos(T)     0

    0           0              0     1

rotation around Y

cos(T/2)

sin(T/2) * 0

sin(T/2) * 1

sin(T/2) * 0

Matrix

Quaternion

1   0   0   0

0   1   0   0

0   0   1   0

0   0   0   1

Identity

1

0

0

0

Matrix

Quaternion

w

x

y

z

-1

0

0

0

Quaternion

var q = new THREE.Quaternion( x, y, z, w );
<html>
  <head>

    <style>
      html, body { 
        background-color:#000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }
    </style>

    <script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
    <script type="text/javascript" src="https://get.goXTK.com/xtk_xdat.gui.js"></script>

    <script type='text/javascript'>

      window.onload = function() {

        // create and initialize a 3D renderer
        var r = new X.renderer3D();
        r.init();
        
        // create a cube
        cube = new X.cube();
        
        
        r.add(cube); // add the cube to the renderer
        r.render(); // ..and render it

        var gui = new dat.GUI();

        var cubeGui = gui.addFolder('cube');
        
        cubeGui.addColor(cube, 'color');
        cubeGui.add(cube, 'visible');
        cubeGui.add(cube, 'lengthX', 0, 200).onChange( function() {
          cube.modified();
        });
        cubeGui.add(cube, 'lengthY', 0, 200).onChange( function() {
          cube.modified();
        });
        cubeGui.add(cube, 'lengthZ', 0, 200).onChange( function() {
          cube.modified();
        });


        pablo2 = {

          'parameter1': 100

        }

        cubeGui.add(pablo2, 'parameter1', 0, 1000);

        cubeGui.add(window, 'pablo');

        cubeGui.open();



      };

      function pablo() {

        console.log('pablo');

      };



    </script>


  </head>

  <body>
  </body>
</html>

submit your music

Lecture 15

By Daniel Haehn

Lecture 15

Slides for CS460 Computer Graphics at UMass Boston. See https://cs460.org!

  • 593