changed colors, divided spiral by 12 segments

index.html

@@ -19,47 +19,6 @@
 	  </script>
 	<script src="view/graphics.js" type="module"></script>
 	<script src="view/controls.js" type="module"></script>
-
-	<script id="vertexShader" type="x-shader/x-vertex">
-		const float PI = 3.14159;
-
-		varying vec4 v_color;
-		varying float rad;
-
-		void main() {
-			rad = atan(position.z, position.x) - PI/2.;
-			if (rad < 0.) rad = 2. * PI - abs(rad);
-
-			gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x, position.y, position.z, 1.0);
-		  }
-	</script>
-	<script id="fragmentShader" type="x-shader/x-fragment">
-		const float PI = 3.14159;
-
-		varying vec4 v_color;
-		varying float rad;
-
-		vec4 colors[12] = vec4[12](
-			vec4(0.0980, 0.4627, 0.8235, 1), // jan
-			vec4(0.102, 0.1406, 0.4922, 1), // feb
-			vec4(1, 0, 1, 1), // mar
-			vec4(1, 1, 0, 1), // apr
-			vec4(0, 1, 1, 1), // may
-			vec4(0, 1, 0, 1), // jun
-			vec4(1, 0, 0, 1), // jul
-			vec4(0, 0, 1, 1), // aug
-			vec4(0.5, 1, 1, 1), // sep
-			vec4(1, 0.5, 1, 1), // oct
-			vec4(1, 1, 0.5, 1), // nov
-			vec4(1, 1, 1, 1) // dec
-		);
-
-		void main() {
-			int month = int(floor(rad / (PI/6.)));
-
-			gl_FragColor = colors[month];
-		  }
-	</script>
 </body>
 
 </html>

view/controls.js

@@ -1,6 +1,8 @@
 import * as THREE from "three";
 
 let isMousePressed = false
