bostongfx · NaveenMuthusamy94 · Sep 12, 2022 · Sep 12, 2022 · Sep 12, 2022 · Sep 20, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/02/index.html b/02/index.html
@@ -0,0 +1,92 @@
+<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;
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        overflow: hidden !important;
+      }
+
+      #logo {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+      }
+    </style>
+
+    <script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
+
+    <script type="text/javascript">
+
+    window.onload = function() {
+
+      // this gets called when the site is ready
+
+      // create a new scene and renderer
+      r = new X.renderer3D();
+      r.init();
+      const shape = new Array();
+      r.camera.position = [0, 0, 700];
+      // drawing the shape
+      for(var i=0; i<9; i++)
+      {
+         for (var j=0; j<9; j++)
+        {
+          var c = new X.cube();
+          if(i<3)
+          c.color = [0, 1, 0];
+          else if(i<6)
+          c.color = [1, 1, 1];  
+          else
+          c.color = [1, 0.647, 0];  
+          c.center = [25*j, 25*i, 0];
+          r.add(c);
+          shape.push(c);
+        }
+      }
+
+      // making the sakram blink
+      setInterval(function() 
+      {
+        shape[30].color = [0, 0, 1];
+        shape[31].color = [0, 0, 1];
+        shape[32].color = [0, 0, 1];
+        shape[39].color = [0, 0, 1];
+        shape[40].color = [0, 0, 1];
+        shape[41].color = [0, 0, 1];
+        shape[48].color = [0, 0, 1];
+        shape[49].color = [0, 0, 1];
+        shape[50].color = [0, 0, 1];
+      }, 500);
+      setInterval(function() 
+      {
+        shape[30].color = [1, 1, 1];
+        shape[31].color = [1, 1, 1];
+        shape[32].color = [1, 1, 1];
+        shape[39].color = [1, 1, 1];
+        shape[40].color = [1, 1, 1];
+        shape[41].color = [1, 1, 1];
+        shape[48].color = [1, 1, 1];
+        shape[49].color = [1, 1, 1];
+        shape[50].color = [1, 1, 1];
+      }, 1000);
+
+      // render everything!
+      r.render();
+
+    };
+
+    </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/03/Naveen_CS460_Assignment_03_.pdf b/03/Naveen_CS460_Assignment_03_.pdf
diff --git a/03/index.html b/03/index.html
@@ -0,0 +1,167 @@
+<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 shapecount = 0;
+
+      // Generate random color
+
+      function randomizec() {
+        var rc =
+          "#" +
+          Math.floor(Math.random() * (256 * 256 * 256))
+            .toString(16)
+            .padStart(6, "0");
+        return rc;
+      }
+
+      // List of Shapes
+      const shapelist = [
+        "Box",
+        "TorusKnot",
+        "Octahedron",
+        "Sphere",
+        "Ring",
+        "Cone",
+      ];
+
+      // get a random geometry
+      function randomizeg() {
+        var shape = Math.floor(Math.random() * shapelist.length);
+        return shapelist[shape];
+      }
+
+
+      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);
+
+        // light
+        ambientLight = new THREE.AmbientLight(0x404040);
+        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.PlaneGeometry(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();
+
+        // Onmouse move action
+
+        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);
+          console.log("Ray to Invisible Plane", intersects[0].point);
+
+          // Object creation
+          function create_Object(geo) {
+            material = new THREE.MeshStandardMaterial({
+              color: randomizec(),
+            });
+            obj = new THREE.Mesh(geometry, material);
+            scene.add(obj);
+            p = intersects[0].point;
+            obj.position.set(p.x, p.y, p.z);
+            shapecount++;
+            console.log(`Number of shapes ${shapecount}`);
+          }
+
+          switch (randomizeg()) {
+            case "Box":
+              geometry = new THREE.BoxGeometry(10, 10, 10);
+              create_Object(geometry);
+              break;
+            case "TorusKnot":
+              geometry = new THREE.TorusKnotGeometry(10, 3, 64, 8);
+              create_Object(geometry);
+              break;
+            case "Octahedron":
+              geometry = new THREE.OctahedronGeometry(10);
+              create_Object(geometry);
+              break;
+            case "Sphere":
+              geometry = new THREE.SphereGeometry(10,20,20);
+              create_Object(geometry);
+              break;
+            case "Ring":
+              geometry = new THREE.RingGeometry(4, 10, 12);
+              create_Object(geometry);
+              break;
+            case "Cone":
+              geometry = new THREE.ConeGeometry(10, 20, 32);
+              create_Object(geometry);
+              break;
+            default:
+              console.log("hello");
+          }
+        };
+      };
+
+      function animate() {
+        requestAnimationFrame(animate);
+
+        controls.update();
+        renderer.render(scene, camera);
+      }
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/04/Naveen_CS460_Assignment_04_.pdf b/04/Naveen_CS460_Assignment_04_.pdf