I don't remember

view/controls.js

@@ -7,7 +7,7 @@ export class SpiralCamera {
         // this.camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
         this.camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
         this.angle = 90;
-        this.distance = 5;
+        this.distance = 10;
         this.canvas = canvas
         this.offset = 0;
         this.segmentHeight = segmentHeight;
@@ -33,6 +33,7 @@ export class SpiralCamera {
             if (isMousePressed) {
                 let horizontal = event.movementX;
                 let vertical = event.movementY;
+                Math.abs(horizontal) > Math.abs(vertical)? vertical = 0 : horizontal = 0;
                 this.updateCameraPosition(horizontal, vertical);
             }
         });

view/graphics.js

@@ -7,7 +7,6 @@ import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 const segmentHeight = 2;
 
 let spiralMaterial = new THREE.MeshPhongMaterial({ color: 0x0f0f0f });
-let distance = 5;
 
 const scene = new THREE.Scene();
 
@@ -28,7 +27,7 @@ scene.add(ambientLight);
 
 let segments = [];
 let viewingYear = new Date().getFullYear();
-let viewDistance = 5;
+let viewDistance = 15;
 let verticalOffset = 0;
 let switched = true;
 
@@ -42,10 +41,6 @@ let switched = true;
 // text.style.left = 200 + 'px'
 // document.body.appendChild(text)
 
-
-
-
-
 for (let i = 0; i < viewDistance * 2 + 1; i++) {
     let color = `#${(Math.floor(Math.random() * 16777215)).toString(16)}`;
     let material = new THREE.MeshPhongMaterial({ color: color });
@@ -54,25 +49,33 @@ for (let i = 0; i < viewDistance * 2 + 1; i++) {
     scene.add(segments[i].getText());
 }
 
+const colors = ["#ff0000", "#ffa500", "#ffff00", "#00ff00", "#0000ff", "#00ffff", "#800080"]
+
 addEventListener("changedViewYear", (e) => {
-    let color = `#${(Math.floor(Math.random() * 16777215)).toString(16)}`;
-    let material = new THREE.MeshPhongMaterial({ color: color });
     let newYear = camera.getViewingYear();
 
     if (newYear > viewingYear) { // +
+        let color = colors[(colors.length - 1) - ((newYear + viewDistance) % colors.length)]
+        let material = new THREE.MeshBasicMaterial({ color: color });
+
         scene.remove(segments[0].getSegment())
         scene.remove(segments[0].getText())
-        for (let i = 0; i < segments.length; i++) {
+        
-            if (i < segments.length - 1) segments[i] = segments[i + 1]
+        segments.shift();
-            else segments[i] = new SpiralSegment(newYear + viewDistance, segmentHeight, material);
+        segments.push(new SpiralSegment(newYear + viewDistance, segmentHeight, material));
-        }
+        
         scene.add(segments[segments.length - 1].getSegment());
         scene.add(segments[segments.length - 1].getText());
     } else {    
+        let color = colors[(colors.length - 1) - ((newYear - viewDistance) % colors.length)]
+        let material = new THREE.MeshBasicMaterial({ color: color });
+
         scene.remove(segments[segments.length - 1].getSegment())
         scene.remove(segments[segments.length - 1].getText())
+
         segments.pop();
         segments.unshift(new SpiralSegment(newYear - viewDistance, segmentHeight, material))
+        
         scene.add(segments[0].getSegment());
         scene.add(segments[0].getText());
     }
@@ -91,8 +94,8 @@ function animate() {
     for (let i = 0; i < segments.length; i++) {
         segments[i].getSegment().position.y = ((segments[i].year - camera.getViewingYear()) * segmentHeight + camera.getOffset());
         segments[i].getText().position.y = segmentHeight / 2 +(segments[i].year - camera.getViewingYear()) * segmentHeight + camera.getOffset();
-        segments[i].getText().position.x = Math.cos(THREE.MathUtils.degToRad(camera.getAngle() + 90)) * 3
+        segments[i].getText().position.x = 2.5*Math.cos(THREE.MathUtils.degToRad(camera.getAngle() + 90)) * 3
-        segments[i].getText().position.z = Math.sin(THREE.MathUtils.degToRad(camera.getAngle() + 90)) * 3
+        segments[i].getText().position.z = 2.5*Math.sin(THREE.MathUtils.degToRad(camera.getAngle() + 90)) * 3
         segments[i].getText().lookAt(camera.getCamera().position)
     }
 

view/spiral.js

@@ -8,9 +8,9 @@ const calculateSpiralGeometry = (spiralHeight) => {
     for (let i = 0; i <= number; i++) {
         let p = i / number;
 
-        let x = Math.cos(p * 2 * Math.PI);
+        let x = 5*Math.cos(p * 2 * Math.PI);
-        let y = p * spiralHeight;
+        let y = 1 * p * spiralHeight;
-        let z = Math.sin(p * 2 * Math.PI);
+        let z = 5*Math.sin(p * 2 * Math.PI);
 
         pointsOfCurve.push(new THREE.Vector3(x, y, z));
     }