Assignment 4

Just wow!!!

Assignment 5

Due Monday!

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

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

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

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

-1

-2, 2, 2

cos(T/2)

sin(T/2) * 0

sin(T/2) * 0

sin(T/2) * 1

Quaternion

w

x

y

z

~0.7

~0.7

0

0

~0.7

0

0

~0.7

0

2

2

2

w

x

y

z

*

Quaternion

?

~0.7

0

0

~0.7

0

2

2

2

*

~0.7

- 0

- 0

- ~0.7

Inverse

page 64, Gortler: 3D Computer Graphics

~0.7

0

0

~0.7

0

2

2

2

w

x

y

z

*

Quaternion

~0.7

0

0

~0.7

0

2

2

2

*

~0.7

- 0

- 0

- ~0.7

Inverse

page 64, Gortler: 3D Computer Graphics

  0

- 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

-1

-2, 2, 2

cos(T/2)

sin(T/2) * 0

sin(T/2) * 0

sin(T/2) * 1

Quaternion

w

x

y

z

~0.7

~0.7

0

0

Rigid Body Transformation

Quaternion

Translation Vector

w

x

y

z

x

y

z

0

var q = new THREE.Quaternion( x, y, z, w );

SLERP!

 spherical linear interpolation

<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      html, body { 
        background-color:#000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }
    </style>
    <script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
    <script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
    <script>

      var mesh = null;


      window.onload = function() {

        scene = new THREE.Scene();

        fov = 75;
        ratio = window.innerWidth / window.innerHeight;
        zNear = 1;
        zFar = 10000;
        // console.log(ratio);
        camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
        camera.position.set( 0, 0, 100);

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        
        ambientLight = new THREE.AmbientLight();
        scene.add( ambientLight );

        light = new THREE.DirectionalLight( 0xffffff, 5.0 );
        light.position.set( 10, 100, 10 );
        scene.add( light );


        //
        // The invisible plane
        //
        geometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
        material = new THREE.MeshBasicMaterial( {
          visible: false
        });

        invisible_plane = new THREE.Mesh( geometry, material );

        scene.add( invisible_plane );
        //
        //
        //



        controls = new THREE.TrackballControls( camera, renderer.domElement );

        animate();


        //
        // ACTION!
        //
        totalObjects = 0;
        renderer.domElement.onmouseup = function(e) {

          if (!e.shiftKey) {


            e.preventDefault();
            return false;
          }

          console.log('yes! you clicked!');

          pixel_coords = new THREE.Vector2( e.clientX, e.clientY );

          console.log('Pixel coordinates', pixel_coords);

          vp_coords = new THREE.Vector2( ( pixel_coords.x / window.innerWidth ) * 2 - 1,
                                        -( pixel_coords.y / window.innerHeight ) * 2 + 1);

          console.log('Viewport coordinates', vp_coords);

          vp_coords_near = new THREE.Vector3( vp_coords.x, vp_coords.y, 0);

          raycaster = new THREE.Raycaster();
          raycaster.setFromCamera(vp_coords_near, camera);
          intersects = raycaster.intersectObject(invisible_plane);


          // choose random geometry
          random_geometry =  Math.floor((Math.random() * 6));
          switch(random_geometry) {
            case 0:
              geometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16 );
              break;

            case 1:
              geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
              break;

            case 2:
              geometry = new THREE.SphereBufferGeometry(20,20,10);
              break;

            case 3:
              geometry = new THREE.OctahedronBufferGeometry(20);
              break;

            case 4:
              geometry = new THREE.ConeBufferGeometry(20,10);
              break;

            case 5:
              geometry = new THREE.RingBufferGeometry( 1, 20, 32 );

          }
          random_geometry += 1


          // choose random color
          colors = ['red', 'blue', 'green', 'white', 'purple', 'yellow'];
          random_color = colors[Math.floor((Math.random() * colors.length))];



          material = new THREE.MeshStandardMaterial({ color: random_color });
          mesh = new THREE.Mesh( geometry, material );
        
          mesh.position.set(intersects[0].point.x, intersects[0].point.y,intersects[0].point.z)

          scene.add(mesh);

          totalObjects += 1;
          console.log('Total objects', totalObjects);
        
        };

        


      };

      function animate() {

        requestAnimationFrame( animate );

        controls.update();
        renderer.render( scene, camera );

      };

    </script>
  </head>
  <body></body>
