main.js

	/*set background color to black*/
	let background = document.querySelector("body");
	background.style.backgroundColor = "black";

	//resize canvas width and height to fit the entire window
	let canvas_width = window.innerWidth;
	let canvas_height = window.innerHeight;

	/*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; //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'); 

		//create three.js camera
		camera = new THREE.Camera(0, 0, 300);
		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 
		document.body.appendChild(renderer.domElement); //renderer draws output to canvas

		// Event listener
		//animation will move upon pointing cursor over canvas element
		document.addEventListener('mousemove', onMouseMove); 
	}

	createScene(); //call 3D scene function
	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++) {
			//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; 
			particle.targetSize = particle.size;
			scene.add(particle);
		}
	}

	//Animation loop
	function loop() {
		renderer.render(scene, camera);
		for (let i = 0, len = scene.objects.length; i < len; i++) {
			let particle = scene.objects[i];
			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;
		}
	}