From 5bdb309821c723678c4d4045d2399fa9e217b93e Mon Sep 17 00:00:00 2001
From: Mahnoor Afteb <mahnoor.afteb@uconn.edu>
Date: Thu, 29 Apr 2021 23:06:19 -0400
Subject: [PATCH] modified and added comments

---
 final/index.html |  4 +--
 final/js/main.js | 94 +++++++++++++-----------------------------------
 2 files changed, 26 insertions(+), 72 deletions(-)

diff --git a/final/index.html b/final/index.html
index 92fed09..9ca484c 100644
--- a/final/index.html
+++ b/final/index.html
@@ -16,8 +16,6 @@
     <script src="js/three.js"></script>
      <!--Link to main JavaScript file-->
     <script src ="js/main.js"></script>
-
-    <canvas></canvas>
-
+   
 </body>
 </html>
\ No newline at end of file
diff --git a/final/js/main.js b/final/js/main.js
index 51146dc..fe685b0 100644
--- a/final/js/main.js
+++ b/final/js/main.js
@@ -9,123 +9,79 @@
 	/*Set main variables*/
 	let radius = 350; //radius of cyclinder and space between particles (300?)
 	let quantity = 200; //amount of particles
-
 	let canvas;
-
 	//declare variables for 3D scene
 	let camera;
 	let scene;
 	let renderer;
-
-	let mouseX = 0;
-	let mouseY = 0;
-
-	let windowHalfX = window.innerWidth / 2;
-	let windowHalfY = window.innerHeight / 2;
+	let mouseX = 0; //horizontal positon of mouse relative to canvas
+	let mouseY = 0; //vertical postiotn of mouse releative to canvas
+	let windowHalfX = window.innerWidth / 2; //horizontal mousemove across window
+	let windowHalfY = window.innerHeight / 2; //vertical mousemove across window
 
 	//creating 3D Scene with three.js
 	function createScene() {
+		//create canvas element and assign to "canvas" variable and its properties
+		canvas = document.createElement('canvas'); 
 
-		canvas = document.createElement('div');
-		document.body.appendChild(canvas);		
 		//create three.js camera
 		camera = new THREE.Camera(0, 0, 300);
-		camera.focus = 50;
+		camera.focus = 50; //how far or close the animation appears
+
 		//create three.js scene
 		scene = new THREE.Scene();
+
 		//create three.js renderer
 		renderer = new THREE.CanvasRenderer();
+		//ensure canvas width and height fit viewport size
 		renderer.setSize(canvas_width, canvas_height);
 		
-		createParticles(); //call particles function inside here
-		
-		canvas.appendChild(renderer.domElement);
+		createParticles(); //call particles function inside here 
+		document.body.appendChild(renderer.domElement); //renderer draws output to canvas
 
 		// Event listener
 		//animation will move upon pointing cursor over canvas element
-		document.addEventListener('mousemove', onDocumentMouseMove, false); 
-		/*document.addEventListener('touchstart', onDocumentTouchStart, false);
-		document.addEventListener('touchmove', onDocumentTouchMove, false);*/
+		document.addEventListener('mousemove', onMouseMove); 
 	}
 
 	createScene(); //call 3D scene function
-	setInterval(loop, 20); //set intevals between loops
+	setInterval(loop, 20); //loop function executed at intervals of 20 ms
+
+	// event handler for mousemove
+	function onMouseMove(event) {
+		mouseX = event.clientX - windowHalfX;
+		mouseY = event.clientY - windowHalfY;
+	}
 
 	function createParticles() { 
 		for (let i = 0; i < quantity; i++) {
-			let particle = new THREE.Particle(new THREE.ColorFillMaterial(Math.random() * 167777215 ));
+			//generate random color for each particle everytime page is refreshed
+			let particle = new THREE.Particle(new THREE.ColorFillMaterial(Math.random() * 167777215 )); 
 			particle.size = 10; // how large each particle is
-			
+			//postioning of particles
 			particle.position.x = 0;
 			particle.position.y = 0;
 			particle.position.z = 0;
-			
 			particle.offset = { x: 0, y: 0, z: 0 };
 			particle.shift = { x: 0, y: 0 };
-			particle.speed = 0.01+Math.random()*0.00; //0.04
+			particle.speed = 0.01+Math.random()*0.00; 
 			particle.targetSize = particle.size;
-			
 			scene.add(particle);
 		}
 	}
 
-	// event handler for mousemove
-	function onDocumentMouseMove(event) {
-
-		mouseX = event.clientX - windowHalfX;
-		mouseY = event.clientY - windowHalfY;
-	}
-
-/*	function onDocumentTouchStart(event) {
-
-		if(event.touches.length == 1) {
-
-			event.preventDefault();
-
-			mouseX = event.touches[0].pageX - windowHalfX;
-			mouseY = event.touches[0].pageY - windowHalfY;
-		}
-	}*/
-
-	/*function onDocumentTouchMove(event) {
-
-		if(event.touches.length == 1) {
-
-			event.preventDefault();
-
-			mouseX = event.touches[0].pageX - windowHalfX;
-			mouseY = event.touches[0].pageY - windowHalfY;
-		}
-	}
-*/
-
 	//Animation loop
 	function loop() {
-
-		//camera.updateMatrix();
-		
 		renderer.render(scene, camera);
-		
-		let context = renderer.domElement.getContext("2d")
-		
 		for (let i = 0, len = scene.objects.length; i < len; i++) {
 			let particle = scene.objects[i];
-			
-			particle.offset.x += particle.speed;
+			particle.offset.x += particle.speed; 
 			particle.offset.y += particle.speed;
-			
 			particle.shift.x += ( mouseX - particle.shift.x) * (particle.speed);
 			particle.shift.y += ( -mouseY - particle.shift.y) * (particle.speed);
-			
 			particle.position.x = particle.shift.x + Math.cos(i + particle.offset.x) * radius;
 			particle.position.y = particle.shift.y + Math.sin(i + particle.offset.y) * radius;
 			particle.position.z = i / quantity * radius;
-			
-			particle.size += ( particle.targetSize - particle.size ) * 0.01; //slightly blinking particles (0.05)
-			
-			if( Math.round( particle.size ) == Math.round( particle.targetSize ) ) {
-				particle.targetSize = 1 + Math.random() * 10; //set particle size
-			}
 		}
 	}