cleanup

main.js

@@ -34,7 +34,7 @@ if (new URLSearchParams(window.location.search).get("clear"))
 }
 else
 {	
-	// this code is essential to circumvent that some browser preload the content of some pages before you actually hit the url
+	// this code is essential to circumvent that some browsers preload the content of some pages before you actually hit the url
 	document.addEventListener("visibilitychange", () => 
 	{
 		if (document.visibilityState != 'hidden' && !initialized)
@@ -52,9 +52,9 @@ else
 
 	function init ()
 	{
-		// add a short timeout because window.offsetX reports wrong values before a short period 
 		initialized = true;
-
+
+		// add a short timeout because window.offsetX reports wrong values before a short period 
 		setTimeout(() => {
 			setupScene();
 			setupWindowManager();
@@ -65,6 +65,28 @@ else
 		}, 500)	
 	}
 
+	function setupScene ()
+	{
+		camera = new t.OrthographicCamera(0, 0, window.innerWidth, window.innerHeight, -10000, 10000);
+
+		camera.position.z = 2.5;
+		near = camera.position.z - .5;
+		far = camera.position.z + 0.5;
+
+		scene = new t.Scene();
+		scene.background = new t.Color(0.0);
+		scene.add( camera );
+
+		renderer = new t.WebGLRenderer({antialias: true, depthBuffer: true});
+		renderer.setPixelRatio(pixR);
+
+	  	world = new t.Object3D();
+		scene.add(world);
+
+		renderer.domElement.setAttribute("id", "scene");
+		document.body.appendChild( renderer.domElement );
+	}
+
 	function setupWindowManager ()
 	{
 		windowManager = new WindowManager();
@@ -83,8 +105,6 @@ else
 
 	function windowsUpdated ()
 	{
-		let wins = windowManager.getWindows();
-
 		updateNumberOfCubes();
 	}
 
@@ -99,7 +119,7 @@ else
 
 		cubes = [];
 
-		// add new cubes
+		// add new cubes based on the current window setup
 		for (let i = 0; i < wins.length; i++)
 		{
 			let win = wins[i];
@@ -119,49 +139,32 @@ else
 
 	function updateWindowShape (easing = true)
 	{
+		// storing the actual offset in a proxy that we update against in the render function
 		sceneOffsetTarget = {x: -window.screenX, y: -window.screenY};
 		if (!easing) sceneOffset = sceneOffsetTarget;
 	}
 
-	function setupScene ()
-	{
-		camera = new t.OrthographicCamera(0, 0, window.innerWidth, window.innerHeight, -10000, 10000);
-
-		camera.position.z = 2.5;
-		near = camera.position.z - .5;
-		far = camera.position.z + 0.5;
-
-		scene = new t.Scene();
-		scene.background = new t.Color(0.0);
-		scene.add( camera );
-
-		renderer = new t.WebGLRenderer({antialias: true, depthBuffer: true});
-		renderer.setPixelRatio(pixR);
-
-	  	world = new t.Object3D();
-		scene.add(world);
-
-		renderer.domElement.setAttribute("id", "scene");
-		document.body.appendChild( renderer.domElement );
-	}
-
 
 	function render ()
 	{
 		let t = getTime();
 
 		windowManager.update();
 
+
+		// calculate the new position based on the delta between current offset and new offset times a falloff value (to create the nice smoothing effect)
 		let falloff = .05;
 		sceneOffset.x = sceneOffset.x + ((sceneOffsetTarget.x - sceneOffset.x) * falloff);
 		sceneOffset.y = sceneOffset.y + ((sceneOffsetTarget.y - sceneOffset.y) * falloff);
 
+		// set the world position to the offset
 		world.position.x = sceneOffset.x;
 		world.position.y = sceneOffset.y;
 
 		let wins = windowManager.getWindows();
 
 
+		// loop through all our cubes and update their positions based on current window positions
 		for (let i = 0; i < cubes.length; i++)
 		{
 			let cube = cubes[i];
@@ -181,6 +184,7 @@ else
 	}
 
 
+	// resize the renderer to fit the window size
 	function resize ()
 	{
 		let width = window.innerWidth;