From 09816c80cf8db8bfaa22abf9ebdc94c6f0df9c1f Mon Sep 17 00:00:00 2001
From: "Diego F. Goberna" <diego@feiss.be>
Date: Wed, 5 Dec 2018 02:03:42 +0100
Subject: [PATCH] constant colors logic

---
 src/assets.html             | 40 ++++++++++++++++++-------------------
 src/components/materials.js | 19 ++++++++----------
 src/constants/colors.js     | 17 ++++++++++++++++
 webpack.config.js           |  2 ++
 4 files changed, 47 insertions(+), 31 deletions(-)
 create mode 100644 src/constants/colors.js

diff --git a/src/assets.html b/src/assets.html
index 8c292af..d70a84b 100644
--- a/src/assets.html
+++ b/src/assets.html
@@ -159,33 +159,33 @@
 <!-- stage, neons, etc animations launched from beat-loader events -->
 
 <a-mixin id="bgColorAnimation"
-  animation__bgcoloroff="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: #111; dur: 500; easing: linear; startEvents: bgcoloroff"
-  animation__bgcolorblue="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: #00acfc; dur: 5; easing: linear; startEvents: bgcolorblue"
-  animation__bgcolorbluefade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; from: #5FCCFF; to: #00acfc; dur: 500; easing: linear; startEvents: bgcolorbluefade"
-  animation__bgcolorred="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: #fc0000; dur: 5; easing: linear; startEvents: bgcolorred"
-  animation__bgcolorredfade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; from: #FF4343; to: #fc0000; dur: 500; easing: linear; startEvents: bgcolorredfade"
+  animation__bgcoloroff="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: {{ COLORS.BG_OFF }}; dur: 500; easing: linear; startEvents: bgcoloroff"
+  animation__bgcolorblue="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: {{ COLORS.BG_BLUE }}; dur: 5; easing: linear; startEvents: bgcolorblue"
+  animation__bgcolorbluefade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; from: {{ COLORS.BG_BRIGHTBLUE }}; to: {{ COLORS.BG_BLUE }}; dur: 500; easing: linear; startEvents: bgcolorbluefade"
+  animation__bgcolorred="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: {{ COLORS.BG_RED }}; dur: 5; easing: linear; startEvents: bgcolorred"
+  animation__bgcolorredfade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; from: {{ COLORS.BG_BRIGHTBLUE }}; to: {{ COLORS.BG_RED }}; dur: 500; easing: linear; startEvents: bgcolorredfade"
   ></a-mixin>
 
 <a-mixin id="tunnelColorAnimation"
-  animation__tunnelcoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: #111; dur: 500; easing: linear; startEvents: tunnelcoloroff"
-  animation__tunnelcolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: #00acfc; dur: 5; easing: linear; startEvents: tunnelcolorblue"
-  animation__tunnelcolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: #5FCCFF; to: #00acfc; dur: 500; easing: linear; startEvents: tunnelcolorbluefade"
-  animation__tunnelcolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: #fc0000; dur: 5; easing: linear; startEvents: tunnelcolorred"
-  animation__tunnelcolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: #FF4343; to: #fc0000; dur: 500; easing: linear; startEvents: tunnelcolorredfade"
+  animation__tunnelcoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: {{ COLORS.NEON_OFF }}; dur: 500; easing: linear; startEvents: tunnelcoloroff"
+  animation__tunnelcolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: {{ COLORS.NEON_BLUE }}; dur: 5; easing: linear; startEvents: tunnelcolorblue"
+  animation__tunnelcolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: {{ COLORS.NEON_BRIGHTBLUE }}; to: {{ COLORS.NEON_BLUE }}; dur: 500; easing: linear; startEvents: tunnelcolorbluefade"
+  animation__tunnelcolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: {{ COLORS.NEON_RED }}; dur: 5; easing: linear; startEvents: tunnelcolorred"
+  animation__tunnelcolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: {{ COLORS.NEON_BRIGHTRED }}; to: {{ COLORS.NEON_RED }}; dur: 500; easing: linear; startEvents: tunnelcolorredfade"
   ></a-mixin>
 
 <a-mixin id="leftLaserColorAnimation"
-  animation__leftlasercoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: #000; dur: 500; easing: linear; startEvents: leftlasercoloroff"
-  animation__leftlasercolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: #00f; dur: 5; easing: linear; startEvents: leftlasercolorblue"
-  animation__leftlasercolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; from: #aaf; to: #00f; dur: 500; easing: linear; startEvents: leftlasercolorbluefade"
-  animation__leftlasercolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: #f00; dur: 5; easing: linear; startEvents: leftlasercolorred"
-  animation__leftlasercolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; from: #faa; to: #f00; dur: 500; easing: linear; startEvents: leftlasercolorredfade"
+  animation__leftlasercoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: {{ COLORS.NEON_OFF }}; dur: 500; easing: linear; startEvents: leftlasercoloroff"
+  animation__leftlasercolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: {{ COLORS.NEON_BLUE }}; dur: 5; easing: linear; startEvents: leftlasercolorblue"
+  animation__leftlasercolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; from: {{ COLORS.NEON_BRIGHTBLUE }}; to: {{ COLORS.NEON_BLUE }}; dur: 500; easing: linear; startEvents: leftlasercolorbluefade"
+  animation__leftlasercolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; to: {{ COLORS.NEON_RED }}; dur: 5; easing: linear; startEvents: leftlasercolorred"
+  animation__leftlasercolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.leftLaser.value; type: color; from: {{ COLORS.NEON_BRIGHTRED }}; to: {{ COLORS.NEON_RED }}; dur: 500; easing: linear; startEvents: leftlasercolorredfade"
   ></a-mixin>
 
 <a-mixin id="rightLaserColorAnimation"
