From 24bcfbb7a2882c8cea1e17daf6faacb6882d29f9 Mon Sep 17 00:00:00 2001
From: Caleb Mcolin <Caleb.mcolin@gmail.com>
Date: Tue, 6 Dec 2022 16:12:06 -0800
Subject: [PATCH 1/7] Added unique shapes and animations for objects 1-3

---
 main.js         | 126 +++++++++++++++++++++++++++++++---------------
 src/movement.js |   6 ++-
 src/objects.js  | 129 +++++++++++++++++++++++++++++++++++++-----------
 3 files changed, 188 insertions(+), 73 deletions(-)

diff --git a/main.js b/main.js
index 5b43dd4..ab56456 100644
--- a/main.js
+++ b/main.js
@@ -2,7 +2,7 @@ import './style.css';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { createAmbientLight, createPointLight, createRectLight } from './src/lights';
-import { createSphere, createPlane, createBackground, createTorus } from './src/objects';
+import { createSphere, createPlane, createBackground, createTorus, createChildSphere, createPatentObject, createOctahedron } from './src/objects';
 import { movments } from './src/movement';
 
 // SCENE
@@ -39,65 +39,110 @@ function onWindowResize() {
   renderer.setPixelRatio(window.devicePixelRatio, 2);
 }
 
-// OBJECTS
+// SCENE OBJECTS
+// Foundation
+scene.background = createBackground();
 const plane = createPlane(1000, 1000, 100, 100, 0x292929, 0.5, 0.5, '/images/plane-hightmap.png', 110, -55, { x: 0, y: -5, z: 0 }, false);
 const planeGrid = createPlane(1000, 1000, 100, 100, 0x290CFF, 0, 0, '/images/plane-hightmap.png', 110, -55, { x: 0, y: -5, z: 0 }, true);
 const planeFlat = createPlane(1000, 1000, 1, 1, 0x000000, 0, 0, '', 0, 0, { x: 0, y: -59.5, z: 0 }, false);
 const planeFlatGrid = createPlane(1000, 1000, 100, 100, 0xFF019A, 0, 0, '', 0, 0, { x: -59.5, y: -59, z: 0 }, true);