</html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      html, body { 
        background-color:#000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;  
      }
    </style>
    <script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
    <script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
    <script>

      var mesh = null;
      var all_meshes = [];


      window.onload = function() {

        scene = new THREE.Scene();

        fov = 75;
        ratio = window.innerWidth / window.innerHeight;
        zNear = 1;
        zFar = 10000;
        // console.log(ratio);
        camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
        camera.position.set( 0, 0, 100);

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        
        ambientLight = new THREE.AmbientLight();
        scene.add( ambientLight );

        light = new THREE.DirectionalLight( 0xffffff, 5.0 );
        light.position.set( 10, 100, 10 );
        scene.add( light );


        //
        // The invisible plane
        //
        geometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
        material = new THREE.MeshBasicMaterial( {
          visible: false
        });

        invisible_plane = new THREE.Mesh( geometry, material );

        scene.add( invisible_plane );
        //
        //
        //



        controls = new THREE.TrackballControls( camera, renderer.domElement );

        animate();


        //
        // ACTION!
        //
        totalObjects = 0;
        renderer.domElement.onmousemove = function(e) {

          if (!e.shiftKey) {


            e.preventDefault();
            return false;
          }

          console.log('yes! you clicked!');

          pixel_coords = new THREE.Vector2( e.clientX, e.clientY );

          console.log('Pixel coordinates', pixel_coords);

          vp_coords = new THREE.Vector2( ( pixel_coords.x / window.innerWidth ) * 2 - 1,
                                        -( pixel_coords.y / window.innerHeight ) * 2 + 1);

          console.log('Viewport coordinates', vp_coords);

          vp_coords_near = new THREE.Vector3( vp_coords.x, vp_coords.y, 0);

          raycaster = new THREE.Raycaster();
          raycaster.setFromCamera(vp_coords_near, camera);
          intersects = raycaster.intersectObject(invisible_plane);


          // choose random geometry
          random_geometry =  Math.floor((Math.random() * 6));
          switch(random_geometry) {
            case 0:
              geometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16 );
              break;

            case 1:
              geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
              break;

            case 2:
              geometry = new THREE.SphereBufferGeometry(20,20,10);
              break;

            case 3:
              geometry = new THREE.OctahedronBufferGeometry(20);
              break;

            case 4:
              geometry = new THREE.ConeBufferGeometry(20,10);
              break;

            case 5:
              geometry = new THREE.RingBufferGeometry( 1, 20, 32 );

          }
          random_geometry += 1


          // choose random color
          colors = ['red', 'blue', 'green', 'white', 'purple', 'yellow'];
          random_color = colors[Math.floor((Math.random() * colors.length))];



          material = new THREE.MeshStandardMaterial({ color: random_color });
          mesh = new THREE.Mesh( geometry, material );
        
          mesh.position.set(intersects[0].point.x, intersects[0].point.y,intersects[0].point.z)

          scene.add(mesh);

          all_meshes.push(mesh);

          totalObjects += 1;
          console.log('Total objects', totalObjects);
        
        };

        


      };

      function animate() {

        requestAnimationFrame( animate );

          if (mesh != null) {

            for(m in all_meshes) {

              mesh = all_meshes[m];

              q = new THREE.Quaternion( 0, Math.sin(Math.PI/2),0, Math.cos(Math.PI/2) );

              mesh.quaternion.slerp( q, 0.01 );

            }

          }


        controls.update();
        renderer.render( scene, camera );

      };

    </script>
  </head>
  <body></body>
</html>

Arcball

Trackball

Controls

Natural Feeling

Spins twice as fast

Completely path independent

Arcball

Trackball

Natural Feeling

Spins twice as fast

Completely path independent

Arcball

Trackball

Quiz today!