second modify

maa17019 · Apr 29, 2021 · 0c3e9c4 · 0c3e9c4
1 parent 76b6990
commit 0c3e9c4
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 17 deletions.
diff --git a/final/.DS_Store b/final/.DS_Store
diff --git a/final/favicon/.DS_Store b/final/favicon/.DS_Store
diff --git a/final/favicon/apple-touch-icon.png b/final/favicon/apple-touch-icon.png
diff --git a/final/favicon/favicon-16x16.png b/final/favicon/favicon-16x16.png
diff --git a/final/favicon/favicon-32x32.png b/final/favicon/favicon-32x32.png
diff --git a/final/index.html b/final/index.html
@@ -5,6 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Final Project - 3D Particles Scene</title>
+
+    <!-- Place favicon.ico in the root directory -->
+    <link rel="icon" type="image/png" href="favicon/favicon-16x16.png"> <!--favicon displayed in Webpage-->
+    <link rel="apple-touch-icon" href="favicon/favicon-32x32.png"> <!--favicon displayed in Apple devices-->
 </head>
 <body>
 

diff --git a/final/js/main.js b/final/js/main.js
@@ -2,7 +2,7 @@
 	let background = document.querySelector("body");
 	background.style.backgroundColor = "black";
 
-	//resize screen width and height to fit the entire window
+	//resize canvas width and height to fit the entire window
 	let canvas_width = window.innerWidth;
 	let canvas_height = window.innerHeight;
 
@@ -16,8 +16,6 @@
 	let camera;
 	let scene;
 	let renderer;
-
-	//let descriptors = [];
 
 	let mouseX = 0;
 	let mouseY = 0;
@@ -30,32 +28,33 @@
 
 		canvas = document.createElement('div');
 		document.body.appendChild(canvas);		
-
+		//create three.js camera
 		camera = new THREE.Camera(0, 0, 300);
 		camera.focus = 50;
-
+		//create three.js scene
 		scene = new THREE.Scene();
-
+		//create three.js renderer
 		renderer = new THREE.CanvasRenderer();
 		renderer.setSize(canvas_width, canvas_height);
 
-		createParticles();
+		createParticles(); //call particles function inside here
 
 		canvas.appendChild(renderer.domElement);
 
 		// Event listener
-		document.addEventListener('mousemove', onDocumentMouseMove, false);
+		//animation will move upon pointing cursor over canvas element
+		document.addEventListener('mousemove', onDocumentMouseMove, false); 
 		/*document.addEventListener('touchstart', onDocumentTouchStart, false);
 		document.addEventListener('touchmove', onDocumentTouchMove, false);*/
 	}
 
 	createScene(); //call 3D scene function
 	setInterval(loop, 20); //set intevals between loops
 
-	function createParticles() {
+	function createParticles() { 
 		for (let i = 0; i < quantity; i++) {
 			let particle = new THREE.Particle(new THREE.ColorFillMaterial(Math.random() * 167777215 ));
-			particle.size = 10;
+			particle.size = 10; // how large each particle is
 
 			particle.position.x = 0;
 			particle.position.y = 0;
@@ -70,6 +69,7 @@
 		}
 	}
 
+	// event handler for mousemove
 	function onDocumentMouseMove(event) {
 
 		mouseX = event.clientX - windowHalfX;
@@ -99,10 +99,9 @@
 	}
 */
 
-
+	//Animation loop
 	function loop() {
 
-
 		//camera.updateMatrix();
 
 		renderer.render(scene, camera);
@@ -130,11 +129,6 @@
 		}
 	}
 
-	function distanceBetween(p1,p2) { //distance between point 1 and point 2
-		let dx = p2.x-p1.x;
-		let dy = p2.y-p1.y;
-		return Math.sqrt(dx*dx + dy*dy);
-	}