bostongfx · Anirudh909 · Sep 13, 2022 · Sep 13, 2022 · Sep 13, 2022 · Sep 20, 2022
diff --git a/02/CS460_Assignment_02__Copy_.pdf b/02/CS460_Assignment_02__Copy_.pdf
diff --git a/02/index.html b/02/index.html
@@ -0,0 +1,173 @@
+<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="http://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();
+
+
+     for (var i=0; i<7 ; i++) 
+      {
+
+        for (var j=0; j<7 ; j++) 
+      {
+        var c = new X.cube();
+        c.color = [225,225,0];
+        c.center =[25*i,25*j,0,];
+        r.add(c);
+
+      }
+
+      }
+//left eye
+      for (var i=1; i<2 ; i++) 
+      {
+
+        for (var j=5; j<6 ; j++) 
+      {
+        var c = new X.cube();
+        c.color = [0,0,0];
+        c.center =[25*i,25*j,0,];
+        r.add(c);
+
+      }
+
+      }
+//right eye
+      for (var i=5; i<6 ; i++) 
+      {
+
+        for (var j=5; j<6 ; j++) 
+      {
+        var c = new X.cube();
+        c.color = [0,0,0];
+        c.center =[25*i,25*j,0,];
+        r.add(c);
+
+      }
+
+      }
+      //nose
+      for (var i=3; i<4 ; i++) 
+      {
+
+        for (var j=3; j<4 ; j++) 
+      {
+        var c = new X.cube();
+        c.color = [0,0,0];
+        c.center =[25*i,25*j,0,];
+        r.add(c);
+
+      }
+
+      }
+//mouth
+      for (var i=2; i<5 ; i++) 
+      {
+
+        for (var j=0; j<1 ; j++) 
+      {
+        var c = new X.cube();
+        c.color = [1,0,0];
+        c.center =[25*i,25*j,0,];
+        r.add(c);
+
+      }
+
+      }
+
+      for (var i=1; i<6 ; i++) 
+      {
+
+        for (var j=1; j<2 ; j++) 
+      {
+        var c = new X.cube();
+        c.color = [0,0,0];
+        c.center =[25*i,25*j,0,];
+        r.add(c);
+
+      }
+
+      }
+
+      /*for (var i=1; i<2 ; i++) 
+      {
+
+        for (var j=0; j<1 ; j++) 
+      {
+        var c = new X.cube();
+        c.color = [0,0,0];
+        c.center =[25*i,25*j,0,];
+        r.add(c);
+
+      }
+
+      }
+
+      for (var i=5; i<6 ; i++) 
+      {
+
+        for (var j=0; j<1 ; j++) 
+      {
+        var c = new X.cube();
+        c.color = [0,0,0];
+        c.center =[25*i,25*j,0,];
+        r.add(c);
+
+      }
+
+      }*/
+
+
+
+
+
+
+
+
+
+
+
+      // set camera further away!
+      r.camera.position = [0, 0, 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/05 b/05
@@ -0,0 +1 @@
+
diff --git a/06 b/06
@@ -0,0 +1 @@
+
diff --git a/08/CS460_Assignment_08__Copy_.pdf b/08/CS460_Assignment_08__Copy_.pdf
diff --git a/08/board.jpeg b/08/board.jpeg
diff --git a/08/helper.js b/08/helper.js
@@ -0,0 +1,83 @@
+HELPER = {};
+
+/**
+ * This method returns [geometry, material, bones] to create a skeleton mesh
+ * based on a cylinder.
+ *
+ * @param howmany: Number of bones.
+ * @param howwide: Radius of the cylinder.
+ * @param color: Color of the cylinder.
+ */
+HELPER.cylinderSkeletonMesh = function(howmany, howwide, color) {
+
+  var segmentheight = 10; // just a temporary value but it needs to match for geometry and bones
+  var height = segmentheight * howmany;
+
+  //
+  // inspired by https://threejs.org/docs/scenes/bones-browser.html
+  //
+
+  // step1: geometry
+  var geometry = new THREE.CylinderBufferGeometry(
+    howwide, // radiusTop
+    howwide, // radiusBottom
+    height, // height
+    8, // radiusSegments
+    howmany * 3, // heightSegments
+    true // openEnded
+  );
+
+  var position = geometry.attributes.position;
+
+  var vertex = new THREE.Vector3();
+
+  var skinIndices = [];
+  var skinWeights = [];
+
+  for ( var i = 0; i < position.count; i ++ ) {
+
+    vertex.fromBufferAttribute( position, i );
+
+    var y = ( vertex.y + height / 2 );
+
+    var skinIndex = Math.floor( y / segmentheight );
+    var skinWeight = ( y % segmentheight ) / segmentheight;
+
+    skinIndices.push( skinIndex, skinIndex + 1, 0, 0 );
+    skinWeights.push( 1 - skinWeight, skinWeight, 0, 0 );
+
+  }
+
+  geometry.setAttribute( 'skinIndex', new THREE.Uint16BufferAttribute( skinIndices, 4 ) );
+  geometry.setAttribute( 'skinWeight', new THREE.Float32BufferAttribute( skinWeights, 4 ) );
+
+  // step 2: setup material
+  var material = new THREE.MeshStandardMaterial( {
+    skinning: true, // IMPORTANT!
+    color: color,
+    side: THREE.DoubleSide,
+    flatShading: true
+  } );
+
+  // step 3: setup bones
+  var bones = [];
+
+  // we always need a dummy parent bone as the anchor point
+  var parentbone = new THREE.Bone();
+  // parentbone.position.y = -height / 2; // weeeeird
+  bones.push(parentbone);
+
+  for (var i=0; i< howmany; i++) {
+
+    var currentbone = new THREE.Bone();
+    currentbone.position.y = segmentheight;
+
+    parentbone.add(currentbone);
+    bones.push(currentbone); // add the bone
+    parentbone = currentbone;
+
+  }
+
+  return [geometry, material, bones];
+
+};