+let sensetivityX = 0.5;
+let sensetivityY = 1.;
 
 export class SpiralCamera {
     constructor(canvas, segmentHeight) {
@@ -13,8 +15,6 @@ export class SpiralCamera {
         this.segmentHeight = segmentHeight;
         this.viewingYear = new Date().getFullYear();
 
-        console.log(this.canvas)
-
         this.camera.position.z = this.distance;
 
         addEventListener('mousedown', (event) => {
@@ -34,7 +34,7 @@ export class SpiralCamera {
                 let horizontal = event.movementX;
                 let vertical = event.movementY;
                 Math.abs(horizontal) > Math.abs(vertical)? vertical = 0 : horizontal = 0;
-                this.updateCameraPosition(horizontal, vertical);
+                this.updateCameraPosition(horizontal * sensetivityX, vertical * sensetivityY);
             }
         });
 

view/graphics.js

@@ -4,9 +4,7 @@ import { SpiralCamera } from './controls.js';
 import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 
-const segmentHeight = 2;
 
-// let spiralMaterial = new THREE.MeshPhongMaterial({ color: 0x0f0f0f });
 const spiralMaterial = new THREE.ShaderMaterial( {
 
 	uniforms: {
@@ -15,17 +13,70 @@ const spiralMaterial = new THREE.ShaderMaterial( {
         position: new THREE.Vector3()
 	},
 
-	vertexShader: document.getElementById( 'vertexShader' ).textContent,
+	// vertexShader: document.getElementById( 'vertexShader' ).textContent,
-	fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+	// fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+    vertexShader: `
+    const float PI = 3.14159;
+
+    varying vec4 v_color;
+    varying float deg;
+
+    void main() {
+        deg = degrees(atan(position.z, position.x)) ;
+        if (deg <= 0.) deg = 360. + deg;
+        
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x, position.y, position.z, 1.0);
+    }
+    `,
+	fragmentShader: `
+    const float PI = 3.14159;
+
+    varying vec4 v_color;
+    varying float deg;
+    varying float toDiscard;
+    
+    vec4 colors[12] = vec4[12](
+        vec4(0.202, 0.2406, 0.5922, 1), // jan
+        vec4(0.0980, 0.4627, 0.8235, 1), // feb
+        vec4(0.3984, 0.7305, 0.4141, 1), // mar
+        vec4(0.2188, 0.5547, 0.2344, 1), // apr
+        vec4(27./256., 94./256., 32./256., 1), // may
+        vec4(205./256., 220./256., 57./256., 1), // jun
+        vec4(255./256., 238./256., 88./256., 1), // jul
+        vec4(251./256., 192./256., 45./256., 1), // aug
+        vec4(255./256., 160./256., 0, 1), // sep
+        vec4(245./256., 124./256., 0, 1), // oct
+        vec4(230./256., 74./256., 25./256., 1), // nov
+        vec4(144./256., 164./256., 174./256., 1) // dec
+    );
+    
+    void main() {
+        if (int(round(deg)) % 30 == 0) discard;
+    
+        int month = int((deg / 30.));
+        vec4 color = mix(colors[month], colors[month + 1], (deg - float(month) * 30.) / 30.);
+    
+        gl_FragColor = color;
+    }
+    `
 
 } );
 
+const segmentHeight = 2;
+
+let segments = [];
+let viewingYear = new Date().getFullYear();
+let viewDistance = 5;
+
+//setting scene
 const scene = new THREE.Scene();
 
+//setting canvas
 var canvas = document.querySelector('#canvas');
 const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
 document.body.appendChild(renderer.domElement);
 
+//setting camera
 const camera = (new SpiralCamera(canvas, segmentHeight));
 
 // setting light
@@ -37,59 +88,31 @@ const ambientLight = new THREE.AmbientLight(0xffffff, 10);
 scene.add(pointLight);
 scene.add(ambientLight);
 
-let segments = [];
+//Creating first segments
-let viewingYear = new Date().getFullYear();
-let viewDistance = 15;
-let verticalOffset = 0;
-let switched = true;
-
-// let text = document.createElement('div');
-// text.style.position = 'absolute'
-// text.style.width = 100
-// text.style.height = 100
-// text.style.color = "white"
-// text.innerHTML = "test"
-// text.style.top = 200 + 'px'
-// 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)}`;
+    segments.push(new SpiralSegment(viewingYear - viewDistance + i, segmentHeight, spiralMaterial));
-    // let material = new THREE.MeshPhongMaterial({ color: color });
-    let material = spiralMaterial;
-    segments.push(new SpiralSegment(viewingYear - viewDistance + i, segmentHeight, material));
     scene.add(segments[i].getSegment());
     scene.add(segments[i].getText());
-}
+};
-
-const colors = ["#ff0000", "#ffa500", "#ffff00", "#00ff00", "#0000ff", "#00ffff", "#800080"]
 
 addEventListener("changedViewYear", (e) => {
     let newYear = camera.getViewingYear();
 
     if (newYear > viewingYear) { // +
-        // let color = colors[(colors.length - 1) - ((newYear + viewDistance) % colors.length)]
-        // let material = new THREE.MeshBasicMaterial({ color: color });
-        let material = spiralMaterial;
-
         scene.remove(segments[0].getSegment())
         scene.remove(segments[0].getText())
         
         segments.shift();
-        segments.push(new SpiralSegment(newYear + viewDistance, segmentHeight, material));
+        segments.push(new SpiralSegment(newYear + viewDistance, segmentHeight, spiralMaterial));
         
         scene.add(segments[segments.length - 1].getSegment());
         scene.add(segments[segments.length - 1].getText());
-    } else {    
+    } else {  // -
-        // let color = colors[(colors.length - 1) - ((newYear - viewDistance) % colors.length)]
-        // let material = new THREE.MeshBasicMaterial({ color: color });
-        let material = spiralMaterial;
-
         scene.remove(segments[segments.length - 1].getSegment())
         scene.remove(segments[segments.length - 1].getText())
 
         segments.pop();
-        segments.unshift(new SpiralSegment(newYear - viewDistance, segmentHeight, material))
+        segments.unshift(new SpiralSegment(newYear - viewDistance, segmentHeight, spiralMaterial))
 
         scene.add(segments[0].getSegment());
         scene.add(segments[0].getText());
@@ -106,6 +129,7 @@ function animate() {
         camera.getCamera().updateProjectionMatrix();
     }
 
+    // moving text along with the camera and spiral
     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();

view/spiral.js

@@ -5,7 +5,7 @@ import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 const calculateSpiralGeometry = (spiralHeight) => {
     let pointsOfCurve = [];
     const number = 1000;
-    for (let i = 0; i <= number; i++) {
+    for (let i = 1; i < number; i++) {
         let p = i / number;
 
         let x = 5*Math.cos(p * 2 * Math.PI);
@@ -16,7 +16,7 @@ const calculateSpiralGeometry = (spiralHeight) => {
     }
 
     let curve = new THREE.CatmullRomCurve3(pointsOfCurve);
-    return new THREE.TubeGeometry(curve, 400, 0.1, 900, false);
+    return new THREE.TubeGeometry(curve, 200, 0.1, 200, false);
 };
 
 const loader = new FontLoader();