Months are now coloring using shaders

index.html

@@ -19,6 +19,47 @@
 	  </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>

package-lock.json

@@ -12,7 +12,7 @@
         "three": "^0.156.1"
       },
       "devDependencies": {
-        "electron": "^27.0.0"
+        "electron": "^27.3.0"
       }
     },
     "node_modules/@electron/get": {
@@ -261,9 +261,9 @@
       "optional": true
     },
     "node_modules/electron": {
-      "version": "27.0.0",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-27.0.0.tgz",
-      "integrity": "sha512-mr3Zoy82l8XKK/TgguE5FeNeHZ9KHXIGIpUMjbjZWIREfAv+X2Q3vdX6RG0Pmi1K23AFAxANXQezIHBA2Eypwg==",
+      "version": "27.3.0",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-27.3.0.tgz",
+      "integrity": "sha512-o+pYSNG8kfXPkQWu1lhLwHboQ9n+3cuhi6GBhiryUeqY76C1oEnrxYRzCuaD9T0V7qbbvO0ID0MXfFNVQJXVBQ==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {

package.json

@@ -21,6 +21,6 @@
     "three": "^0.156.1"
   },
   "devDependencies": {
-    "electron": "^27.0.0"
+    "electron": "^27.3.0"
   }
 }

view/graphics.js

@@ -6,7 +6,19 @@ import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 
 const segmentHeight = 2;
 
-let spiralMaterial = new THREE.MeshPhongMaterial({ color: 0x0f0f0f });
+// let spiralMaterial = new THREE.MeshPhongMaterial({ color: 0x0f0f0f });
+const spiralMaterial = new THREE.ShaderMaterial( {
+
+	uniforms: {
+		time: { value: 1.0 },
+		resolution: { value: new THREE.Vector2() },
+        position: new THREE.Vector3()
+	},
+
+	vertexShader: document.getElementById( 'vertexShader' ).textContent,
+	fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+
+} );
 
 const scene = new THREE.Scene();
 
@@ -43,7 +55,8 @@ let switched = true;
 
 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 });
+    // 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());
@@ -55,8 +68,9 @@ 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 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())
@@ -67,8 +81,9 @@ addEventListener("changedViewYear", (e) => {
         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 });
+        // 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())

view/spiral.js

@@ -49,6 +49,7 @@ const calculateTextGeometry = (string) => {
 };
 
 const spiralGeometry = calculateSpiralGeometry(2)
+// spiralGeometry.setAttribute('position', new THREE.BufferAttribute( linePositions, 3 ));
 
 export class SpiralSegment {
     constructor(year, height, material) {