different shader every day and for event: soon, on, primetime, over

html/css/fontwhite.css

@@ -24,7 +24,7 @@ body {
     top: 0;
     left: 0;
     z-index: -899;
-    opacity: 0.75;
+    opacity: 0.0;
 }
 
 .toningdiv {
@@ -64,7 +64,6 @@ body {
 }
 
 .cardcontainer {
-    border-radius: 300px;
     background-color: transparent;
     width: 100%;
     margin-top: 0vh;
@@ -100,11 +99,11 @@ body {
     border-bottom: 1px solid #202020 !important;
     border-left: 0;
     border-right: 0;
-    opacity: 0.8;
+    opacity: 0.7;
 }
 
 .flyer {
-    opacity: 0.8;
+    opacity: 0.9;
 }
 
 .logo {
@@ -122,7 +121,7 @@ body {
 }
 
 .osmmap {
-    opacity: 0.5;
+    opacity: 0.65;
 }
 
 .presentedby {

html/index.html

@@ -336,39 +336,45 @@
             fragColor.rgba = vec4(smoothstep(0., t/100000000., 0.001*time2/val), 0., 0., 1.0);
         }
 
-
-
         void main() {
-            if(shadervariation == 0) {
+            // monday
-                hallucinate_1(gl_FragColor, gl_FragCoord.xy);
-            }
             if(shadervariation == 1) {
-                orion(gl_FragColor, gl_FragCoord.xy);
+                noiseinfection(gl_FragColor, gl_FragCoord.xy);
             }
+            // tuesday
             if(shadervariation == 2) {
-                hallucinate_2(gl_FragColor, gl_FragCoord.xy);
+                hallucinate_1(gl_FragColor, gl_FragCoord.xy);
             }
+            // wednesday
             if(shadervariation == 3) {
                 camousmudgy(gl_FragColor, gl_FragCoord.xy);
             }
+            // thursday
             if(shadervariation == 4) {
                 flashsmudgy(gl_FragColor, gl_FragCoord.xy);
             }
+            // friday
             if(shadervariation == 5) {
-                noiseinfection(gl_FragColor, gl_FragCoord.xy);
+                hallucinate_2(gl_FragColor, gl_FragCoord.xy);
             }
+            // event-soon
             if(shadervariation == 6) {
-                jitterbang(gl_FragColor, gl_FragCoord.xy);
+                orion(gl_FragColor, gl_FragCoord.xy);
             }
+            // event-on
             if(shadervariation == 7) {
-                flashbang(gl_FragColor, gl_FragCoord.xy);
+                jitterbang(gl_FragColor, gl_FragCoord.xy);
-//                glitchbang(gl_FragColor, gl_FragCoord.xy);
             }
+            // event-primetime
             if(shadervariation == 8) {
+                flashbang(gl_FragColor, gl_FragCoord.xy);
+            }
+            // event-over
+            if(shadervariation == 9) {
                 tvshutdown(gl_FragColor, gl_FragCoord.xy);
             }
 
-            //            debris(gl_FragColor, gl_FragCoord.xy);
+//            debris(gl_FragColor, gl_FragCoord.xy);
 //            decorationgoeslsd(gl_FragColor, gl_FragCoord.xy);
 //            bentorbits(gl_FragColor, gl_FragCoord.xy);
 //            interfields(gl_FragColor, gl_FragCoord.xy);
@@ -547,7 +553,6 @@
 </div>
 <!--<script>-->
 <!--    document.getElementById("focus").focus();-->
-<!--</script>-->
 <script type="module">
     import * as THREE from 'https://unpkg.com/three/build/three.module.js';
 
@@ -557,48 +562,56 @@
     let downsample_quality = 1.;
     let perftime_offset = 0;
 
-    let variation_count = 10;
+    let variation_count = 9;
-    var shadervariation = 0;
+    let variation_semantics = [
+        "invalid",
+        "mon",
+        "tue",
+        "wed",
+        "thu",
+        "fri",
+        "sat-event-soon",
+        "sat-event-on",
+        "sat-event-primetime",
+        "sun-event-over",
+    ]
 
-    function shadervariation_validate() {
+    var shadervariation = 1; // [1..variation_count]
-        if(shadervariation > variation_count-1) {
+
-            shadervariation = variation_count-1;
+    function shadervariation_clip() {
+        if(shadervariation > variation_count) {
+            shadervariation = variation_count;
         }
-        if(shadervariation < 0) {
+        if(shadervariation < 1) {
-            shadervariation = 0;
+            shadervariation = 1;
         }
     }
 
     function set_shadervariation(nr) {
-        console.log('set_shadervariation()');
         shadervariation = nr;
-        shadervariation_validate();
+        shadervariation_clip();
-        console.log('requested:', nr, 'effective:', shadervariation);
     }
 
     function shadervariation_next() {
-    console.log('shadervariation_next()')
         set_shadervariation(shadervariation + 1);
     }
 
     function shadervariation_prev() {
-        console.log('shadervariation_prev()')
         set_shadervariation(shadervariation - 1);
     }
 
     document.addEventListener('keydown', function(event) {
-        const key = event.key; // e.g., "ArrowRight", "ArrowLeft", etc.
+        const key = event.key;
         console.log(key);
         switch (key) {
             case "ArrowLeft":
                 shadervariation_prev();
-                init();
+                shader_init();
                 break;
             case "ArrowRight":
                 shadervariation_next();
-                init();
+                shader_init();
                 break;
-            case "0":
             case "1":
             case "2":
             case "3":
@@ -609,16 +622,80 @@
             case "8":
             case "9":
                 set_shadervariation(Number(key));
-                init();
+                shader_init();
                 break;
             case "Escape":
-                init();
+                shader_init();
                 break;
         }
     });
 
-    function init() {
+
-        console.log('shader init with variation:', shadervariation );
+    // sunday == 0, sat == 6
+    // hour [0..23]
+    function get_shadervariation_for_weekday_and_hour(weekday, hour) {
+        // debug
+        // weekday = 0;
+        // hour = 0;
+
+        var ret = 0;
+
+        let hour_event_on = 14;
+        let hour_event_primetime = 20;
+        let hour_event_over = 22;
+
+        // mon
+        if(weekday == 1) {
+            ret = 1;
+        }
+        // tue
+        if(weekday == 2) {
+            ret = 2;
+        }
+        // wed
+        if(weekday == 3) {
+            ret = 3;
+        }
+        // thu
+        if(weekday == 4) {
+            ret = 4;
+        }
+        // fri
+        if(weekday == 5) {
+            ret = 5;
+        }
+        // sat-event-soon
+        if(weekday == 6) {
+            ret = 6;
+        }
+        // sat-event-on
+        if(weekday == 6 && hour >= hour_event_on) {
+            ret = 7;
+        }
+        // sat-event-primetime
+        if((weekday == 6 && hour >= hour_event_primetime)) {
+            ret = 8;
+        }
+        // sat-event-over
+        if((weekday == 6 && hour >= hour_event_over) || weekday == 0) {
+            ret = 9;
+        }
+
+        return ret;
+    }
+
+    function site_init() {
+        const d = new Date();
+        let weekday = d.getDay() // sunday == 0, sat == 6
+        let hour = d.getHours(); // [0..23]
+        let variation = get_shadervariation_for_weekday_and_hour(weekday, hour);
+        set_shadervariation(variation);
+
+        shader_init();
+    }
+
+    function shader_init() {
+        console.log('shader_init() - variation: [', shadervariation, '] - ', variation_semantics[shadervariation]);
         camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
         scene = new THREE.Scene();
         const geometry = new THREE.PlaneGeometry( 2, 2 );
@@ -688,8 +765,9 @@
         renderer.render( scene, camera );
     }
 
-    init();
+    site_init();
     render();
 </script>
+<!--</script>-->
 </body>
 </html>