-const sphere1 = createSphere("Sphere 1", 0.5, 0xFF10F0, .4, .5, './images/sphere-normal-map.jpg', { x: -20, y: -20, z: -20 });
-const sphere2 = createSphere("Sphere 2", 0.5, 0x39FF14, .4, .5, './images/sphere-normal-map.jpg', { x: -180, y: 40, z: -30 });
-const sphere3 = createSphere("Sphere 3", 0.5, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg', { x: -200, y: 10, z: 27 });
-const sphere4 = createSphere("Sphere 4", 0.5, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg', { x: 96, y: -30, z: 186 });
-const sphere5 = createSphere("Sphere 5", 0.5, 0x9D00FF, .4, .5, './images/sphere-normal-map.jpg', { x: 277, y: -38, z: -205 });
-const sphere6 = createSphere("Sphere 6", 0.5, 0xFFFF00, .4, .5, './images/sphere-normal-map.jpg', { x: -209, y: -43, z: -253 });
 const torus = createTorus("Torus", 35, 2, 20, 64, 0xfff000, 0.5, 0.5, { x: 108, y: 40, z: 38 });
-
-// LIGHTS
 const aLight1 = createAmbientLight(0xffffff, .6);
 // const rLight1 = createRectLight(0x9700CC, 1000, 1000, 1, { x: 0, y: -59.9, z: 0 }, { x: 0, y: -100, z: 0 }); // Not needed with PlaneFlat. Might replace
 const torusLight = createPointLight(0xfff000, 2.8, 85, 2.5, { x: 112, y: 51, z: 37 });
-// Lights for shapes
-const pLight1 = createPointLight(0xffffff, 3, 5, 1.5, { x: -22, y: -20, z: -20.2 });
-const pLight2 = createPointLight(0xffffff, 1.5, 2.5, 1, { x: -180, y: 41, z: -31 });
-const pLight3 = createPointLight(0xffffff, 2, 7, 1, { x: -201.5, y: 9, z: 26 });
-const pLight4 = createPointLight(0xffffff, 3, 5, 1, { x: 96.5, y: -31, z: 186.5 });
-const pLight5 = createPointLight(0xffffff, 1.5, 4, 1, { x: 278.5, y: -38.5, z: -206 });
-const pLight6 = createPointLight(0xffffff, 1, 3, 1.5, { x: -210, y: -42, z: -254 });
-
-// ADD TO SCENE
-scene.background = createBackground();
 scene.add(plane);
 scene.add(planeGrid);
 scene.add(planeFlat);
 scene.add(planeFlatGrid);
 scene.add(torus);
+scene.add(aLight1);
+// scene.add(rLight1); // Not needed with PlaneFlat. Might replace
+scene.add(torusLight);
 
-scene.add(sphere1);
-scene.add(sphere2);
-scene.add(sphere3);
-scene.add(sphere4);
-scene.add(sphere5);
-scene.add(sphere6);
-
+// Slide 1 object(s)
+const pLight1 = createPointLight(0xffffff, 3, 6, 1, { x: -23.5, y: -20, z: -20 });
+const slide1Sphere = createSphere("Sphere 1", 0.5, 0xFF10F0, .4, .5, './images/sphere-normal-map.jpg', { x: -20, y: -20, z: -20 });
+const slide1Child1 = createChildSphere("Sphere Child 1", 0.1, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg');
+const slide1Child1Parent = createPatentObject(slide1Sphere.position);
+const slide1Child2 = createChildSphere("Sphere Child 2", 0.2, 0x39FF14, .4, .5, './images/sphere-normal-map.jpg');
+const slide1Child2Parent = createPatentObject(slide1Sphere.position);
+const slide1Child3 = createChildSphere("Sphere Child 3", 0.2, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg');
+const slide1Child3Parent = createPatentObject(slide1Sphere.position);
 scene.add(pLight1);
+scene.add(slide1Sphere);
+scene.add(slide1Child1Parent);
+scene.add(slide1Child2Parent);
+scene.add(slide1Child3Parent);
+slide1Child1Parent.add(slide1Child1);
+slide1Child2Parent.add(slide1Child2);
+slide1Child3Parent.add(slide1Child3);
+slide1Child1.position.x = 1;
+slide1Child2.position.z = -1.5; // off center according to Z rather than X
+slide1Child3.position.x = -2;
+
+// Slide 2 object(s)
+const pLight2 = createPointLight(0xffffff, 1.5, 5, 1, { x: -182, y: 42, z: -32 });
+const slide2Octahedron = createOctahedron("Octahedron 1", 1, 0, 0x39FF14, .4, .5, './images/sphere-normal-map.jpg', { x: -180, y: 40, z: -30 });
+var dxPerFrame = 0.01; // how to move in a single frame
 scene.add(pLight2);
+scene.add(slide2Octahedron);
+
+// Slide 3 object(s)
+const pLight3 = createPointLight(0xffffff, 2, 8, 1.5, { x: -204, y: 10.7, z: 27 });
+const slide3Octahedron = createOctahedron("Octahedron 2", 1, 0, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg', { x: -200, y: 10, z: 27 });
 scene.add(pLight3);
+scene.add(slide3Octahedron);
+
+// Slide 4 object(s)
+const pLight4 = createPointLight(0xffffff, 3, 5, 1, { x: 96.5, y: -31, z: 186.5 });
+const sphere4 = createSphere("Sphere 4", 0.5, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg', { x: 96, y: -30, z: 186 });
 scene.add(pLight4);
+scene.add(sphere4);
+
+// Slide 5 object(s)
+const pLight5 = createPointLight(0xffffff, 1.5, 4, 1, { x: 278.5, y: -38.5, z: -206 });
+const sphere5 = createSphere("Sphere 5", 0.5, 0x9D00FF, .4, .5, './images/sphere-normal-map.jpg', { x: 277, y: -38, z: -205 });
 scene.add(pLight5);
-scene.add(pLight6);
+scene.add(sphere5);
 
-scene.add(aLight1);
-// scene.add(rLight1); // Not needed with PlaneFlat. Might replace
-scene.add(torusLight);
+// Slide 6 object(s)
+const pLight6 = createPointLight(0xffffff, 1, 3, 1.5, { x: -210, y: -42, z: -254 });
+const sphere6 = createSphere("Sphere 6", 0.5, 0xFFFF00, .4, .5, './images/sphere-normal-map.jpg', { x: -209, y: -43, z: -253 });
+scene.add(pLight6);
+scene.add(sphere6);
 
 // MOVEMENTS
 const controls = new OrbitControls(camera, renderer.domElement);
 controls.enableDamping = true;
-movments(camera, controls, sphere1, sphere2, sphere3, sphere4, sphere5, sphere6);
-
+movments(camera, controls, slide1Sphere, slide2Octahedron, slide3Octahedron, sphere4, sphere5, sphere6);
 
 // ANIMATE LOOP
 function animate() {
+  // Slide 1 Animation
+  slide1Sphere.rotateY(0.004);
+  slide1Child1.rotateY(-0.1);
+  slide1Child2.rotateY(-0.01);
+  slide1Child3.rotateZ(0.01);
+  slide1Child1Parent.rotateY(-0.01);
+  slide1Child1Parent.rotateZ(0.01);
+  slide1Child2Parent.rotateY(0.007);
+  slide1Child2Parent.rotateZ(0.007);
+  slide1Child3Parent.rotateY(-0.003);
+
+  // Slide 2 Animation
+  slide2Octahedron.rotation.y = Math.sin(Date.now() * 0.001) * Math.PI * 0.5;
+
+  // Slide 3 Animation
+  slide3Octahedron.rotateZ(-0.01);
+  slide3Octahedron.position.y += dxPerFrame;
+  if (slide3Octahedron.position.y >= 11) dxPerFrame = -0.01; // if too far up, move down
+  if (slide3Octahedron.position.y <= 9) dxPerFrame = 0.01; // if too far down, move up
+
+  // Slide 4 Animation
+
+  // Slide 5 Animation
+
+  // Slide 6 Animation
   renderer.render(scene, camera);
   controls.update();
   requestAnimationFrame(animate);
@@ -158,16 +203,15 @@ function lightDebugHelper(light1, light2, light3) {
     console.log("y " + camera.position.y);
     console.log("z " + camera.position.z);
   };
-};
 
-// Testing location finder
-window.addEventListener("click", clicking, false);
-function clicking() {
-  console.log("x " + camera.position.x);
-  console.log("y " + camera.position.y);
-  console.log("z " + camera.position.z);
+  // Testing location finder
+  window.addEventListener("click", clicking, false);
+  function clicking() {
+    console.log("x " + camera.position.x);
+    console.log("y " + camera.position.y);
+    console.log("z " + camera.position.z);
+  };
 };
-
 // lightDebugHelper(pLight3, pLight5, pLight6); // Comment/Uncomment to toggle debug mode
 // DEBUG ** DEVELOPMENT USE ONLY ** DEBUG //
 
diff --git a/src/movement.js b/src/movement.js
index c779c52..0cb24cc 100644
--- a/src/movement.js
+++ b/src/movement.js
@@ -30,7 +30,8 @@ export function movments(camera, controls, sphere1, sphere2, sphere3, sphere4, s
   };
 
   function moveToSlide3() {
-    move(sphere3, { x: -30, y: 0, z: -90 }, 6, "slide-3");
+    // The `targetPos` need to be custom and static here here because the target is moving will mess up the camera location
+    move({position: { x: -200, y: 10, z: 27 }}, { x: -30, y: 0, z: -90 }, 6, "slide-3");
     slideIndex = 3;
     document.getElementById("btn-3").style.backgroundColor = "purple";
   };
@@ -148,7 +149,8 @@ export function movments(camera, controls, sphere1, sphere2, sphere3, sphere4, s
       duration: 4
     })
       .eventCallback("onComplete", function () {
-        // Temp fix to having slides overlap when changing too quickly.
+        // Temp fix to having slides overlap when changing too quickly. 
+        // TODO: Ensure slides ONLY show when camera stops moving.
         hideSlidesDisplay();
         // Show only the current slide when movement stops.
         document.getElementById(currentSlide).style.display = 'block';
diff --git a/src/objects.js b/src/objects.js
index b47cf88..ec5e1e7 100644
--- a/src/objects.js
+++ b/src/objects.js
@@ -2,7 +2,7 @@ import * as THREE from 'three';
 
 const textureLoader = new THREE.TextureLoader();
 
-/** Creates a Sphere Object3D with the given properties .
+/** Creates a Sphere Object3D with the given properties.
  * 
  * @param {String} name `String`: The name of the sphere
  * @param {float} rad `float`: The radius of the sphere.
@@ -30,43 +30,73 @@ export function createSphere(name, rad, col, met, rou, normal, pos) {
     return sphere;
 };
 
-/** Creates a Plane Object3D with the given properties.
+/** Creates a Child Sphere Object3D with the given properties. 
+ * This Shpere is not given a position becasue it is added to a parent Object3D and not directly to the scene.
  * 
- * @param {number} width `number`: Width of the sides on the X axis.
- * @param {number} height `number`: Height of the sides on the Y axis
- * @param {number} widthSegments `number`: Number of width segments
- * @param {number} heightSegments `number`: Number of height segments
+ * @param {String} name `String`: The name of the sphere
+ * @param {float} rad `float`: The radius of the sphere.
  * @param {color} col `color`: 0x000000
  * @param {float} met `float`: The metalness of the sphere. - '0 > 1'
  * @param {float} rou `float`: The roughness of the sphere. - '0 > 1'
- * @param {String} dis_map `number`: `string`: The directory path to the displacement map.
- * @param {number} dis_scale `number`: Changes the scale of the displacement
- * @param {number} dis_bias `number`: Changes the bias of the displacement
- * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the plane.
- * @param {boolean} isWireframe `boolean`: Determines if the plane is a wireframe or not.
- * @returns the created `Plane`
+ * @param {String} norm `string`: The directory path to the normal map.
+ * @returns the created `Sphere`
  */
-export function createPlane(width, height, widthSegments, heightSegments, col, met, rou, dis_map, dis_scale, dis_bias, pos, isWireframe) {
-    const plane_geo = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
-    let plane_height;
-    if (dis_map === '') {
-        plane_height = undefined;
-    } else {
-        plane_height = textureLoader.load('' + dis_map);
-    }
-    const plane_mat = new THREE.MeshStandardMaterial({
+export function createChildSphere(name, rad, col, met, rou, normal) {
+    const sphere_geo = new THREE.SphereGeometry(rad, 64, 64);
+    const sphere_normal = textureLoader.load('' + normal);
+    const sphere_mat = new THREE.MeshStandardMaterial({
+        name: name,
         color: col,
         metalness: met,
         roughness: rou,
-        displacementMap: plane_height,
-        displacementScale: dis_scale,
-        displacementBias: dis_bias,
-        wireframe: isWireframe
+        normalMap: sphere_normal
     });
-    const plane = new THREE.Mesh(plane_geo, plane_mat);
-    plane.rotation.x = (Math.PI / -2);
-    plane.position.y = pos.y;
-    return plane;
+    const sphere = new THREE.Mesh(sphere_geo, sphere_mat);
+    // sphere.castShadow = true;
+    // sphere.receiveShadow = true;
+    return sphere;
+};
+
+/**
+ *  Creates a parent Object3D at the given location.
+ * 
+ * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the parent object's position.
+
+ * @returns 
+ */
+export function createPatentObject(pos) {
+    const parent = new THREE.Object3D();
+    parent.position.set(pos.x, pos.y, pos.z);
+    return parent
+};
+
+/** Creates a Octahedron Object3D with the given properties.
+ * 
+ * @param {String} name `String`: The name of the octahedron
+ * @param {float} rad `float`: The radius of the octahedron.
+ * @param {integer} det `integer`: The level of detail of the octahedron.
+ * @param {color} col `color`: 0x000000
+ * @param {float} met `float`: The metalness of the octahedron. - '0 > 1'
+ * @param {float} rou `float`: The roughness of the octahedron. - '0 > 1'
+ * @param {String} norm `string`: The directory path to the normal map.
+ * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the octahedron.
+ * @returns the created `Octahedron`
+ */
+ export function createOctahedron(name, rad, det, col, met, rou, normal, pos) {
+    const octahedron_geo = new THREE.OctahedronGeometry(rad, det);
+    const octahedron_normal = textureLoader.load('' + normal);
+    const octahedron_mat = new THREE.MeshStandardMaterial({
+        name: name,
+        color: col,
+        metalness: met,
+        roughness: rou,
+        normalMap: octahedron_normal
+    });
+    const octahedron = new THREE.Mesh(octahedron_geo, octahedron_mat);
+    // octahedron.castShadow = true;
+    // octahedron.receiveShadow = true;
+    octahedron.position.set(pos.x, pos.y, pos.z);
+    return octahedron;
 };
 
 /** Creates a Torus Object3D with the given properties.
@@ -98,7 +128,46 @@ export function createTorus(name, rad, thick, radSeg, thickSeg, col, met, rou, p
     torus.position.set(pos.x, pos.y, pos.z);
     torus.rotation.x = (Math.PI / -2);
     return torus;
-}
+};
+
+/** Creates a Plane Object3D with the given properties.
+ * 
+ * @param {number} width `number`: Width of the sides on the X axis.
+ * @param {number} height `number`: Height of the sides on the Y axis
+ * @param {number} widthSegments `number`: Number of width segments
+ * @param {number} heightSegments `number`: Number of height segments
+ * @param {color} col `color`: 0x000000
+ * @param {float} met `float`: The metalness of the sphere. - '0 > 1'
+ * @param {float} rou `float`: The roughness of the sphere. - '0 > 1'
+ * @param {String} dis_map `number`: `string`: The directory path to the displacement map.
+ * @param {number} dis_scale `number`: Changes the scale of the displacement
+ * @param {number} dis_bias `number`: Changes the bias of the displacement
+ * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the plane.
+ * @param {boolean} isWireframe `boolean`: Determines if the plane is a wireframe or not.
+ * @returns the created `Plane`
+ */
+export function createPlane(width, height, widthSegments, heightSegments, col, met, rou, dis_map, dis_scale, dis_bias, pos, isWireframe) {
+    const plane_geo = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
+    let plane_height;
+    if (dis_map === '') {
+        plane_height = false;
+    } else {
+        plane_height = textureLoader.load('' + dis_map);
+    }
+    const plane_mat = new THREE.MeshStandardMaterial({
+        color: col,
+        metalness: met,
+        roughness: rou,
+        displacementMap: plane_height,
+        displacementScale: dis_scale,
+        displacementBias: dis_bias,
+        wireframe: isWireframe
+    });
+    const plane = new THREE.Mesh(plane_geo, plane_mat);
+    plane.rotation.x = (Math.PI / -2);
+    plane.position.y = pos.y;
+    return plane;
+};
 
 /** Loads and creates a background for the scene
  * 

From 1a46038c61bccd66ef9aaa8f4037e4f0e3367c4a Mon Sep 17 00:00:00 2001
From: Caleb Mcolin <Caleb.mcolin@gmail.com>
Date: Thu, 8 Dec 2022 18:10:48 -0800
Subject: [PATCH 2/7] added new shape to slide 4

---
 main.js         | 39 ++++++++++++++++++++++++---------------
 src/movement.js |  4 ++--
 src/objects.js  | 44 ++++++++++++++++++++++++++++++++++++--------
 style.css       |  1 +
 4 files changed, 63 insertions(+), 25 deletions(-)

diff --git a/main.js b/main.js
index ab56456..6d25631 100644
--- a/main.js
+++ b/main.js
@@ -2,7 +2,7 @@ import './style.css';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { createAmbientLight, createPointLight, createRectLight } from './src/lights';
-import { createSphere, createPlane, createBackground, createTorus, createChildSphere, createPatentObject, createOctahedron } from './src/objects';
+import { createSphere, createPlane, createBackground, createTorus, createChildSphere, createPatentObject, createOctahedron, createTorusKnot } from './src/objects';
 import { movments } from './src/movement';
 
 // SCENE
@@ -23,7 +23,7 @@ renderer.setPixelRatio(window.devicePixelRatio, 2);
 
 // CAMERA
 export const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height, 0.1, 1000);
-camera.position.set(-23.5, -23.5, -23.5); // Sphere1 Location
+camera.position.set(92.6, -32.267, 190.4); // Sphere1 Location
 
 // RESIZING
 window.addEventListener('resize', onWindowResize, false);
@@ -82,22 +82,23 @@ slide1Child3.position.x = -2;
 
 // Slide 2 object(s)
 const pLight2 = createPointLight(0xffffff, 1.5, 5, 1, { x: -182, y: 42, z: -32 });
-const slide2Octahedron = createOctahedron("Octahedron 1", 1, 0, 0x39FF14, .4, .5, './images/sphere-normal-map.jpg', { x: -180, y: 40, z: -30 });
-var dxPerFrame = 0.01; // how to move in a single frame
+const slide2Octahedron = createOctahedron("Octahedron 1", 1.3, 0, 0x39FF14, .4, .5, './images/sphere-normal-map.jpg', { x: -180, y: 40, z: -30 });
+let dxPerFrame = 0.01; // how to move in a single frame
 scene.add(pLight2);
 scene.add(slide2Octahedron);
 
 // Slide 3 object(s)
 const pLight3 = createPointLight(0xffffff, 2, 8, 1.5, { x: -204, y: 10.7, z: 27 });
-const slide3Octahedron = createOctahedron("Octahedron 2", 1, 0, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg', { x: -200, y: 10, z: 27 });
+const slide3Octahedron = createOctahedron("Octahedron 2", 1.5, 0, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg', { x: -200, y: 10, z: 27 });
 scene.add(pLight3);
 scene.add(slide3Octahedron);
 
 // Slide 4 object(s)
-const pLight4 = createPointLight(0xffffff, 3, 5, 1, { x: 96.5, y: -31, z: 186.5 });
-const sphere4 = createSphere("Sphere 4", 0.5, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg', { x: 96, y: -30, z: 186 });
+const pLight4 = createPointLight(0xffffff, 2, 4.5, 1, { x: 93, y: -30, z: 187 });
+const torusKnot = createTorusKnot("TorusKnot", 1, .2, 60, 12, 5, 4, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg', { x: 96, y: -30, z: 186 });
+let scalePerFrame = 0.003; // scale the capsule up and down
 scene.add(pLight4);
-scene.add(sphere4);
+scene.add(torusKnot);
 
 // Slide 5 object(s)
 const pLight5 = createPointLight(0xffffff, 1.5, 4, 1, { x: 278.5, y: -38.5, z: -206 });
@@ -114,7 +115,7 @@ scene.add(sphere6);
 // MOVEMENTS
 const controls = new OrbitControls(camera, renderer.domElement);
 controls.enableDamping = true;
-movments(camera, controls, slide1Sphere, slide2Octahedron, slide3Octahedron, sphere4, sphere5, sphere6);
+movments(camera, controls, slide1Sphere, slide2Octahedron, slide3Octahedron, torusKnot, sphere5, sphere6);
 
 // ANIMATE LOOP
 function animate() {
@@ -139,10 +140,18 @@ function animate() {
   if (slide3Octahedron.position.y <= 9) dxPerFrame = 0.01; // if too far down, move up
 
   // Slide 4 Animation
+  torusKnot.rotateZ(-0.01);
+  torusKnot.scale.y += scalePerFrame;
+  torusKnot.scale.x += scalePerFrame;
+  torusKnot.scale.z += scalePerFrame;
+  if (torusKnot.scale.y >= 1.3) scalePerFrame = -0.003; // if too big, scale down
+  if (torusKnot.scale.y <= 0.9) scalePerFrame = 0.003; // if too small, scale up
 
   // Slide 5 Animation
 
   // Slide 6 Animation
+
+  // Main animation loop
   renderer.render(scene, camera);
   controls.update();
   requestAnimationFrame(animate);
@@ -162,14 +171,14 @@ function lightDebugHelper(light1, light2, light3) {
   scene.add(lightHelper3);
 
   // GUI interface
-  const lightFolder1 = gui.addFolder('Light 3');
+  const lightFolder1 = gui.addFolder('Light 4');
   const light1Color = { color: 0xffffff };
   lightFolder1.add(light1, 'intensity').min(0).max(10).step(0.01);
-  lightFolder1.add(light1, 'distance').min(0).max(1000).step(0.5);
+  lightFolder1.add(light1, 'distance').min(0).max(7).step(0.5);
   lightFolder1.add(light1, 'decay').min(1).max(10).step(0.5);
-  lightFolder1.add(light1.position, 'x').min(-1000).max(1000).step(0.1);
-  lightFolder1.add(light1.position, 'y').min(-1000).max(1000).step(0.1);
-  lightFolder1.add(light1.position, 'z').min(-1000).max(1000).step(0.1);
+  lightFolder1.add(light1.position, 'x').min(90).max(110).step(0.1);
+  lightFolder1.add(light1.position, 'y').min(-34).max(-27).step(0.1);
+  lightFolder1.add(light1.position, 'z').min(180).max(193).step(0.1);
   lightFolder1.addColor(light1Color, 'color').onChange(() => {
     light1.color.set(light1Color.color)
   });
@@ -212,7 +221,7 @@ function lightDebugHelper(light1, light2, light3) {
     console.log("z " + camera.position.z);
   };
 };
-// lightDebugHelper(pLight3, pLight5, pLight6); // Comment/Uncomment to toggle debug mode
+lightDebugHelper(pLight4, pLight5, pLight6); // Comment/Uncomment to toggle debug mode
 // DEBUG ** DEVELOPMENT USE ONLY ** DEBUG //
 
 animate();
diff --git a/src/movement.js b/src/movement.js
index 0cb24cc..bdce762 100644
--- a/src/movement.js
+++ b/src/movement.js
@@ -153,7 +153,7 @@ export function movments(camera, controls, sphere1, sphere2, sphere3, sphere4, s
         // TODO: Ensure slides ONLY show when camera stops moving.
         hideSlidesDisplay();
         // Show only the current slide when movement stops.
-        document.getElementById(currentSlide).style.display = 'block';
+        // document.getElementById(currentSlide).style.display = 'block'; // TEMP
       });
   };
 
@@ -173,5 +173,5 @@ export function movments(camera, controls, sphere1, sphere2, sphere3, sphere4, s
     };
   };
 
-  moveToSlide1();
+  moveToSlide4();
 };
\ No newline at end of file
diff --git a/src/objects.js b/src/objects.js
index ec5e1e7..8cfab32 100644
--- a/src/objects.js
+++ b/src/objects.js
@@ -57,8 +57,7 @@ export function createChildSphere(name, rad, col, met, rou, normal) {
     return sphere;
 };
 
-/**
- *  Creates a parent Object3D at the given location.
+/** Creates a parent Object3D at the given location.
  * 
  * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the parent object's position.
 
@@ -74,7 +73,7 @@ export function createPatentObject(pos) {
  * 
  * @param {String} name `String`: The name of the octahedron
  * @param {float} rad `float`: The radius of the octahedron.
- * @param {integer} det `integer`: The level of detail of the octahedron.
+ * @param {number} det `integer`: The level of detail of the octahedron.
  * @param {color} col `color`: 0x000000
  * @param {float} met `float`: The metalness of the octahedron. - '0 > 1'
  * @param {float} rou `float`: The roughness of the octahedron. - '0 > 1'
@@ -114,22 +113,51 @@ export function createPatentObject(pos) {
  */
 export function createTorus(name, rad, thick, radSeg, thickSeg, col, met, rou, pos) {
     const torus_geo = new THREE.TorusGeometry(rad, thick, radSeg, thickSeg);
-    // const sphere_normal = textureLoader.load('' + normal);
     const torus_mat = new THREE.MeshBasicMaterial({
         name: name,
         color: col,
-        // metalness: met,
-        // roughness: rou,
-        // normalMap: sphere_normal
     });
     const torus = new THREE.Mesh(torus_geo, torus_mat);
     // torus.castShadow = true;
     // torus.receiveShadow = true;
     torus.position.set(pos.x, pos.y, pos.z);
-    torus.rotation.x = (Math.PI / -2);
+    torus.rotation.x = (Math.PI / -2); // Allows the torus to lay down horizontally 
     return torus;
 };
 
+/** Creates a TorusKnot Object3D with the given properties.
+ * 
+ * @param {String} name `String`: The name of the TrousKnot
+ * @param {float} rad `float`: The radius of the TrousKnot.
+ * @param {number} thick thickness of the TrousKnot
+ * @param {float} radSeg number of radius segments 
+ * @param {float} thickSeg number of thickness segments
+ * @param {number} p determines how many times the geometry winds around its axis of rotational symmetry. (Default is 2)
+ * @param {number} q determines how many times the geometry winds around a circle in the interior of the torus. (Default is 3)
+ * @param {color} col `color`: 0x000000
+ * @param {float} met `float`: The metalness of the Torus. - '0 > 1'
+ * @param {float} rou `float`: The roughness of the Torus. - '0 > 1'
+ * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the TrousKnot.
+ * @returns the created `TrousKnot`
+ */
+export function createTorusKnot(name, rad, thick, thickSeg, radSeg, p, q, col, met, rou, normal, pos){
+    const torusKnot_geo = new THREE.TorusKnotGeometry(rad, thick, thickSeg, radSeg, p, q);
+    const torusKnot_normal = textureLoader.load('' + normal);
+    const torusKnot_mat = new THREE.MeshStandardMaterial({
+        name: name,
+        color: col,
+        metalness: met,
+        roughness: rou,
+        normalMap: torusKnot_normal
+    });
+    const torusKnot = new THREE.Mesh(torusKnot_geo, torusKnot_mat);
+    // torus.castShadow = true;
+    // torus.receiveShadow = true;
+    torusKnot.position.set(pos.x, pos.y, pos.z);
+    torusKnot.rotation.y = -1;
+    return torusKnot;
+};
+
 /** Creates a Plane Object3D with the given properties.
  * 
  * @param {number} width `number`: Width of the sides on the X axis.
diff --git a/style.css b/style.css
index 5d4d0dc..aa38e9c 100644
--- a/style.css
+++ b/style.css
@@ -47,6 +47,7 @@ canvas {
 
 .slides {
   position: absolute;
+  display: none;
   width: 75%;
   height: 85%;
   top: 5%;

From 7a9f9695c506da5be8137102075399dbe8c6734d Mon Sep 17 00:00:00 2001
From: Caleb Mcolin <Caleb.mcolin@gmail.com>
Date: Thu, 8 Dec 2022 18:20:34 -0800
Subject: [PATCH 3/7] added details to shape at slide 2

---
 main.js        | 7 +++++--
 src/objects.js | 5 +++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/main.js b/main.js
index 6d25631..f06bf2e 100644
--- a/main.js
+++ b/main.js
@@ -82,14 +82,16 @@ slide1Child3.position.x = -2;
 
 // Slide 2 object(s)
 const pLight2 = createPointLight(0xffffff, 1.5, 5, 1, { x: -182, y: 42, z: -32 });
-const slide2Octahedron = createOctahedron("Octahedron 1", 1.3, 0, 0x39FF14, .4, .5, './images/sphere-normal-map.jpg', { x: -180, y: 40, z: -30 });
+const slide2Octahedron = createOctahedron("Octahedron 1", 1.3, 0, 0x000000, 0, 0, '', { x: -180, y: 40, z: -30 }, false);
+const slide2OctahedronWire = createOctahedron("Octahedron 1 Wire", 1.3, 0, 0xFF019A, 0, 0, '', { x: -180, y: 40, z: -30 }, true);
 let dxPerFrame = 0.01; // how to move in a single frame
 scene.add(pLight2);
 scene.add(slide2Octahedron);
+scene.add(slide2OctahedronWire);
 
 // Slide 3 object(s)
 const pLight3 = createPointLight(0xffffff, 2, 8, 1.5, { x: -204, y: 10.7, z: 27 });
-const slide3Octahedron = createOctahedron("Octahedron 2", 1.5, 0, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg', { x: -200, y: 10, z: 27 });
+const slide3Octahedron = createOctahedron("Octahedron 2", 1.5, 0, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg', { x: -200, y: 10, z: 27 }, false);
 scene.add(pLight3);
 scene.add(slide3Octahedron);
 
@@ -132,6 +134,7 @@ function animate() {
 
   // Slide 2 Animation
   slide2Octahedron.rotation.y = Math.sin(Date.now() * 0.001) * Math.PI * 0.5;
+  slide2OctahedronWire.rotation.y = Math.sin(Date.now() * 0.001) * Math.PI * 0.5;
 
   // Slide 3 Animation
   slide3Octahedron.rotateZ(-0.01);
diff --git a/src/objects.js b/src/objects.js
index 8cfab32..c298abd 100644
--- a/src/objects.js
+++ b/src/objects.js
@@ -81,7 +81,7 @@ export function createPatentObject(pos) {
  * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the octahedron.
  * @returns the created `Octahedron`
  */
- export function createOctahedron(name, rad, det, col, met, rou, normal, pos) {
+ export function createOctahedron(name, rad, det, col, met, rou, normal, pos,isWireframe) {
     const octahedron_geo = new THREE.OctahedronGeometry(rad, det);
     const octahedron_normal = textureLoader.load('' + normal);
     const octahedron_mat = new THREE.MeshStandardMaterial({
@@ -89,7 +89,8 @@ export function createPatentObject(pos) {
         color: col,
         metalness: met,
         roughness: rou,
-        normalMap: octahedron_normal
+        normalMap: octahedron_normal,
+        wireframe: isWireframe
     });
     const octahedron = new THREE.Mesh(octahedron_geo, octahedron_mat);
     // octahedron.castShadow = true;

From 99406608e86f08d08382e71490e20fe9ff9df75b Mon Sep 17 00:00:00 2001
From: Caleb Mcolin <Caleb.mcolin@gmail.com>
Date: Thu, 8 Dec 2022 20:25:42 -0800
Subject: [PATCH 4/7] added new shape to slide 6

---
 main.js         | 33 +++++++++++++++++++-----
 src/movement.js |  2 +-
 src/objects.js  | 67 +++++++++++++++++++++++++++++++++++++++++++------
 3 files changed, 88 insertions(+), 14 deletions(-)

diff --git a/main.js b/main.js
index f06bf2e..33fc0e3 100644
--- a/main.js
+++ b/main.js
@@ -2,7 +2,7 @@ import './style.css';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { createAmbientLight, createPointLight, createRectLight } from './src/lights';
-import { createSphere, createPlane, createBackground, createTorus, createChildSphere, createPatentObject, createOctahedron, createTorusKnot } from './src/objects';
+import { createSphere, createPlane, createBackground, createTorus, createChildSphere, createPatentObject, createOctahedron, createTorusKnot, createCone, createIcosahedron } from './src/objects';
 import { movments } from './src/movement';
 
 // SCENE
@@ -23,7 +23,7 @@ renderer.setPixelRatio(window.devicePixelRatio, 2);
 
 // CAMERA
 export const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height, 0.1, 1000);
-camera.position.set(92.6, -32.267, 190.4); // Sphere1 Location
+camera.position.set(-212.36, -43.18, -257.96); // Sphere1 Location
 
 // RESIZING
 window.addEventListener('resize', onWindowResize, false);
@@ -109,15 +109,33 @@ scene.add(pLight5);
 scene.add(sphere5);
 
 // Slide 6 object(s)
-const pLight6 = createPointLight(0xffffff, 1, 3, 1.5, { x: -210, y: -42, z: -254 });
-const sphere6 = createSphere("Sphere 6", 0.5, 0xFFFF00, .4, .5, './images/sphere-normal-map.jpg', { x: -209, y: -43, z: -253 });
+const pLight6 = createPointLight(0xffffff, 1, 4, 1.5, { x: -209, y: -43, z: -253 });
+const slide6ConeParent = createPatentObject({ x: -209, y: -43, z: -253 });
+const slide6Cone1 = createCone("Cone 1", .5, 1.5, 6, 1, 0xFFFF00, .4, .5, './images/sphere-normal-map.jpg');
+const slide6Cone2 = createCone("Cone 2", .5, 1.5, 6, 1, 0x9D00FF, .4, .5, './images/sphere-normal-map.jpg');
+const slide6Cone3 = createCone("Cone 3", .5, 1.5, 6, 1, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg');
+const slide6Cone4 = createCone("Cone 4", .5, 1.5, 6, 1, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg');
+// adding children to parent
+slide6ConeParent.add(slide6Cone1);
+slide6ConeParent.add(slide6Cone2);
+slide6ConeParent.add(slide6Cone3);
+slide6ConeParent.add(slide6Cone4);
+// positioning Cones
+slide6Cone1.position.y = -1.5;
+slide6Cone2.position.y = 1.5;
+slide6Cone2.rotation.x = (Math.PI);
+slide6Cone3.position.z = 1.5;
+slide6Cone3.rotation.x = (Math.PI / -2);
+slide6Cone4.position.z = -1.5;
+slide6Cone4.rotation.x = (Math.PI / 2);
+//adding to scene
 scene.add(pLight6);
-scene.add(sphere6);
+scene.add(slide6ConeParent);
 
 // MOVEMENTS
 const controls = new OrbitControls(camera, renderer.domElement);
 controls.enableDamping = true;
-movments(camera, controls, slide1Sphere, slide2Octahedron, slide3Octahedron, torusKnot, sphere5, sphere6);
+movments(camera, controls, slide1Sphere, slide2Octahedron, slide3Octahedron, torusKnot, sphere5, slide6ConeParent);
 
 // ANIMATE LOOP
 function animate() {
@@ -153,6 +171,9 @@ function animate() {
   // Slide 5 Animation
 
   // Slide 6 Animation
+  slide6ConeParent.rotation.x += .005;
+  slide6ConeParent.rotation.y += .005;
+  slide6ConeParent.rotation.z += .005;
 
   // Main animation loop
   renderer.render(scene, camera);
diff --git a/src/movement.js b/src/movement.js
index bdce762..c75455a 100644
--- a/src/movement.js
+++ b/src/movement.js
@@ -173,5 +173,5 @@ export function movments(camera, controls, sphere1, sphere2, sphere3, sphere4, s
     };
   };
 
-  moveToSlide4();
+  moveToSlide6();
 };
\ No newline at end of file
diff --git a/src/objects.js b/src/objects.js
index c298abd..eb1fb4f 100644
--- a/src/objects.js
+++ b/src/objects.js
@@ -61,19 +61,19 @@ export function createChildSphere(name, rad, col, met, rou, normal) {
  * 
  * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the parent object's position.
 
- * @returns 
+ * @returns The invisible object used to connect a child to. 
  */
 export function createPatentObject(pos) {
     const parent = new THREE.Object3D();
     parent.position.set(pos.x, pos.y, pos.z);
-    return parent
+    return parent;
 };
 
 /** Creates a Octahedron Object3D with the given properties.
  * 
  * @param {String} name `String`: The name of the octahedron
  * @param {float} rad `float`: The radius of the octahedron.
- * @param {number} det `integer`: The level of detail of the octahedron.
+ * @param {number} det `number`: The level of detail of the octahedron.
  * @param {color} col `color`: 0x000000
  * @param {float} met `float`: The metalness of the octahedron. - '0 > 1'
  * @param {float} rou `float`: The roughness of the octahedron. - '0 > 1'
@@ -81,7 +81,7 @@ export function createPatentObject(pos) {
  * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the octahedron.
  * @returns the created `Octahedron`
  */
- export function createOctahedron(name, rad, det, col, met, rou, normal, pos,isWireframe) {
+export function createOctahedron(name, rad, det, col, met, rou, normal, pos, isWireframe) {
     const octahedron_geo = new THREE.OctahedronGeometry(rad, det);
     const octahedron_normal = textureLoader.load('' + normal);
     const octahedron_mat = new THREE.MeshStandardMaterial({
@@ -99,6 +99,35 @@ export function createPatentObject(pos) {
     return octahedron;
 };
 
+/** Creates a Icosahedron Object3D with the given properties.
+ * 
+ * @param {String} name `String`: The name of the icosahedron
+ * @param {float} rad `float`: The radius of the icosahedron.
+ * @param {color} col `color`: 0x000000
+ * @param {float} met `float`: The metalness of the icosahedron. - '0 > 1'
+ * @param {float} rou `float`: The roughness of the icosahedron. - '0 > 1'
+ * @param {String} norm `string`: The directory path to the normal map.
+ * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the icosahedron.
+ * @returns the created `icosahedron`
+ */
+export function createIcosahedron(name, rad, col, met, rou, normal, pos, isWireframe) {
+    const icosahedron_geo = new THREE.IcosahedronGeometry(rad, 0);
+    const icosahedron_normal = textureLoader.load('' + normal);
+    const icosahedron_mat = new THREE.MeshStandardMaterial({
+        name: name,
+        color: col,
+        metalness: met,
+        roughness: rou,
+        normalMap: icosahedron_normal,
+        wireframe: isWireframe
+    });
+    const icosahedron = new THREE.Mesh(icosahedron_geo, icosahedron_mat);
+    // icosahedron.castShadow = true;
+    // icosahedron.receiveShadow = true;
+    icosahedron.position.set(pos.x, pos.y, pos.z);
+    return icosahedron;
+}
+
 /** Creates a Torus Object3D with the given properties.
  * 
  * @param {String} name `String`: The name of the Torus
@@ -133,15 +162,15 @@ export function createTorus(name, rad, thick, radSeg, thickSeg, col, met, rou, p
  * @param {number} thick thickness of the TrousKnot
  * @param {float} radSeg number of radius segments 
  * @param {float} thickSeg number of thickness segments
- * @param {number} p determines how many times the geometry winds around its axis of rotational symmetry. (Default is 2)
- * @param {number} q determines how many times the geometry winds around a circle in the interior of the torus. (Default is 3)
+ * @param {number} p `number`: determines how many times the geometry winds around its axis of rotational symmetry. (Default is 2)
+ * @param {number} q `number`: determines how many times the geometry winds around a circle in the interior of the torus. (Default is 3)
  * @param {color} col `color`: 0x000000
  * @param {float} met `float`: The metalness of the Torus. - '0 > 1'
  * @param {float} rou `float`: The roughness of the Torus. - '0 > 1'
  * @param {Object} pos `Object`: [x: #, y: #, z: #] cordinates for the TrousKnot.
  * @returns the created `TrousKnot`
  */
-export function createTorusKnot(name, rad, thick, thickSeg, radSeg, p, q, col, met, rou, normal, pos){
+export function createTorusKnot(name, rad, thick, thickSeg, radSeg, p, q, col, met, rou, normal, pos) {
     const torusKnot_geo = new THREE.TorusKnotGeometry(rad, thick, thickSeg, radSeg, p, q);
     const torusKnot_normal = textureLoader.load('' + normal);
     const torusKnot_mat = new THREE.MeshStandardMaterial({
@@ -159,6 +188,30 @@ export function createTorusKnot(name, rad, thick, thickSeg, radSeg, p, q, col, m
     return torusKnot;
 };
 
+/** Creates a cone Object3D with the given properties.
+ * 
+ * @param {String} name `String`: The name of the Cone
+ * @param {float} rad `float`: The radius of the Cone. (Default is 1)
+ * @param {float} height `float`: height of the Cone. (Default is 1)
+ * @param {number} radSeg `number`: number of segmented faces around the circumference of the cone. (Default is 8)
+ * @param {number} heightSeg `number`: number of rows of faces along the height of the cone. (Default is 10)
+ */
+export function createCone(name, rad, height, radSeg, heightSeg, col, met, rou, normal) {
+    const cone_geo = new THREE.ConeGeometry(rad, height, radSeg, heightSeg);
+    const cone_normal = textureLoader.load('' + normal);
+    const cone_mat = new THREE.MeshStandardMaterial({
+        name: name,
+        color: col,
+        metalness: met,
+        roughness: rou,
+        normalMap: cone_normal
+    });
+    const cone = new THREE.Mesh(cone_geo, cone_mat);
+    // cone.castShadow = true;
+    // cone.receiveShadow = true;
+    return cone;
+};
+
 /** Creates a Plane Object3D with the given properties.
  * 
  * @param {number} width `number`: Width of the sides on the X axis.

From 304ddf54ed6d0bd244fee07c9ac41d1129fac60b Mon Sep 17 00:00:00 2001
From: Caleb Mcolin <Caleb.mcolin@gmail.com>
Date: Thu, 8 Dec 2022 21:18:46 -0800
Subject: [PATCH 5/7] added new shape at slide 5

---
 main.js         | 61 ++++++++++++++++++++++++++++++++-----------------
 src/movement.js |  4 ++--
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/main.js b/main.js
index 33fc0e3..0452cc8 100644
--- a/main.js
+++ b/main.js
@@ -1,8 +1,23 @@
 import './style.css';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
-import { createAmbientLight, createPointLight, createRectLight } from './src/lights';
-import { createSphere, createPlane, createBackground, createTorus, createChildSphere, createPatentObject, createOctahedron, createTorusKnot, createCone, createIcosahedron } from './src/objects';
+import {
+  createAmbientLight,
+  createPointLight,
+  createRectLight
+} from './src/lights';
+import {
+  createSphere,
+  createPlane,
+  createBackground,
+  createTorus,
+  createChildSphere,
+  createPatentObject,
+  createOctahedron,
+  createTorusKnot,
+  createCone,
+  createIcosahedron
+} from './src/objects';
 import { movments } from './src/movement';
 
 // SCENE
@@ -23,7 +38,7 @@ renderer.setPixelRatio(window.devicePixelRatio, 2);
 
 // CAMERA
 export const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height, 0.1, 1000);
-camera.position.set(-212.36, -43.18, -257.96); // Sphere1 Location
+camera.position.set(-23.46, -23.46, -23.46); // Sphere1 Location
 
 // RESIZING
 window.addEventListener('resize', onWindowResize, false);
@@ -103,10 +118,14 @@ scene.add(pLight4);
 scene.add(torusKnot);
 
 // Slide 5 object(s)
-const pLight5 = createPointLight(0xffffff, 1.5, 4, 1, { x: 278.5, y: -38.5, z: -206 });
-const sphere5 = createSphere("Sphere 5", 0.5, 0x9D00FF, .4, .5, './images/sphere-normal-map.jpg', { x: 277, y: -38, z: -205 });
+const pLight5 = createPointLight(0xffffff, 1, 10, 1, { x: 279, y: -38, z: -207.5 });
+const slide5Icosahedron = createIcosahedron("Icosahedron 1", 1, 0x9D00FF, .4, .5, './images/sphere-normal-map.jpg', { x: 277, y: -38, z: -205 }, false);
+const slide5IcosahedronLeft = createIcosahedron("Icosahedron left", .4, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg', { x: 279, y: -38, z: -203 }, false);
+const slide5IcosahedronRight = createIcosahedron("Icosahedron right", .4, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg', { x: 275, y: -38, z: -207 }, false);
 scene.add(pLight5);
-scene.add(sphere5);
+scene.add(slide5Icosahedron);
+scene.add(slide5IcosahedronRight);
+scene.add(slide5IcosahedronLeft);
 
 // Slide 6 object(s)
 const pLight6 = createPointLight(0xffffff, 1, 4, 1.5, { x: -209, y: -43, z: -253 });
@@ -115,12 +134,10 @@ const slide6Cone1 = createCone("Cone 1", .5, 1.5, 6, 1, 0xFFFF00, .4, .5, './ima
 const slide6Cone2 = createCone("Cone 2", .5, 1.5, 6, 1, 0x9D00FF, .4, .5, './images/sphere-normal-map.jpg');
 const slide6Cone3 = createCone("Cone 3", .5, 1.5, 6, 1, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg');
 const slide6Cone4 = createCone("Cone 4", .5, 1.5, 6, 1, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg');
-// adding children to parent
 slide6ConeParent.add(slide6Cone1);
 slide6ConeParent.add(slide6Cone2);
 slide6ConeParent.add(slide6Cone3);
 slide6ConeParent.add(slide6Cone4);
-// positioning Cones
 slide6Cone1.position.y = -1.5;
 slide6Cone2.position.y = 1.5;
 slide6Cone2.rotation.x = (Math.PI);
@@ -128,40 +145,39 @@ slide6Cone3.position.z = 1.5;
 slide6Cone3.rotation.x = (Math.PI / -2);
 slide6Cone4.position.z = -1.5;
 slide6Cone4.rotation.x = (Math.PI / 2);
-//adding to scene
 scene.add(pLight6);
 scene.add(slide6ConeParent);
 
 // MOVEMENTS
 const controls = new OrbitControls(camera, renderer.domElement);
 controls.enableDamping = true;
-movments(camera, controls, slide1Sphere, slide2Octahedron, slide3Octahedron, torusKnot, sphere5, slide6ConeParent);
+movments(camera, controls, slide1Sphere, slide2Octahedron, slide3Octahedron, torusKnot, slide5Icosahedron, slide6ConeParent);
 
 // ANIMATE LOOP
 function animate() {
   // Slide 1 Animation
-  slide1Sphere.rotateY(0.004);
-  slide1Child1.rotateY(-0.1);
-  slide1Child2.rotateY(-0.01);
-  slide1Child3.rotateZ(0.01);
-  slide1Child1Parent.rotateY(-0.01);
-  slide1Child1Parent.rotateZ(0.01);
-  slide1Child2Parent.rotateY(0.007);
-  slide1Child2Parent.rotateZ(0.007);
-  slide1Child3Parent.rotateY(-0.003);
+  slide1Sphere.rotation.y += 0.005;
+  slide1Child1.rotation.y += -0.1;
+  slide1Child2.rotation.y += -0.01;
+  slide1Child3.rotation.z += 0.01;
+  slide1Child1Parent.rotation.z += -.01;
+  slide1Child1Parent.rotation.x += .01;
+  slide1Child2Parent.rotation.y += .008;
+  slide1Child2Parent.rotation.z += .009;
+  slide1Child3Parent.rotation.y += -.006;
 
   // Slide 2 Animation
   slide2Octahedron.rotation.y = Math.sin(Date.now() * 0.001) * Math.PI * 0.5;
   slide2OctahedronWire.rotation.y = Math.sin(Date.now() * 0.001) * Math.PI * 0.5;
 
   // Slide 3 Animation
-  slide3Octahedron.rotateZ(-0.01);
+  slide3Octahedron.rotation.z += -0.01;
   slide3Octahedron.position.y += dxPerFrame;
   if (slide3Octahedron.position.y >= 11) dxPerFrame = -0.01; // if too far up, move down
   if (slide3Octahedron.position.y <= 9) dxPerFrame = 0.01; // if too far down, move up
 
   // Slide 4 Animation
-  torusKnot.rotateZ(-0.01);
+  torusKnot.rotation.z += -0.01;
   torusKnot.scale.y += scalePerFrame;
   torusKnot.scale.x += scalePerFrame;
   torusKnot.scale.z += scalePerFrame;
@@ -169,6 +185,9 @@ function animate() {
   if (torusKnot.scale.y <= 0.9) scalePerFrame = 0.003; // if too small, scale up
 
   // Slide 5 Animation
+  slide5Icosahedron.rotation.z += .01
+  slide5IcosahedronLeft.rotation.y += .015
+  slide5IcosahedronRight.rotation.y += -.015
 
   // Slide 6 Animation
   slide6ConeParent.rotation.x += .005;
diff --git a/src/movement.js b/src/movement.js
index c75455a..156c442 100644
--- a/src/movement.js
+++ b/src/movement.js
@@ -43,7 +43,7 @@ export function movments(camera, controls, sphere1, sphere2, sphere3, sphere4, s
   };
 
   function moveToSlide5() {
-    move(sphere5, { x: 30, y: 40, z: 0 }, 6, "slide-5");
+    move(sphere5, { x: -203, y: 0, z: 275 }, 6, "slide-5");
     slideIndex = 5;
     document.getElementById("btn-5").style.backgroundColor = "purple";
   };
@@ -173,5 +173,5 @@ export function movments(camera, controls, sphere1, sphere2, sphere3, sphere4, s
     };
   };
 
-  moveToSlide6();
+  moveToSlide1();
 };
\ No newline at end of file

From 460535e7698308c3eaca1336b02cb56d5147ce03 Mon Sep 17 00:00:00 2001
From: Caleb Mcolin <Caleb.mcolin@gmail.com>
Date: Fri, 9 Dec 2022 19:41:02 -0800
Subject: [PATCH 6/7] Added TWEEN. Updated slide 3 objects with TWEEN animation

---
 main.js           | 80 +++++++++++++++++++++++++++++++++++++----------
 package-lock.json | 11 +++++++
 package.json      |  1 +
 src/objects.js    |  7 +++--
 4 files changed, 79 insertions(+), 20 deletions(-)

diff --git a/main.js b/main.js
index 0452cc8..7f774ef 100644
--- a/main.js
+++ b/main.js
@@ -19,6 +19,7 @@ import {
   createIcosahedron
 } from './src/objects';
 import { movments } from './src/movement';
+import * as TWEEN from '@tweenjs/tween.js';
 
 // SCENE
 export const scene = new THREE.Scene();
@@ -99,16 +100,63 @@ slide1Child3.position.x = -2;
 const pLight2 = createPointLight(0xffffff, 1.5, 5, 1, { x: -182, y: 42, z: -32 });
 const slide2Octahedron = createOctahedron("Octahedron 1", 1.3, 0, 0x000000, 0, 0, '', { x: -180, y: 40, z: -30 }, false);
 const slide2OctahedronWire = createOctahedron("Octahedron 1 Wire", 1.3, 0, 0xFF019A, 0, 0, '', { x: -180, y: 40, z: -30 }, true);
-let dxPerFrame = 0.01; // how to move in a single frame
 scene.add(pLight2);
 scene.add(slide2Octahedron);
 scene.add(slide2OctahedronWire);
 
 // Slide 3 object(s)
-const pLight3 = createPointLight(0xffffff, 2, 8, 1.5, { x: -204, y: 10.7, z: 27 });
-const slide3Octahedron = createOctahedron("Octahedron 2", 1.5, 0, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg', { x: -200, y: 10, z: 27 }, false);
+const pLight3 = createPointLight(0xffffff, 2, 8, 1.5, { x: -201, y: 11.4, z: 26.8 });
+const slide3Cone1 = createCone("Cone 3-1", 1, 1.4, 4, 1, 0x00000, .4, .5, './images/sphere-normal-map.jpg', false);
+const slide3Cone1Wire = createCone("Cone 3-1 Wire", 1, 1.4, 4, 1, 0xFF019A, 0, 0, './images/sphere-normal-map.jpg', true);
+const slide3Cone2 = createCone("Cone 3-2", 1, 1.4, 4, 1, 0x00000, .4, .5, './images/sphere-normal-map.jpg', false);
+const slide3Cone2Wire = createCone("Cone 3-2 Wire", 1, 1.4, 4, 1, 0xFF019A, 0, 0, './images/sphere-normal-map.jpg', true);
+slide3Cone1.position.set(-200, 10.8, 27);
+slide3Cone2.position.set(-200, 9.2, 27);
+slide3Cone2.rotation.x = (Math.PI);
+slide3Cone1.add(slide3Cone1Wire);
+slide3Cone2.add(slide3Cone2Wire);
+scene.add(slide3Cone1);
+scene.add(slide3Cone2);
 scene.add(pLight3);
-scene.add(slide3Octahedron);
+
+// Slide 3 animation using Tween
+const slide3Cone1Tween1 = new TWEEN.Tween({ y: 10.8, yRotation: 0 })
+  .to({ y: 11.6, yRotation: Math.PI }, 2000)
+  .onUpdate((cords) => {
+    slide3Cone1.position.y = cords.y;
+    slide3Cone1.rotation.y = cords.yRotation;
+  })
+  .easing(TWEEN.Easing.Quadratic.InOut)
+  .delay(500);
+const slide3Cone1Tween2 = new TWEEN.Tween({ y: 11.6, yRotation: Math.PI })
+  .to({ y: 10.8, yRotation: Math.PI * 2 }, 2000)
+  .onUpdate((cords) => {
+    slide3Cone1.position.y = cords.y;
+    slide3Cone1.rotation.y = cords.yRotation;
+  })
+  .easing(TWEEN.Easing.Quadratic.InOut);
+slide3Cone1Tween1.chain(slide3Cone1Tween2);
+slide3Cone1Tween2.chain(slide3Cone1Tween1);
+slide3Cone1Tween1.start();
+// Slide 3 animation using Tween
+const slide3Cone2Tween1 = new TWEEN.Tween({ y: 9.2, yRotation: 0 })
+  .to({ y: 8.6, yRotation: Math.PI }, 2000)
+  .onUpdate((cords) => {
+    slide3Cone2.position.y = cords.y;
+    slide3Cone2.rotation.y = cords.yRotation;
+  })
+  .easing(TWEEN.Easing.Quadratic.InOut)
+  .delay(500);
+const slide3Cone2Tween2 = new TWEEN.Tween({ y: 8.6, yRotation: Math.PI })
+  .to({ y: 9.2, yRotation: Math.PI * 2 }, 2000)
+  .onUpdate((cords) => {
+    slide3Cone2.position.y = cords.y;
+    slide3Cone2.rotation.y = cords.yRotation;
+  })
+  .easing(TWEEN.Easing.Quadratic.InOut);
+slide3Cone2Tween1.chain(slide3Cone2Tween2);
+slide3Cone2Tween2.chain(slide3Cone2Tween1);
+slide3Cone2Tween1.start();
 
 // Slide 4 object(s)
 const pLight4 = createPointLight(0xffffff, 2, 4.5, 1, { x: 93, y: -30, z: 187 });
@@ -130,10 +178,10 @@ scene.add(slide5IcosahedronLeft);
 // Slide 6 object(s)
 const pLight6 = createPointLight(0xffffff, 1, 4, 1.5, { x: -209, y: -43, z: -253 });
 const slide6ConeParent = createPatentObject({ x: -209, y: -43, z: -253 });
-const slide6Cone1 = createCone("Cone 1", .5, 1.5, 6, 1, 0xFFFF00, .4, .5, './images/sphere-normal-map.jpg');
-const slide6Cone2 = createCone("Cone 2", .5, 1.5, 6, 1, 0x9D00FF, .4, .5, './images/sphere-normal-map.jpg');
-const slide6Cone3 = createCone("Cone 3", .5, 1.5, 6, 1, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg');
-const slide6Cone4 = createCone("Cone 4", .5, 1.5, 6, 1, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg');
+const slide6Cone1 = createCone("Cone 1", .5, 1.5, 6, 1, 0xFFFF00, .4, .5, './images/sphere-normal-map.jpg', false);
+const slide6Cone2 = createCone("Cone 2", .5, 1.5, 6, 1, 0x9D00FF, .4, .5, './images/sphere-normal-map.jpg', false);
+const slide6Cone3 = createCone("Cone 3", .5, 1.5, 6, 1, 0xFF3131, .4, .5, './images/sphere-normal-map.jpg', false);
+const slide6Cone4 = createCone("Cone 4", .5, 1.5, 6, 1, 0x1F51FF, .4, .5, './images/sphere-normal-map.jpg', false);
 slide6ConeParent.add(slide6Cone1);
 slide6ConeParent.add(slide6Cone2);
 slide6ConeParent.add(slide6Cone3);
@@ -151,10 +199,10 @@ scene.add(slide6ConeParent);
 // MOVEMENTS
 const controls = new OrbitControls(camera, renderer.domElement);
 controls.enableDamping = true;
-movments(camera, controls, slide1Sphere, slide2Octahedron, slide3Octahedron, torusKnot, slide5Icosahedron, slide6ConeParent);
+movments(camera, controls, slide1Sphere, slide2Octahedron, slide3Cone1, torusKnot, slide5Icosahedron, slide6ConeParent);
 
 // ANIMATE LOOP
-function animate() {
+function animate(t) {
   // Slide 1 Animation
   slide1Sphere.rotation.y += 0.005;
   slide1Child1.rotation.y += -0.1;
@@ -171,10 +219,7 @@ function animate() {
   slide2OctahedronWire.rotation.y = Math.sin(Date.now() * 0.001) * Math.PI * 0.5;
 
   // Slide 3 Animation
-  slide3Octahedron.rotation.z += -0.01;
-  slide3Octahedron.position.y += dxPerFrame;
-  if (slide3Octahedron.position.y >= 11) dxPerFrame = -0.01; // if too far up, move down
-  if (slide3Octahedron.position.y <= 9) dxPerFrame = 0.01; // if too far down, move up
+  // Slide 3 uses TWEEN for the animation. Check the Slide 3 object(s) above for animation code.
 
   // Slide 4 Animation
   torusKnot.rotation.z += -0.01;
@@ -195,6 +240,7 @@ function animate() {
   slide6ConeParent.rotation.z += .005;
 
   // Main animation loop
+  TWEEN.update(t);
   renderer.render(scene, camera);
   controls.update();
   requestAnimationFrame(animate);
@@ -219,9 +265,9 @@ function lightDebugHelper(light1, light2, light3) {
   lightFolder1.add(light1, 'intensity').min(0).max(10).step(0.01);
   lightFolder1.add(light1, 'distance').min(0).max(7).step(0.5);
   lightFolder1.add(light1, 'decay').min(1).max(10).step(0.5);
-  lightFolder1.add(light1.position, 'x').min(90).max(110).step(0.1);
-  lightFolder1.add(light1.position, 'y').min(-34).max(-27).step(0.1);
-  lightFolder1.add(light1.position, 'z').min(180).max(193).step(0.1);
+  lightFolder1.add(light1.position, 'x').min(-1000).max(1000).step(0.1);
+  lightFolder1.add(light1.position, 'y').min(-1000).max(1000).step(0.1);
+  lightFolder1.add(light1.position, 'z').min(-1000).max(1000).step(0.1);
   lightFolder1.addColor(light1Color, 'color').onChange(() => {
     light1.color.set(light1Color.color)
   });
diff --git a/package-lock.json b/package-lock.json
index c3f9240..64cd931 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "portfolio",
       "version": "0.0.0",
       "dependencies": {
+        "@tweenjs/tween.js": "^18.6.4",
         "dat.gui": "^0.7.9",
         "gsap": "^3.10.4",
         "three": "^0.142.0"
@@ -16,6 +17,11 @@
         "vite": "^2.9.9"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "18.6.4",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz",
+      "integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ=="
+    },
     "node_modules/dat.gui": {
       "version": "0.7.9",
       "resolved": "https://registry.npmjs.org/dat.gui/-/dat.gui-0.7.9.tgz",
@@ -570,6 +576,11 @@
     }
   },
   "dependencies": {
+    "@tweenjs/tween.js": {
+      "version": "18.6.4",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz",
+      "integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ=="
+    },
     "dat.gui": {
       "version": "0.7.9",
       "resolved": "https://registry.npmjs.org/dat.gui/-/dat.gui-0.7.9.tgz",
diff --git a/package.json b/package.json
index cb99247..e90be94 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "vite": "^2.9.9"
   },
   "dependencies": {
+    "@tweenjs/tween.js": "^18.6.4",
     "dat.gui": "^0.7.9",
     "gsap": "^3.10.4",
     "three": "^0.142.0"
diff --git a/src/objects.js b/src/objects.js
index eb1fb4f..f5a6b55 100644
--- a/src/objects.js
+++ b/src/objects.js
@@ -126,7 +126,7 @@ export function createIcosahedron(name, rad, col, met, rou, normal, pos, isWiref
     // icosahedron.receiveShadow = true;
     icosahedron.position.set(pos.x, pos.y, pos.z);
     return icosahedron;
-}
+};
 
 /** Creates a Torus Object3D with the given properties.
  * 
@@ -196,7 +196,7 @@ export function createTorusKnot(name, rad, thick, thickSeg, radSeg, p, q, col, m
  * @param {number} radSeg `number`: number of segmented faces around the circumference of the cone. (Default is 8)
  * @param {number} heightSeg `number`: number of rows of faces along the height of the cone. (Default is 10)
  */
-export function createCone(name, rad, height, radSeg, heightSeg, col, met, rou, normal) {
+export function createCone(name, rad, height, radSeg, heightSeg, col, met, rou, normal, isWireframe) {
     const cone_geo = new THREE.ConeGeometry(rad, height, radSeg, heightSeg);
     const cone_normal = textureLoader.load('' + normal);
     const cone_mat = new THREE.MeshStandardMaterial({
@@ -204,7 +204,8 @@ export function createCone(name, rad, height, radSeg, heightSeg, col, met, rou,
         color: col,
         metalness: met,
         roughness: rou,
-        normalMap: cone_normal
+        normalMap: cone_normal,
+        wireframe: isWireframe
     });
     const cone = new THREE.Mesh(cone_geo, cone_mat);
     // cone.castShadow = true;

From 28f3728c872bc6d39df90b244d4873eaf694f4b0 Mon Sep 17 00:00:00 2001
From: Caleb Mcolin <Caleb.mcolin@gmail.com>
Date: Fri, 9 Dec 2022 19:45:09 -0800
Subject: [PATCH 7/7] disabled debug mode

---
 main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main.js b/main.js
index 7f774ef..240db4e 100644
--- a/main.js
+++ b/main.js
@@ -310,7 +310,7 @@ function lightDebugHelper(light1, light2, light3) {
     console.log("z " + camera.position.z);
   };
 };
-lightDebugHelper(pLight4, pLight5, pLight6); // Comment/Uncomment to toggle debug mode
+// lightDebugHelper(pLight4, pLight5, pLight6); // Comment/Uncomment to toggle debug mode
 // DEBUG ** DEVELOPMENT USE ONLY ** DEBUG //
 
 animate();