-  animation__rightlasercoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: #000; dur: 500; easing: linear; startEvents: rightlasercoloroff"
-  animation__rightlasercolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: #00f; dur: 5; easing: linear; startEvents: rightlasercolorblue"
-  animation__rightlasercolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; from: #aaf; to: #00f; dur: 500; easing: linear; startEvents: rightlasercolorbluefade"
-  animation__rightlasercolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: #f00; dur: 5; easing: linear; startEvents: rightlasercolorred"
-  animation__rightlasercolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; from: #faa; to: #f00; dur: 500; easing: linear; startEvents: rightlasercolorredfade"
+  animation__rightlasercoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: {{ COLORS.NEON_OFF }}; dur: 500; easing: linear; startEvents: rightlasercoloroff"
+  animation__rightlasercolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: {{ COLORS.NEON_BLUE }}; dur: 5; easing: linear; startEvents: rightlasercolorblue"
+  animation__rightlasercolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; from: {{ COLORS.NEON_BRIGHTBLUE }}; to: {{ COLORS.NEON_BLUE }}; dur: 500; easing: linear; startEvents: rightlasercolorbluefade"
+  animation__rightlasercolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; to: {{ COLORS.NEON_RED }}; dur: 5; easing: linear; startEvents: rightlasercolorred"
+  animation__rightlasercolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.rightLaser.value; type: color; from: {{ COLORS.NEON_BRIGHTRED }}; to: {{ COLORS.NEON_RED }}; dur: 500; easing: linear; startEvents: rightlasercolorredfade"
   ></a-mixin>
diff --git a/src/components/materials.js b/src/components/materials.js
index 1bfa332..86b4a6a 100644
--- a/src/components/materials.js
+++ b/src/components/materials.js
@@ -1,15 +1,12 @@
-const stageNormalShaders = require('../../assets/shaders/stageNormal.js')
-const stageAdditiveShaders = require('../../assets/shaders/stageAdditive.js')
+const stageNormalShaders = require('../../assets/shaders/stageNormal.js');
+const stageAdditiveShaders = require('../../assets/shaders/stageAdditive.js');
+const COLORS = require('../constants/colors.js');
 
 AFRAME.registerSystem('materials', {
   init: function () {
-    this.black = new THREE.MeshLambertMaterial({color: 0x000000, flatShading: true});
-    this.default = new THREE.MeshLambertMaterial({color: 0xff0000, flatShading: true});
-    this.neon = new THREE.MeshBasicMaterial({color: 0x9999ff, fog: false});
-
     this.stageNormal = new THREE.ShaderMaterial({
       uniforms: {
-        color: {value: new THREE.Vector3(0, 0.48, 0.72)},
+        color: {value: new THREE.Color(COLORS.BG_BLUE)},
         src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)},
       },
       vertexShader: stageNormalShaders.vertexShader,
@@ -20,10 +17,10 @@ AFRAME.registerSystem('materials', {
 
     this.stageAdditive = new THREE.ShaderMaterial({
       uniforms: {
-        tunnelNeon: {value: new THREE.Vector3(0, 0, 1)},
-        floorNeon: {value: new THREE.Vector3(0, 0, 1)},
-        leftLaser: {value: new THREE.Vector3(0, 0, 1)},
-        rightLaser: {value: new THREE.Vector3(0, 0, 1)},
+        tunnelNeon: {value: new THREE.Color(COLORS.NEON_BLUE)},
+        floorNeon: {value: new THREE.Color(COLORS.NEON_BLUE)},
+        leftLaser: {value: new THREE.Color(COLORS.NEON_BLUE)},
+        rightLaser: {value: new THREE.Color(COLORS.NEON_BLUE)},
         src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)},
       },
       vertexShader: stageAdditiveShaders.vertexShader,
diff --git a/src/constants/colors.js b/src/constants/colors.js
new file mode 100644
index 0000000..047ac7f
--- /dev/null
+++ b/src/constants/colors.js
@@ -0,0 +1,17 @@
+module.exports = {
+  OFF: '#111',
+  RED: '#f00',
+  BLUE: '#00f',
+
+  BG_OFF: '#222',
+  BG_BLUE: '#007AB8',
+  BG_BRIGHTBLUE: '#5FCCFF',
+  BG_RED: '#B80000',
+  BG_BRIGHTRED: '#FF4343',
+
+  NEON_OFF: '#000',
+  NEON_BLUE: '#00f',
+  NEON_BRIGHTBLUE: '#aaf',
+  NEON_RED: '#f00',
+  NEON_BRIGHTRED: '#faa',
+};
diff --git a/webpack.config.js b/webpack.config.js
index c811db0..0665ece 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -5,6 +5,7 @@ var htmlMinify = require('html-minifier').minify;
 var ip = require('ip');
 var path = require('path');
 var webpack = require('webpack');
+const COLORS = require('./src/constants/colors.js');
 
 // Set up templating.
 var nunjucks = Nunjucks.configure(path.resolve(__dirname, 'src'), {
@@ -14,6 +15,7 @@ nunjucks.addGlobal('DEBUG_AFRAME', !!process.env.DEBUG_AFRAME);
 nunjucks.addGlobal('DEBUG_KEYBOARD', !!process.env.DEBUG_KEYBOARD);
 nunjucks.addGlobal('HOST', ip.address());
 nunjucks.addGlobal('IS_PRODUCTION', process.env.NODE_ENV === 'production');
+nunjucks.addGlobal('COLORS', COLORS);
 
 // Initial Nunjucks render.
 fs.writeFileSync('index.html', nunjucks.render('index.html'));