bostongfx · fhwarsam · Sep 13, 2022 · Sep 13, 2022 · Sep 16, 2022 · Sep 19, 2022
diff --git a/02/index.html b/02/index.html
@@ -0,0 +1,188 @@
+<! DOCTYPE html>
+
+<html lan="en">
+
+	<head>
+		<meta charset="UTF-8">
+		<title> CS460 Assigment </title>
+
+
+<style >
+body{
+	background-color: black;
+	color:white;
+	font-family: sans-serif;
+	overflow: hidden !important;
+}
+#logo{
+	margin-top:10px;
+	margin-right:10px;
+
+}
+</style>
+<script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
+<script type="text/javascript">
+
+	window.onload = function(){
+	var r = new X.renderer3D();
+	 	r.init();
+
+		 for(var i =0; i<1; i++){
+			 var c10 = new X.cube();
+			 c10.center=[22*i, -50, 0];
+			 c10.color=[0,1,0];
+	 		r.add(c10);	
+		}					 
+
+	for(var i =0; i<2; i++){
+	 		var c2 = new X.cube();
+			 c2.center = [22*i, -75, 0];
+			 c2.color=[0,1,0];
+			 r.add(c2);
+		}
+		for(var i =0; i<2; i++){
+	 					var c3 = new X.cube();
+						 c3.center=[-22*i, -75, 0];
+			 			c3.color=[0,1,0];
+						 r.add(c3);
+						 }
+
+
+		// Takes care of two of the three cubes
+				for(var i =0; i<3; i++){
+	 					var c3 = new X.cube();
+						 c3.center=[-22*i, -100, 0];
+			 			c3.color=[0,1,0];
+						 r.add(c3);
+						 }
+					 // Takes care of the 
+					 for(var i =0; i<2; i++){
+	 				 var c4 = new X.cube();
+			 		 c4.center=[-22*i+1, -100, 0];
+		     		 c4.color=[0, 1, 0];
+			 		r.add(c4);
+
+					 }
+
+
+
+
+
+					 for(var i =0; i<4; i++){			
+			 var c5 = new X.cube();
+			 c5.center=[-22*i, -125, 0];
+			 c5.color=[0,1,0];
+			 r.add(c5);
+			}
+
+			for(var i =0; i<3; i++){			
+			 var c5 = new X.cube();
+			 c5.center=[22*i, -125, 0];
+			 c5.color=[0,1,0];
+			 r.add(c5);
+			}
+
+
+
+					 for(var i =0; i<4; i++){			
+			 var c5 = new X.cube();
+			 c5.center=[-22*i, -150, 0];
+			 c5.color=[0,1,0];
+			 r.add(c5);
+			}
+
+			for(var i =0; i<3; i++){			
+			 var c5 = new X.cube();
+			 c5.center=[22*i, -150, 0];
+			 c5.color=[0,1,0];
+			 r.add(c5);
+			}
+
+
+
+
+			 for(var i =0; i<5; i++){			
+			 var c5 = new X.cube();
+			 c5.center=[-22*i, -175, 0];
+			 c5.color=[0,1,0];
+			 r.add(c5);
+			}
+			 for(var i =0; i<5; i++){
+				var c6 = new X.cube();
+				c6.center=[22*i, -175, 0];
+			 	c6.color=[0,1,0];
+			 	r.add(c6);
+			 }
+				for(var i =0; i<5; i++){
+					 var c7 = new X.cube();
+					c7.center=[-22*i, -200, 0];
+					 c7.color=[0,1,0];
+					 r.add(c7);
+
+			}
+			 for(var i =0; i<5; i++){
+
+			 var c8 = new X.cube();
+			 c8.center=[22*i, -200, 0];
+			 c8.color=[0,1,0];
+			 r.add(c8);
+			 }
+
+			 for(var i =0; i<2; i++){
+			 var c9 = new X.cube();
+			 c9.center=[22*i, -225, 0];
+			 c9.color=[0,1,0];
+	 		r.add(c9);	
+		}
+
+		for(var i =0; i<2; i++){
+			 var c10 = new X.cube();
+			 c10.center=[-22*i, -225, 0];
+			 c10.color=[0,1,0];
+	 		r.add(c10);	
+		}
+
+		for(var i =0; i<2; i++){
+			 var c10 = new X.cube();
+			 c10.center=[22*i, -250, 0];
+			 c10.color=[0,1,0];
+	 		r.add(c10);	
+		}
+
+		for(var i =0; i<2; i++){
+			 var c10 = new X.cube();
+			 c10.center=[-22*i, -250, 0];
+			 c10.color=[0,1,0];
+	 		r.add(c10);	
+		}
+
+		function animate(){
+			for(var i =0; i<1; i++){
+			 var c10 = new X.cube();
+			 c10.center=[22*i, -50, 0];
+			 c10.color=[1,0,0];
+	 		r.add(c10);	
+		}
+
+		}
+		setInterval(animate, 1000);
+
+		r.render();r.camera.position=[0,0, 1000];
+		r.render();
+	}
+
+</script>
+	</head>
+	<body>
+
+		<h1> CS460 Assignment </h1>
+		<div id="logo">	
+			<img src = "gfx/CS460.png" alt="No image">
+		</div>
+
+	</body>
+
+
+
+
+</html>
diff --git a/03/.vscode/launch.json b/03/.vscode/launch.json
@@ -0,0 +1,14 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "msedge",
+            "request": "launch",
+            "name": "Open Untitled-1.html",
+            "file": "c:\\Users\\fhwarsam\\Desktop\\Untitled-1.html"
+        }
+    ]
+}
diff --git a/03/CS460_Assignment_03__Copy_.pdf b/03/CS460_Assignment_03__Copy_.pdf
diff --git a/03/index.html b/03/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <style>
+       html, body{
+
+            background-color: #0000;
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            overflow: hidden !important;
+
+        };
+    </style>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Assignment_03 threejs</title>
+
+    <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(){
+
+
+    // create scene as the first  step
+    scene = new THREE.Scene();
+
+var fov =75;
+var ratio = window.innerWidth / window.innerHeight;
+var zNear = 1;
+var zFar = 10000;
+
+camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
+camera.position.set(0,0,100);
+
+// rendering Starts here 
+renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+geometry= new THREE.PlaneGeometry(10000, 10000);
+material = new THREE.MeshBasicMaterial({visible:false});
+invisible_plane = new THREE.Mesh(geometry, material);
+scene.add(invisible_plane);
+
+renderer.domElement.onclick = function(e){
+console.log("Yay We Clicked");
+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);
+raycaster = new THREE.Raycaster();
+
+raycaster.setFromCamera(vp_coords_near, camera);
+intersect = raycaster.intersectObject(invisible_plane);
+console.log('Ray to plane', intersect[0].point);
+
+for(i = 1; 1<=10; i++){
+p=intersect[0].point;
+
+geometry = new THREE.BoxGeometry(20, 20, 20);
+material = new THREE.MeshStandardMaterial({color:0xffff1111});
+cube = new THREE.Mesh(geometry, material);
+scene.add(cube);
+
+cube.position.set(p.x, p.y, p.z);
+
+
+//p2=intersect[1].point;
+geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
+material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
+torusKnot = new THREE.Mesh( geometry, material );
+scene.add( torusKnot );
+cube.position.set(p.x+4, p2.y*3, p2.z*1);
+
+sphere = new THREE.SphereGeometry( 15, 32, 16 );
+ material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
+sphere = new THREE.Mesh( geometry, material );
+scene.add( sphere );
+sphere.position.set(p.x+4, p2.y*3, p2.z*1);
+
+};
+};
+// adds canvas to the page ui=sing the append child method of document
+
+
+// Setting up the light using Ambient light 
+ambientLight = new THREE.AmbientLight(0x404040);
+// add the light to the scene
+scene.add(ambientLight);
+
+//Directional light with positions setup
+light = new THREE.DirectionalLight(0xffffff, 5.0);
+light.position.set(10, 100, 10);
+scene.add(light);
+
+// build shapes starting with geometry, cube in this case. BoxeBufferGeometry from THREEJS gives few shapes
+
+
+//setup interactions
+controls = new THREE.TrackballControls(camera, renderer.domElement);
+
+animate();
+
+};
+function animate(){
+    requestAnimationFrame(animate);
+    controls.update();
+    renderer.render(scene,camera);
+};
+
+    </script>
+</head>
+<body></body>
+</html>
diff --git a/04/CS460_Assignment_04__Copy_.pdf b/04/CS460_Assignment_04__Copy_.pdf