bostongfx · genlikan · Sep 8, 2019 · Sep 9, 2019 · Sep 9, 2019 · Sep 9, 2019
diff --git a/00/index.html b/00/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<body>
+<h1>Unit21 (in 1280 x 720)</h1>
+<p>By nogalo and unknown</p>
+<p>Controls: WASD to walk. Hold left mouse button to pan the camera. Left click to select.</p>
+<p>URL:<a href="https://www.productexample.com/unit21/index.html">https://www.productexample.com/unit21/index.html</a></p>
+<iframe id="unit21"
+	title="Unit 21"
+	width="1280"
+	height="720"
+src="https://www.productexample.com/unit21/index.html">
+</iframe>
+<h2> Hosted by genlikan on Github at <a href="https://github.com/genlikan/genlikan.github.io">genlikan.github.io</a></h2>
+</body>
+</html>
diff --git a/01/CS460_Assignment_01_genlikan.pdf b/01/CS460_Assignment_01_genlikan.pdf
diff --git a/02/CS460_Assignment_02_genlikan.pdf b/02/CS460_Assignment_02_genlikan.pdf
diff --git a/02/index.html b/02/index.html
@@ -0,0 +1,139 @@
+<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">
+
+    // this gets called when the site is ready
+    window.onload = function() {
+    	//makes and adds cube
+    	function makecube(){
+    		c = new X.cube();
+      		c.center = [ x * 3, y * 3, 0];
+      		c.lengthX = c.lengthY = c.lengthZ = 2;
+      		//fox cyan eyes
+      		if ((y == 3) && (x == 2)){
+      			eye1 = new X.cube();
+      			eye1.center = [ x * 3, y * 3, 0];
+      			eye1.lengthX = eye1.lengthY = eye1.lengthZ = 2.1;
+      			eye1.color = [ 0, 1, 1];
+      			r.add(eye1);
+      		}
+      		if ((y == 3) && (x == 3)){
+      			eye2 = new X.cube();
+      			eye2.center = [ x * 3, y * 3, 0];
+      			eye2.lengthX = eye2.lengthY = eye2.lengthZ = 2.1;
+      			eye2.color = [ 0, 1, 1];
+      			r.add(eye2);
+      		}
+      		if ((y == 3) && (x == 5)){
+      			eye3 = new X.cube();
+      			eye3.center = [ x * 3, y * 3, 0];
+      			eye3.lengthX = eye3.lengthY = eye3.lengthZ = 2.1;
+      			eye3.color = [ 0, 1, 1];
+      			r.add(eye3);
+      		}
+      		if ((y == 3) && (x == 6)){
+      			eye4 = new X.cube();
+      			eye4.center = [ x * 3, y * 3, 0];
+      			eye4.lengthX = eye4.lengthY = eye4.lengthZ = 2.1;
+      			eye4.color = [ 0, 1, 1];
+      			r.add(eye4);
+      		}
+      		//fox red nose
+      		else if ((y == 6) && (x == 4)){
+      			c.color = [ 1, 0, 0];
+      		}
+      		else {
+      			c.color = [ 1, 1, 1];
+      		}
+      		// add it!
+      		r.add(c);
+    	}
+      // create a new scene and renderer
+      r = new X.renderer3D();
+      r.init();
+
+      // create canvas, top down, 
+      //starts upper right to bottom left
+      for ( var y = 0; y < 9; y++) {
+      	for ( var x = 0; x < 9; x++) {
+
+      		if ( (y < 6) && (x == 1 || x == 7) ){
+      			makecube();
+      		}
+      		if ( (y >= 1 && y < 7) && (x == 2 || x == 6) ){
+      			makecube();
+      		}
+      		if ( (y >= 2 && y < 8) && (x == 3 || x == 5) ){
+      			makecube();
+      		}
+      		if ( (y >= 2 && y < 8) && (x == 4) ){
+      			makecube();
+      		}
+
+      	}
+
+      }
+
+    // render everything!
+    r.camera.position = [0, 0, -100];
+    r.render();
+
+    // rotates the camera
+    // r.onRender = function() {
+    // 	    r.camera.rotate([0,-1]);
+    // 	};
+
+    // Eye turns white
+    setInterval(function() {
+    	eye1.color = [ 1, 1, 1];
+    	eye2.color = [ 1, 1, 1];
+    	eye3.color = [ 1, 1, 1];
+    	eye4.color = [ 1, 1, 1];
+    }, 1000);
+
+    // Eye turns random colors
+    setInterval(function() {
+      // this portion was inspired by observing git user dotcasek
+      var red = Math.random(); 
+      var green = Math.random();
+      var blue = Math.random();
+
+    	eye1.color = [ red, green, blue];
+    	eye2.color = [ red, green, blue];
+    	eye3.color = [ red, green, blue];
+    	eye4.color = [ red, green, blue];
+    }, 2000);
+
+
+    };
+
+    </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/CS460_Assignment_03_genlikan.pdf b/03/CS460_Assignment_03_genlikan.pdf
diff --git a/03/index.html b/03/index.html
@@ -0,0 +1,202 @@
+<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://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></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;
+        // console.log(ratio);
+        camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
+        // placed camera futher from canvas
+        camera.position.set( 0, 0, 1000);
+
+        renderer = new THREE.WebGLRenderer();
+        renderer.setSize( window.innerWidth, window.innerHeight );
+        document.body.appendChild(renderer.domElement );
+
+        function makecube(){
+        // Add cube
+        geometry = new THREE.BoxBufferGeometry( 15, 15, 15);
+        var color = new THREE.Color( rannum(),rannum(),rannum());
+        material = new THREE.MeshStandardMaterial({color: color});
+        cube = new THREE.Mesh( geometry, material);
+        scene.add(cube);
+        cube.position.set(first_intersection.point.x, first_intersection.point.y, first_intersection.point.z);
+        counterCount();
+        }
+
+        function makeknot(){
+        // Add knot
+        geometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16);
+        var color = new THREE.Color( rannum(),rannum(),rannum());
+        material = new THREE.MeshStandardMaterial({color: color});
+        knot = new THREE.Mesh( geometry, material);
+        scene.add(knot);
+        knot.position.set(first_intersection.point.x, first_intersection.point.y, first_intersection.point.z);
+        counterCount();
+        }
+
+        function makesphere(){
+        // Add sphere
+        geometry = new THREE.SphereBufferGeometry( 5, 32, 32);
+        var color = new THREE.Color( rannum(),rannum(),rannum());
+        material = new THREE.MeshStandardMaterial({color: color});
+        sphere = new THREE.Mesh( geometry, material);
+        scene.add(sphere);
+        sphere.position.set(first_intersection.point.x, first_intersection.point.y, first_intersection.point.z);
+        counterCount();
+        }
+
+        function makeocta(){
+        // Add octahedron
+        geometry = new THREE.OctahedronBufferGeometry( 10);
+        var color = new THREE.Color( rannum(),rannum(),rannum());
+        material = new THREE.MeshStandardMaterial({color: color});
+        octahedron = new THREE.Mesh( geometry, material);
+        scene.add(octahedron);
+        octahedron.position.set(first_intersection.point.x, first_intersection.point.y, first_intersection.point.z);
+        counterCount();
+        }
+
+        function makecone(){
+        // Add cone
+        geometry = new THREE.ConeBufferGeometry( 10, 10);
+        var color = new THREE.Color( rannum(),rannum(),rannum());
+        material = new THREE.MeshStandardMaterial({color: color});
+        cone = new THREE.Mesh( geometry, material);
+        scene.add(cone);
+        cone.position.set(first_intersection.point.x, first_intersection.point.y, first_intersection.point.z);
+        counterCount();
+        }
+
+        function makering(){
+        // Add ring
+        geometry = new THREE.RingBufferGeometry( 1, 10, 32);
+        var color = new THREE.Color( rannum(),rannum(),rannum() );
+        material = new THREE.MeshStandardMaterial({color: color});
+        ring = new THREE.Mesh( geometry, material);
+        scene.add(ring);
+        ring.position.set(first_intersection.point.x, first_intersection.point.y, first_intersection.point.z);
+        counterCount();
+        }
+
+        //returns a random number, made into a function if tweaking is required
+        function rannum(){
+
+            return Math.random();
+        }
+
+        //Has an array of shapes, returns random shapes
+        function newshape(){
+
+            var shapes = [makecube, makeknot, makesphere, makeocta, makecone, makering];
+
+            return shapes[Math.floor(Math.random() * shapes.length)];
+        }
+
+
+        //Keeps track of amount of shapes
+        var shapeCounter = 0;
+        function counterCount() {
+
+            shapeCounter++;
+        }
+
+        //onclick is now onmousemove
+        renderer.domElement.onmousemove = function( e ){
+
+            if (!e.shiftKey) {
+                e.preventDefault();
+                return false;
+            }
+
+
+            //Can we click?
+            console.log('Yay! We clicked!');
+            pixel_coords = new THREE.Vector2( e.clientX, e.clientY );
+
+            //pixel coordinates
+            console.log('Pixel coords', pixel_coords);
+            vp_coords = new THREE.Vector2( 
+                        ( pixel_coords.x / window.innerWidth ) * 2 - 1,  //X
+                        -( pixel_coords.y / window.innerHeight ) * 2 + 1) // Y
+
+            //view port coordinates
+            console.log('Viewport coords', 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);
+
+            first_intersection = intersects[0];
+
+            //3D position coordinates
+            console.log('3D point' + first_intersection.point);
+
+
+            //Creates a New random Shape
+            newshape()();
+
+            //Keeps track of shape count.
+            console.log('There has been ' + shapeCounter + ' shapes.');
+
+
+
+
+          };
+
+        ambientLight = new THREE.AmbientLight();
+        scene.add( ambientLight );
+
+        light = new THREE.DirectionalLight( 0xffffff, 5.0);
+        light.position.set( 10, 100, 10 );
+        scene.add(light);
+
+        //Make invisible 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.OrbitControls( camera );
+
+        animate();
+
+      };
+
+      function animate() {
+
+        requestAnimationFrame( animate );
+
+        // console.log('check');
+
+        controls.update();
+
+        // and here...
+        renderer.render( scene, camera);
+
+      };
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/04/CS460_Assignment_04_genlikan.pdf b/04/CS460_Assignment_04_genlikan.pdf