bostongfx · rpan001 · Sep 9, 2019 · Sep 9, 2019 · Sep 9, 2019 · Sep 9, 2019
diff --git a/01/mysolution01.pdf b/01/mysolution01.pdf
diff --git a/02/bonus02.txt b/02/bonus02.txt
@@ -0,0 +1,8 @@
+Richard Pan
+CS460 - Graphics
+Assignment 02 Bonus
+9/16/2019
+
+Q1. If we didn't care about the gap between cubes, then we could go "row by row" in the 9x9 grid and extend the horizontal length of the cube (c.lengthX) by 20 pixels (or the full width of a cube) for each square that should be the same color in the same row. For example, for the tree pixel art, in the second row, we could extend the length of the first green cube 3 times. Yet, as we extend the length, we also need to update the center by adding 10 (or half the width of the cube) to the first cube's center x-coordinate.
+
+Q2. *shown on the code*
diff --git a/02/gfx/assignment02.PNG b/02/gfx/assignment02.PNG
diff --git a/02/index.html b/02/index.html
@@ -0,0 +1,75 @@
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+    <title>CS460 Assignment 2</title>
+    <style>
+      body {
+        background-color: black;
+        color: white; /* font color */
+        font-family: sans-serif;
+        padding: 0;
+        height: 100%;
+        overflow: hidden !important;
+
+      }
+
+      #logo {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+      }
+    </style>
+
+    <script type="text/javascript" src="http://get.goXTK.com/xtk_edge.js"></script>
+
+    <script type="text/javascript">
+
+    window.onload = function() {
+
+      // this gets called when the site is ready
+      // we create a new XTK renderer
+      // by not including a "var", r is global
+      r = new X.renderer3D(); // initialize the renderer
+      r.init();
+
+      var grid = [[],[]];
+      // go through each row and add a different
+      // number of cubes specific to each row
+      // r1, c5; r2 r3 r8 r9, c4-6; r4 r5, c2-c8;
+      // r6 r7, c1-c9 [this will decide what is green]
+      for (var i = 0; i < 9; i++) {
+        for (var j = 0; j < 9; j++) {
+          temp = new X.cube();
+          temp.center = [-110 + (25 * j), 110 - (i * 25), 0];
+          if (i == 0 && j == 4)
+            temp.color = [0, 1, 0];
+          else if ((i == 1 || i == 2 || i == 7 || i == 8) && (j >= 3 && j <= 5))
+            temp.color = [0, 1, 0];
+          else if ((i == 3 || i == 4) && (j >= 1 && j <= 7))
+            temp.color = [0, 1, 0];
+          else if (i == 5 || i == 6)
+            temp.color = [0, 1, 0];
+          else
+            temp.color = [0.1, 0.1, 0.1];
+          r.add(temp);
+        }
+      }
+
+      setInterval(function() {
+
+      }, 1000);
+
+      r.camera.position = [0, 0, 400];
+
+      r.render(); // start rendering
+
+    };
+
+    </script>
+  </head>
+  <body>
+    <h1>CS460 Assignment 2</h1>
+    <div id="logo"><img style="height:60px" src="gfx/cs460.png"></div>
+  </body>
+</html>
diff --git a/02/solution02.pdf b/02/solution02.pdf
diff --git a/03/assignment03.pdf b/03/assignment03.pdf
diff --git a/03/gfx/assignment03.PNG b/03/gfx/assignment03.PNG
diff --git a/03/index.html b/03/index.html
@@ -0,0 +1,155 @@
+<html>
+  <head>
+    <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>
+      window.onload = function() {
+
+
+		    // Three.js code goes here
+        scene = new THREE.Scene();
+
+        fov = 75;
+        ratio = window.innerWidth / window.innerHeight;
+        zNear = 1;
+        zFar = 10000;
+        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);
+
+        // keep track of number of shapes in the scene
+        var count = 0;
+        renderer.domElement.onmousemove = function( e ){
+
+          if (!e.shiftKey) {
+            e.preventDefault();
+            return false;
+          }
+
+          console.log('Yay! We clicked!');
+
+          console.log(e);
+
+          pixel_coords = new THREE.Vector2(e.clientX, e.clientY);
+
+          console.log('Pixel coords', pixel_coords);
+
+          vp_coords = new THREE.Vector2( 
+            (pixel_coords.x / window.innerWidth) * 2 - 1,
+            -(pixel_coords.y / window.innerHeight) * 2 + 1);
+
+          console.log('Viewport coords', vp_coords);
+
+          vp_coords_near = new THREE.Vector3( vp_coords.x, vp_coords.y, 0 ); //if you want near, 0; far, 1
+
+          console.log(vp_coords_near);
+
+          raycaster = new THREE.Raycaster();
+          raycaster.setFromCamera(vp_coords_near, camera);
+
+          intersects = raycaster.intersectObject(invisible_plane);
+
+          first_intersection = intersects[0];
+
+          console.log('3D point', first_intersection.point);
+
+          // move cube to the new 3d position (in-class activity)
+          //cube.position.set(
+            //first_intersection.point.x,
+            //first_intersection.point.y,
+            //first_intersection.point.z
+            //);
+
+          // add a new geometry, material with random color, and then the mesh (for assignment 03)
+
+          c1 = Math.random();
+          c2 = Math.random();
+          c3 = Math.random();
+
+          material = new THREE.MeshStandardMaterial();
+          material.color.setRGB(c1, c2, c3);
+          var geometry;
+
+          var rand = Math.floor(Math.random() * 6);
+          if (rand == 0)
+            geometry = new THREE.BoxBufferGeometry(20, 20, 20);
+          if (rand == 1)
+            geometry = new THREE.TorusKnotBufferGeometry(10, 3);
+          if (rand == 2)
+            geometry = new THREE.SphereBufferGeometry(15);
+          if (rand == 3)
+            geometry = new THREE.OctahedronBufferGeometry(20);
+          if (rand == 4)
+            geometry = new THREE.ConeBufferGeometry(15, 30);
+          if (rand == 5)
+            geometry = new THREE.RingBufferGeometry(5, 20, 10);
+
+          randShape = new THREE.Mesh( geometry, material);
+          randShape.position.set(
+            first_intersection.point.x,
+            first_intersection.point.y,
+            first_intersection.point.z
+            );
+
+          scene.add(randShape);
+
+          count++;
+          console.log( '# of shapes: ', count);
+
+        }
+
+        ambientLight = new THREE.AmbientLight();
+        scene.add( ambientLight );
+
+        light = new THREE.DirectionalLight( 0xffffff, 5,0);
+        light.position.set( 10, 100, 10 );
+        scene.add(light);
+
+        //now add the cube
+        //geometry = new THREE.BoxBufferGeometry (20, 20, 20);
+        //material = new THREE.MeshStandardMaterial({color : 0xffffff});
+        //cube = new THREE.Mesh(geometry, material);
+        //scene.add(cube);
+
+        // add the inivisible plane
+        geometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
+        material = new THREE.MeshStandardMaterial({
+          visible : false
+          });
+
+        invisible_plane = new THREE.Mesh( geometry, material );
+
+        scene.add(invisible_plane);
+
+        controls = new THREE.TrackballControls (camera);
+
+        animate();
+
+      };
+
+      function animate() {
+
+        requestAnimationFrame( animate );
+
+        controls.update();
+
+		// and here...
+        renderer.render( scene, camera );
+
+      };
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/04/assignment4.PNG b/04/assignment4.PNG