From 9fd2fbff643c6ee5d6295b678729aa38e6f8d14d Mon Sep 17 00:00:00 2001
From: heck <heck@heck.live>
Date: Sat, 14 Jun 2025 17:40:59 +0200
Subject: [PATCH] Add shader variations and keyboard controls

[0-9] - choose shader variation
Arrow Right - next shader variation
Arrow Left - previous shader variation
Esc - restart shader
---
 html/css/fontred.css   | 209 +++++++++++++++++
 html/css/fontwhite.css | 217 +++++++++++++++++
 html/index.html        | 516 ++++++++++++++++++++++++++---------------
 3 files changed, 761 insertions(+), 181 deletions(-)
 create mode 100644 html/css/fontred.css
 create mode 100644 html/css/fontwhite.css

diff --git a/html/css/fontred.css b/html/css/fontred.css
new file mode 100644
index 0000000..df05b26
--- /dev/null
+++ b/html/css/fontred.css
@@ -0,0 +1,209 @@
+body {
+    background-color: #000000;
+    opacity: 0.98;
+}
+
+#hecksshader {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -899;
+    opacity: 0.9999;
+}
+
+.aliasingdiv {
+    background-color: #040000;
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -899;
+    opacity: 0.0;
+}
+
+.toningdiv {
+    background-color: #0000ff;
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 899;
+    opacity: 0.0;
+}
+
+.brightnessdiv {
+    background-color: #ffffff;
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    opacity: 0.05;
+}
+
+
+.container {
+    background-color: transparent;
+    width: 100%;
+    border-left: 0px none #dee2e6 !important;
+    border-right: 0px none #dee2e6 !important;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0;
+    opacity: 1.0;
+}
+
+.cardcontainer {
+    background-color: transparent;
+    width: 100%;
+    margin-top: 0vh;
+    margin-bottom: 4vh;
+    border-top: 0px none #ffffff !important;
+    opacity: 0.999;
+}
+
+.section {
+    background-color: transparent;
+    width: 100%;
+    margin-top: 0vh;
+    margin-bottom: 0vh;
+    border-top: 0px none #ffffff !important;
+    opacity: 0.9999;
+}
+
+.card {
+    background-color: transparent;
+    width: 100%;
+    margin-top: 0vh;
+    margin-bottom: 0vh;
+    border: 0px solid #dee2e6 !important;
+    opacity: 0.9999;
+}
+
+.card-body {
+    background-color: #030306;
+    margin-top: 0vh;
+    margin-bottom: 0vh;
+    border-style: solid;
+    border-top: 1px solid #202020 !important;
+    border-bottom: 1px solid #202020 !important;
+    border-left: 0;
+    border-right: 0;
+    opacity: 0.8;
+}
+
+.flyer {
+    opacity: 0.8;
+}
+
+.logo {
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 0vh;
+    width: 50%;
+    display: block;
+}
+
+.card-title {
+    font-family: 'Lato black', sans-serif;
+    color: #ef3333;
+    font-size: 1.3rem;
+}
+
+.osmmap {
+    opacity: 0.5;
+}
+
+.presentedby {
+    font-family: 'Lato black', sans-serif;
+    font-size: 1.42rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: #9f1414;
+    margin-top: 2vh;
+    margin-bottom: 2vh;
+}
+
+h2 {
+    font-family: 'Lato black', sans-serif;
+    font-size: 1.42rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: #901010;
+    margin-top: 1vh;
+    margin-bottom: 0vh;
+}
+
+h5 {
+    text-transform: uppercase;
+    font-size: 0.1rem;
+    color: #c00606;
+}
+
+p {
+    font-family: 'trench', sans-serif;
+    letter-spacing: 0.06em;
+    font-size: 1.21em;
+    color: #c20606;
+    hyphens: none;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+li {
+    font-family: 'trench', sans-serif;
+    letter-spacing: 0.06em;
+    text-transform: capitalize;
+    font-size: 1.23em;
+    color: #c20606;
+}
+
+img {
+    width: 100%;
+}
+
+
+a:link {
+    color: #dddddd;
+}
+
+a:visited {
+    color: #dddddd;
+}
+
+a:hover {
+    color: #dddddd;
+}
+
+a:active {
+    color: #dddddd;
+}
+
+
+.row {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.col-12 {
+    padding-left: 3vw;
+    padding-right: 3vw;
+}
+
+.fas, .fab {
+    color: #dddddd;
+    font-size: 2em;
+}
+
+a, u {
+    text-decoration: none;
+}
\ No newline at end of file
diff --git a/html/css/fontwhite.css b/html/css/fontwhite.css
new file mode 100644
index 0000000..3ae9d96
--- /dev/null
+++ b/html/css/fontwhite.css
@@ -0,0 +1,217 @@
+
+body {
+    background-color: #000000;
+    opacity: 0.98;
+}
+
+#hecksshader {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -899;
+    opacity: 0.9999;
+}
+
+.aliasingdiv {
+    background-color: #040000;
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -899;
+    opacity: 0.75;
+}
+
+.toningdiv {
+    background-color: #0000ff;
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 899;
+    opacity: 0.0;
+}
+
+.brightnessdiv {
+    background-color: #ffffff;
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    opacity: 0.05;
+}
+
+
+.container {
+    background-color: transparent;
+    width: 100%;
+    border-left: 0px none #dee2e6 !important;
+    border-right: 0px none #dee2e6 !important;
+    margin-right: auto;
+    margin-left: auto;
+    padding: 0;
+    opacity: 1.0;
+}
+
+.cardcontainer {
+    border-radius: 300px;
+    background-color: transparent;
+    width: 100%;
+    margin-top: 0vh;
+    margin-bottom: 4vh;
+    border-top: 0px none #ffffff !important;
+    opacity: 0.999;
+}
+
+.section {
+    background-color: transparent;
+    width: 100%;
+    margin-top: 0vh;
+    margin-bottom: 0vh;
+    border-top: 0px none #ffffff !important;
+    opacity: 0.9999;
+}
+
+.card {
+    background-color: transparent;
+    width: 100%;
+    margin-top: 0vh;
+    margin-bottom: 0vh;
+    border: 0px solid #dee2e6 !important;
+    opacity: 0.9999;
+}
+
+.card-body {
+    background-color: #030306;
+    margin-top: 0vh;
+    margin-bottom: 0vh;
+    border-style: solid;
+    border-top: 1px solid #202020 !important;
+    border-bottom: 1px solid #202020 !important;
+    border-left: 0;
+    border-right: 0;
+    opacity: 0.8;
+}
+
+.flyer {
+    opacity: 0.8;
+}
+
+.logo {
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 0vh;
+    width: 50%;
+    display: block;
+}
+
+.card-title {
+    font-family: 'Lato black', sans-serif;
+    color: #ef3333;
+    font-size: 1.3rem;
+}
+
+.osmmap {
+    opacity: 0.5;
+}
+
+.presentedby {
+    font-family: 'Lato black', sans-serif;
+    font-size: 1.42rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: #eeeeff;
+    margin-top: 2vh;
+    margin-bottom: 2vh;
+}
+
+h2 {
+    font-family: 'Lato black', sans-serif;
+    font-size: 1.42rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: #eeeeff;
+    margin-top: 1vh;
+    margin-bottom: 0vh;
+}
+
+h5 {
+    text-transform: uppercase;
+    font-size: 0.1rem;
+    color: #c00606;
+}
+
+p {
+    font-family: 'trench', sans-serif;
+    letter-spacing: 0.06em;
+    font-size: 1.21em;
+    color: #cccce0;
+    hyphens: none;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+li {
+    font-family: 'trench', sans-serif;
+    letter-spacing: 0.06em;
+    text-transform: capitalize;
+    font-size: 1.23em;
+    color: #eeeeee;
+}
+
+img {
+    width: 100%;
+}
+
+
+a:link {
+    color: #dddddd;
+}
+
+a:visited {
+    color: #dddddd;
+}
+
+a:hover {
+    color: #dddddd;
+}
+
+a:active {
+    color: #dddddd;
+}
+
+
+.row {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+.col-12 {
+    padding-left: 3vw;
+    padding-right: 3vw;
+}
+
+.fas, .fab {
+    color: #dddddd;
+    font-size: 2em;
+}
+
+a, u {
+    text-decoration: none;
+}
+
+
+/*@font-face {*/
+/*    font-family: 'vw';*/
+/*    src: url('./resources/vampirewars.ttf');*/
+/*}*/
diff --git a/html/index.html b/html/index.html
index c8bda7e..10539ee 100644
--- a/html/index.html
+++ b/html/index.html
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
 
+    <link rel="stylesheet" href="css/fontred.css">
 
     <!--    Shaders -->
     <script id="vertexShader" type="x-shader/x-vertex">
@@ -31,6 +32,7 @@
         uniform vec2 iMouse;
         uniform vec2 iResolution;
         uniform sampler2D iChannel0;
+        uniform int shadervariation;
 
         vec2 GetGradient(vec2 intPos, float t) {
             float rand = texture(iChannel0, intPos / 64.0).r * 4.0;
@@ -57,241 +59,321 @@
             return noiseVal / 0.7;
         }
 
+        float fsin(in float x)
+        {
+            float w = fwidth(x);
+            return sin(x) * smoothstep(6.2832, 0.0, w);
+        }
+
+        float fcos(in float x)
+        {
+            float w = fwidth(x);
+            return cos(x) * smoothstep(6.2832, 0.0, w);
+        }
+
+        ///////////////////
+        // SHADER variationS
+        ///////////////////
 
-        void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+        void hallucinate_1(out vec4 fragColor, in vec2 fragCoord) {
             vec2 uv = fragCoord.xy / iResolution.y;
             vec2 uvm = iMouse.xy / iResolution.y;
 
-            float time = 20.98 - (100000. * mod(pow(sin(iTime / 20000000.),2.),1.));
+            float time = 20.98 - (100000. * mod(pow(sin(iTime / 20000000.), 2.), 1.));
 
             float noiseVal =  Pseudo3dNoise(vec3(uv, time));
             //                    float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/1.));
-            float time2 = 10000. - (20000. * pow(cos(iTime / noiseVal/32400.),2.));
+            float time2 = 10000. - (20000. * pow(cos(iTime / noiseVal/32400.), 2.));
 
 
             float val = sin(noiseVal * time + (sin(time) * time / 10.));
             val = 18./time2/val;
-//            val = smoothstep(1.,23.,val);
+            val *= 0.25;
             fragColor.rgba = vec4(val,0.,0.,1.0);
         }
 
-        void main() {
-            mainImage(gl_FragColor, gl_FragCoord.xy);
-        }
-    </script>
+        void hallucinate_2(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv = fragCoord.xy / iResolution.y;
+            vec2 uvm = iMouse.xy / iResolution.y;
 
-    <style>
-        body {
-            background-color: #000000;
-            opacity: 0.98;
-        }
+            float time = 30.+(3. * pow(cos(iTime / 23000.),2.));
 
-        #hecksshader {
-            width: 100%;
-            height: 100%;
-            display: block;
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: -899;
-            opacity: 0.9999;
-        }
+            float noiseVal =  Pseudo3dNoise(vec3(uv, time));
+            float time2 = 3.+(3000. * pow(cos(iTime / noiseVal/3000.),2.));
+            //           float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/10.));
 
-        .aliasingdiv {
-            background-color: #040000;
-            width: 100%;
-            height: 100%;
-            display: block;
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: -899;
-            opacity: 0.75;
+            float val = sin(noiseVal * time + (sin(time) * time / 10.));
+            val = 2./time2/val;
+            val *= 0.4;
+            fragColor.rgba = vec4(val,0.,0.,1.0);
         }
 
-        .toningdiv {
-            background-color: #0000ff;
-            width: 100%;
-            height: 100%;
-            display: block;
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: 899;
-            opacity: 0.0;
-        }
+        void bentorbits(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv = fragCoord.xy / iResolution.y;
+            vec2 uvm = iMouse.xy / iResolution.y;
 
-        .brightnessdiv {
-            background-color: #ffffff;
-            width: 100%;
-            height: 100%;
-            display: block;
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: 999;
-            opacity: 0.05;
-        }
+            float time = 20.98 - (.33 * mod(pow(fsin(iTime / 150000.), 2.), 1.));
 
+            float noiseVal =  Pseudo3dNoise(vec3(uv, time));
+            //                    float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/1.));
+            float time2 = 10000. - (20000. * pow(fcos(iTime / noiseVal/64400.), 2.));
 
-        .container {
-            background-color: transparent;
-            width: 100%;
-            border-left: 0px none #dee2e6 !important;
-            border-right: 0px none #dee2e6 !important;
-            margin-right: auto;
-            margin-left: auto;
-            padding: 0;
-            opacity: 1.0;
-        }
 
-        .cardcontainer {
-            background-color: transparent;
-            width: 100%;
-            margin-top: 0vh;
-            margin-bottom: 4vh;
-            border-top: 0px none #ffffff !important;
-            opacity: 0.999;
+            float val = fsin(noiseVal * time + (fsin(time) * time / 10.));
+            val =180./time2/val;
+            val *= 0.1;
+            fragColor.rgba = vec4(val,0.,0.,1.0);
         }
 
-        .section {
-            background-color: transparent;
-            width: 100%;
-            margin-top: 0vh;
-            margin-bottom: 0vh;
-            border-top: 0px none #ffffff !important;
-            opacity: 0.9999;
-        }
+        void debris(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv = fragCoord.xy / iResolution.y;
+            vec2 uvm = iMouse.xy / iResolution.y;
 
-        .card {
-            background-color: transparent;
-            width: 100%;
-            margin-top: 0vh;
-            margin-bottom: 0vh;
-            border: 0px solid #dee2e6 !important;
-            opacity: 0.9999;
-        }
+            float tstart = 300000. + iTime;
+            float t = 300000.+ pow(tstart,2.)*1000.;
+            float time = 400.98 - (.33 * mod(pow(sin(t * 1500000.), 2.), 1.));
 
-        .card-body {
-            background-color: #030306;
-            margin-top: 0vh;
-            margin-bottom: 0vh;
-            border-style: solid;
-            border-top: 1px solid #202020 !important;
-            border-bottom: 1px solid #202020 !important;
-            border-left: 0;
-            border-right: 0;
-            opacity: 0.8;
-        }
+            float noiseVal =  Pseudo3dNoise(vec3(uv, time));
+            //                    float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/1.));
+            //            float time2 = 10000. - (20000. * pow(fcos(t / noiseVal/64400.), 2.));
+            float time2 = 10000. - (20000. * pow(cos(t / noiseVal/6440000.), 2.));
 
-        .flyer {
-            opacity: 0.8;
+            float val = sin((noiseVal * time + (sin(time2*100.) * time2/100000000.))/.001);
+            fragColor.rgba = vec4(.001/time2/val, 0., 0., 1.0);
         }
 
-        .logo {
-            margin-left: auto;
-            margin-right: auto;
-            padding-bottom: 0vh;
-            width: 50%;
-            display: block;
-        }
+        void decorationgoeslsd(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv = fragCoord.xy / iResolution.y;
+            vec2 uvm = iMouse.xy / iResolution.y;
 
-        .card-title {
-            font-family: 'Lato black', sans-serif;
-            color: #ef3333;
-            font-size: 1.3rem;
-        }
+            float time = 0.98+(20. * pow(cos(iTime / 200000.),2.));
 
-        .osmmap {
-            opacity: 0.5;
-        }
+            float noiseVal =  Pseudo3dNoise(vec3(uv, time));
+            //                    float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/1.));
+            float time2 = 3.+(3000. * pow(cos(iTime / noiseVal/440000.),2.));
 
-        .presentedby {
-            font-family: 'Lato black', sans-serif;
-            font-size: 1.42rem;
-            letter-spacing: 0.14em;
-            text-transform: uppercase;
-            color: #9f1414;
-            margin-top: 2vh;
-            margin-bottom: 2vh;
-        }
 
-        h2 {
-            font-family: 'Lato black', sans-serif;
-            font-size: 1.42rem;
-            letter-spacing: 0.14em;
-            text-transform: uppercase;
-            color: #901010;
-            margin-top: 1vh;
-            margin-bottom: 0vh;
+            float val = sin(noiseVal * time + (sin(time) * time / 10.));
+            val = 18./time2/val;
+            val *= 0.12;
+            fragColor.rgba = vec4(val,0.,0.,1.0);
         }
 
-        h5 {
-            text-transform: uppercase;
-            font-size: 0.1rem;
-            color: #c00606;
-        }
 
-        p {
-            font-family: 'trench', sans-serif;
-            letter-spacing: 0.06em;
-            font-size: 1.21em;
-            color: #c20606;
-            hyphens: none;
-            margin-top: 0.5em;
-            margin-bottom: 0.5em;
-        }
+        void camousmudgy(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv = fragCoord.xy / iResolution.y;
+            vec2 uvm = iMouse.xy / iResolution.y;
 
-        li {
-            font-family: 'trench', sans-serif;
-            letter-spacing: 0.06em;
-            text-transform: capitalize;
-            font-size: 1.23em;
-            color: #c20606;
-        }
+            float tstart = 600. + iTime;
+            float t = pow(tstart,1.9)*100.;
+            float time = 0.98 - (.33 * mod(pow(sin(t * 1500.), 2.), 1.));
+
+            //            float noiseVal =  Pseudo3dNoise(vec3(uv, time));
+            float noiseVal =   (time/1000.) * Pseudo3dNoise(vec3(uv * 6., time/1.));
+            float time2 = 10000. - (20000. * pow(cos(t / noiseVal/64400.), 2.));
+            //            float time2 = 10000. - (20000. * pow(cos(t * noiseVal/10.), 2.));
 
-        img {
-            width: 100%;
+            float val = sin((noiseVal * time + (sin(time2*100.) * time2/100000000.))/.001);
+            val =smoothstep(0.,t/100000000.,0.001*time2/val);
+            val *= 0.3;
+            fragColor.rgba = vec4(val, 0., 0., 1.0);
         }
 
+        void flashsmudgy(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv = fragCoord.xy / iResolution.y;
+            vec2 uvm = iMouse.xy / iResolution.y;
 
-        a:link {
-            color: #dddddd;
+
+            float time = 30.+(3. * pow(cos(iTime / 23000.), 2.));
+
+            //float noiseVal =  Pseudo3dNoise(vec3(uv, time));
+            float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/10.));
+            float time2 = 3.+(3000. * pow(cos(iTime / noiseVal/300.), 2.));
+
+
+            float at = iTime/300.;
+            float am = 0.;
+            am = max(am, 0.8 - pow(mod(at, 200.), 1.));
+            am = max(am, 1.- pow(mod(at, 17.), .7));
+            am = max(am, 1.- pow(mod(at, 13.), 1.));
+            am = max(am, .5- pow(mod(at, 47.), 100.));
+            am = max(am, 1.- pow(mod(at, 257.), 257.));
+            am *= (pow(mod(at, 257.), 1.));
+            am = 1. - am;
+
+            float val = sin(noiseVal * time + (sin(time) * time / 10.));
+            val =am * (2./time2/val);
+            val *= 0.06;
+            fragColor.rgba = vec4(val, 0., 0., 1.0);
         }
 
-        a:visited {
-            color: #dddddd;
+        void interfields(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv = fragCoord.xy / iResolution.y;
+            vec2 uvm = iMouse.xy / iResolution.y;
+
+            float tstart = 6000. + iTime;
+            float t = pow(tstart,2.)*100.;
+            float time = 0.98 - (.33 * mod(pow(sin(t * 1500.), 2.), 1.));
+
+            //            float noiseVal =  Pseudo3dNoise(vec3(uv, time));
+            float noiseVal = 0.5 + 0.1 + (time/1000.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/1.));
+            float time2 = 10000. - (20000. * pow(cos(t / noiseVal/64400.), 2.));
+            //            float time2 = 10000. - (20000. * pow(cos(t * noiseVal/10.), 2.));
+
+            float val = sin((noiseVal * time + (sin(time2*100.) * time2/100000000.))/.001);
+            fragColor.rgba = vec4(smoothstep(0.,t/100000000.,0.001*time2/val), 0., 0., 1.0);
         }
 
-        a:hover {
-            color: #dddddd;
+        void flashbang(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv = fragCoord.xy / iResolution.y;
+            vec2 uvm = iMouse.xy / iResolution.y;
+
+            float tstart = 600. + iTime;
+            float t = pow(tstart,2.)*100.;
+            float time = 0.98 - (.33 * mod(pow(sin(t * 1500.), 2.), 1.));
+
+            //            float noiseVal =  Pseudo3dNoise(vec3(uv, time));
+            float noiseVal = 0.5 + 0.1 + (time/100000.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/1.));
+            float time2 = 10000. - (20000. * pow(cos(t / noiseVal/64400.), 2.));
+            //            float time2 = 10000. - (20000. * pow(cos(t * noiseVal/10.), 2.));
+
+            float val = sin((noiseVal * time + (sin(time2*100.) * time2/100000000.))/.001);
+            fragColor.rgba = vec4(smoothstep(0.,t/100000000.,0.001*time2/val), 0., 0., 1.0);
         }
 
-        a:active {
-            color: #dddddd;
+        void glitchbang(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv = fragCoord.xy / iResolution.y;
+            vec2 uvm = iMouse.xy / iResolution.y;
+
+            float t = pow(iTime,3.0);
+            float time = 20.98+(t/2000000.) - (11111111.33 * mod(pow(fsin(t / 150000.), 2.), 1.));
+
+            float noiseVal =  Pseudo3dNoise(vec3(uv, time));
+            //                    float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/1.));
+            float time2 = 10000. - (20000. * pow(cos(t / noiseVal/64400.), 2.));
+
+
+            float val = sin(noiseVal * time + (fsin(time) * time / 10.));
+            fragColor.rgba = vec4(180./time2/val, 0., 0., 1.0);
         }
 
+        void jitterbang(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv = fragCoord.xy / iResolution.y;
+            vec2 uvm = iMouse.xy / iResolution.y;
+
+            float t = 100000000000000000000./pow(iTime,4.0);
+            float time = 20.98 - (11111111.33 * mod(pow(fsin(t / 150000.), 2.), 1.));
+
+            float noiseVal =  Pseudo3dNoise(vec3(uv, time));
+            //                    float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/1.));
+            float time2 = 10000. - (20000. * pow(cos(t / noiseVal/64400.), 2.));
+
 
-        .row {
-            margin-left: 0;
-            margin-right: 0;
+            float val = sin(noiseVal * time + (fsin(time) * time / 10.));
+            fragColor.rgba = vec4(180./time2/val, 0., 0., 1.0);
         }
 
-        .col-12 {
-            padding-left: 3vw;
-            padding-right: 3vw;
+        void noiseinfection(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv = fragCoord.xy / iResolution.y;
+            vec2 uvm = iMouse.xy / iResolution.y;
+
+            float tstart = 2000. + iTime;
+            float t = pow(tstart,1.9)*100.;
+            float time = 0.98 - (.33 * mod(pow(sin(t * 1500.), 2.), 1.));
+
+            float noiseVal =  Pseudo3dNoise(vec3(uv*20., time/1000.));
+
+            float time2 = 10000. - (20000. * pow(cos(t / noiseVal/64400.), 2.));
+            noiseVal =   (time/1000.) * Pseudo3dNoise(vec3(uv * 7., time*100.));
+            //            float time2 = 10000. - (20000. * pow(cos(t * noiseVal/10.), 2.));
+
+            float val = sin((noiseVal * time + (sin(time2*100.) * time2/100000000.))/.001);
+            val = smoothstep(0.,t/100000000.,0.001*time2/val);
+            val *= 0.3;
+            fragColor.rgba = vec4(val, 0., 0., 1.0);
         }
 
-        .fas, .fab {
-            color: #dddddd;
-            font-size: 2em;
+        void orion(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv = fragCoord.xy / iResolution.y;
+            vec2 uvm = iMouse.xy / iResolution.y;
+
+            float t = iTime;
+            float time = 20.98 - (.33 * mod(pow(sin(t / 150000.), 2.), 1.));
+
+            float noiseVal =  Pseudo3dNoise(vec3(uv, time));
+            //                    float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/1.));
+            //            float time2 = 10000. - (20000. * pow(fcos(t / noiseVal/64400.), 2.));
+            float time2 = 10000. - (20000. * pow(cos(t / noiseVal/64400.), 2.));
+
+            float val = sin((noiseVal * time + (sin(time) * time))*100.);
+            val =180./time2/val;
+            val *= 0.3;
+            fragColor.rgba = vec4(val, 0., 0., 1.0);
         }
 
-        a, u {
-            text-decoration: none;
+        void tvshutdown(out vec4 fragColor, in vec2 fragCoord) {
+            vec2 uv;
+            uv.x = abs((fragCoord.x - (iResolution.x / 2.))/ (iResolution.x / 2.));
+            uv.y = abs((fragCoord.y - (iResolution.y / 2.)) / (iResolution.y / 2.));
+
+            vec2 uvm;
+            uvm.x = (iMouse.x - (iResolution.x / 2.)) / (iResolution.x / 2.);
+            uvm.y = ((iResolution.y - iMouse.y) / (iResolution.y*2.));
+
+
+            float toffset = uvm.y*1000. + iTime;
+            float tshape = pow(toffset, 2.2)*500.;
+            float tloop = mod(tshape, 100000000000.);
+            float t = tloop;
+            float time = 10.98 - (.33 * mod(pow(sin(t * 1500.), 2.), 1.));
+
+            float noiseVal =  Pseudo3dNoise(vec3(uv*t/200., time));
+
+            float time2 = 10000. - (20000. * pow(cos(t / noiseVal/64400.), 2.));
+            //            float time2 = 10000. - (20000. * pow(cos(t * noiseVal/10.), 2.));
+
+            float val = sin((noiseVal * time + (sin(time2*100.) * time2/100000000.))/.001);
+            fragColor.rgba = vec4(smoothstep(0., t/100000000., 0.001*time2/val), 0., 0., 1.0);
         }
 
-    </style>
+
+
+        void main() {
+            if(shadervariation == 0) {
+                hallucinate_1(gl_FragColor, gl_FragCoord.xy);
+            }
+            if(shadervariation == 1) {
+                orion(gl_FragColor, gl_FragCoord.xy);
+            }
+            if(shadervariation == 2) {
+                hallucinate_2(gl_FragColor, gl_FragCoord.xy);
+            }
+            if(shadervariation == 3) {
+                camousmudgy(gl_FragColor, gl_FragCoord.xy);
+            }
+            if(shadervariation == 4) {
+                flashsmudgy(gl_FragColor, gl_FragCoord.xy);
+            }
+            if(shadervariation == 5) {
+                noiseinfection(gl_FragColor, gl_FragCoord.xy);
+            }
+            if(shadervariation == 6) {
+                jitterbang(gl_FragColor, gl_FragCoord.xy);
+            }
+            if(shadervariation == 7) {
+                flashbang(gl_FragColor, gl_FragCoord.xy);
+//                glitchbang(gl_FragColor, gl_FragCoord.xy);
+            }
+            if(shadervariation == 8) {
+                tvshutdown(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);
+        }
+    </script>
 </head>
 
 <body>
@@ -301,7 +383,7 @@
 <div class="aliasingdiv"></div>
 
 <div class="container">
-<br>
+    <br>
     <div class="img flyer">
         <img src="resources/Sub_Factory_2025.webp" alt="Subfactory Banner">
     </div>
@@ -466,7 +548,6 @@
 <!--<script>-->
 <!--    document.getElementById("focus").focus();-->
 <!--</script>-->
-
 <script type="module">
     import * as THREE from 'https://unpkg.com/three/build/three.module.js';
 
@@ -474,10 +555,70 @@
     let uniforms;
     let texture;
     let downsample_quality = 1.;
-    init();
-    render();
+    let perftime_offset = 0;
+
+    let variation_count = 10;
+    var shadervariation = 0;
+
+    function shadervariation_validate() {
+        if(shadervariation > variation_count-1) {
+            shadervariation = variation_count-1;
+        }
+        if(shadervariation < 0) {
+            shadervariation = 0;
+        }
+    }
+
+    function set_shadervariation(nr) {
+        console.log('set_shadervariation()');
+        shadervariation = nr;
+        shadervariation_validate();
+        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.
+        console.log(key);
+        switch (key) {
+            case "ArrowLeft":
+                shadervariation_prev();
+                init();
+                break;
+            case "ArrowRight":
+                shadervariation_next();
+                init();
+                break;
+            case "0":
+            case "1":
+            case "2":
+            case "3":
+            case "4":
+            case "5":
+            case "6":
+            case "7":
+            case "8":
+            case "9":
+                set_shadervariation(Number(key));
+                init();
+                break;
+            case "Escape":
+                init();
+                break;
+        }
+    });
 
     function init() {
+        console.log('shader init with variation:', shadervariation );
         camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
         scene = new THREE.Scene();
         const geometry = new THREE.PlaneGeometry( 2, 2 );
@@ -491,6 +632,7 @@
             iResolution: { value: new THREE.Vector2(1.0,1.0) },
             iMouse: { value: new THREE.Vector2(0.0,0.0) },
             iChannel0: { value: texture },
+            shadervariation: { value: shadervariation },
         };
 
         const material = new THREE.ShaderMaterial( {
@@ -504,6 +646,7 @@
         const canvas = document.querySelector('#hecksshader');
         renderer = new THREE.WebGLRenderer({antialias: true, canvas});
         document.addEventListener( 'pointermove', onPointerMove);
+        reset_perftime();
     }
 
     function onPointerMove(event) {
@@ -522,6 +665,14 @@
         return true;
     }
 
+    function reset_perftime() {
+        perftime_offset = performance.now();
+    }
+
+    function get_perftime() {
+        return performance.now() - perftime_offset;
+    }
+
     function render() {
         requestAnimationFrame( render );
 
@@ -533,9 +684,12 @@
             uniforms['iResolution'].value = new THREE.Vector2( canvas.clientWidth / downsample_quality, canvas.clientHeight / downsample_quality );
         }
 
-        uniforms[ 'iTime' ].value = performance.now();
+        uniforms[ 'iTime' ].value = get_perftime();
         renderer.render( scene, camera );
     }
+
+    init();
+    render();
 </script>
 </body>
 </html>