subfactory
/
subfactory.ch
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add shader variations and keyboard controls 

[0-9] - choose shader variation
Arrow Right - next shader variation
Arrow Left - previous shader variation
Esc - restart shader
heck 4 weeks ago
parent
c5c824e6bd
commit
9fd2fbff64
3 changed files with 761 additions and 181 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 209
      html/css/fontred.css
  2. 217
      html/css/fontwhite.css
  3. 516
      html/index.html

209
html/css/fontred.css
View File

@ -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;
}

217
html/css/fontwhite.css
View File

@ -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');*/
/*}*/

516
html/index.html
View File

@ -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://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="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
<link rel="stylesheet" href="css/fontred.css">
<!-- Shaders --> <!-- Shaders -->
<script id="vertexShader" type="x-shader/x-vertex"> <script id="vertexShader" type="x-shader/x-vertex">
@ -31,6 +32,7 @@
uniform vec2 iMouse; uniform vec2 iMouse;
uniform vec2 iResolution; uniform vec2 iResolution;
uniform sampler2D iChannel0; uniform sampler2D iChannel0;
uniform int shadervariation;
vec2 GetGradient(vec2 intPos, float t) { vec2 GetGradient(vec2 intPos, float t) {
float rand = texture(iChannel0, intPos / 64.0).r * 4.0; float rand = texture(iChannel0, intPos / 64.0).r * 4.0;
@ -57,241 +59,321 @@
return noiseVal / 0.7; 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 uv = fragCoord.xy / iResolution.y;
vec2 uvm = iMouse.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 = Pseudo3dNoise(vec3(uv, time));
// float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/1.)); // 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.)); float val = sin(noiseVal * time + (sin(time) * time / 10.));
val = 18./time2/val; val = 18./time2/val;
// val = smoothstep(1.,23.,val); val *= 0.25;
fragColor.rgba = vec4(val,0.,0.,1.0); fragColor.rgba = vec4(val,0.,0.,1.0);
} }
void main() { void hallucinate_2(out vec4 fragColor, in vec2 fragCoord) {
mainImage(gl_FragColor, gl_FragCoord.xy); vec2 uv = fragCoord.xy / iResolution.y;
} vec2 uvm = iMouse.xy / iResolution.y;
</script>
<style> float time = 30.+(3. * pow(cos(iTime / 23000.),2.));
body {
background-color: #000000;
opacity: 0.98;
}
#hecksshader { float noiseVal = Pseudo3dNoise(vec3(uv, time));
width: 100%; float time2 = 3.+(3000. * pow(cos(iTime / noiseVal/3000.),2.));
height: 100%; // float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/10.));
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -899;
opacity: 0.9999;
}
.aliasingdiv { float val = sin(noiseVal * time + (sin(time) * time / 10.));
background-color: #040000; val = 2./time2/val;
width: 100%; val *= 0.4;
height: 100%; fragColor.rgba = vec4(val,0.,0.,1.0);
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -899;
opacity: 0.75;
} }
.toningdiv { void bentorbits(out vec4 fragColor, in vec2 fragCoord) {
background-color: #0000ff; vec2 uv = fragCoord.xy / iResolution.y;
width: 100%; vec2 uvm = iMouse.xy / iResolution.y;
height: 100%;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 899;
opacity: 0.0;
}
.brightnessdiv { float time = 20.98 - (.33 * mod(pow(fsin(iTime / 150000.), 2.), 1.));
background-color: #ffffff;
width: 100%;
height: 100%;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 999;
opacity: 0.05;
}
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 { float val = fsin(noiseVal * time + (fsin(time) * time / 10.));
background-color: transparent; val =180./time2/val;
width: 100%; val *= 0.1;
margin-top: 0vh; fragColor.rgba = vec4(val,0.,0.,1.0);
margin-bottom: 4vh;
border-top: 0px none #ffffff !important;
opacity: 0.999;
} }
.section { void debris(out vec4 fragColor, in vec2 fragCoord) {
background-color: transparent; vec2 uv = fragCoord.xy / iResolution.y;
width: 100%; vec2 uvm = iMouse.xy / iResolution.y;
margin-top: 0vh;
margin-bottom: 0vh;
border-top: 0px none #ffffff !important;
opacity: 0.9999;
}
.card { float tstart = 300000. + iTime;
background-color: transparent; float t = 300000.+ pow(tstart,2.)*1000.;
width: 100%; float time = 400.98 - (.33 * mod(pow(sin(t * 1500000.), 2.), 1.));
margin-top: 0vh;
margin-bottom: 0vh;
border: 0px solid #dee2e6 !important;
opacity: 0.9999;
}
.card-body { float noiseVal = Pseudo3dNoise(vec3(uv, time));
background-color: #030306; // float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/1.));
margin-top: 0vh; // float time2 = 10000. - (20000. * pow(fcos(t / noiseVal/64400.), 2.));
margin-bottom: 0vh; float time2 = 10000. - (20000. * pow(cos(t / noiseVal/6440000.), 2.));
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 { float val = sin((noiseVal * time + (sin(time2*100.) * time2/100000000.))/.001);
opacity: 0.8; fragColor.rgba = vec4(.001/time2/val, 0., 0., 1.0);
} }
.logo { void decorationgoeslsd(out vec4 fragColor, in vec2 fragCoord) {
margin-left: auto; vec2 uv = fragCoord.xy / iResolution.y;
margin-right: auto; vec2 uvm = iMouse.xy / iResolution.y;
padding-bottom: 0vh;
width: 50%;
display: block;
}
.card-title { float time = 0.98+(20. * pow(cos(iTime / 200000.),2.));
font-family: 'Lato black', sans-serif;
color: #ef3333;
font-size: 1.3rem;
}
.osmmap { float noiseVal = Pseudo3dNoise(vec3(uv, time));
opacity: 0.5; // 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 { float val = sin(noiseVal * time + (sin(time) * time / 10.));
font-family: 'Lato black', sans-serif; val = 18./time2/val;
font-size: 1.42rem; val *= 0.12;
letter-spacing: 0.14em; fragColor.rgba = vec4(val,0.,0.,1.0);
text-transform: uppercase;
color: #901010;
margin-top: 1vh;
margin-bottom: 0vh;
} }
h5 {
text-transform: uppercase;
font-size: 0.1rem;
color: #c00606;
}
p { void camousmudgy(out vec4 fragColor, in vec2 fragCoord) {
font-family: 'trench', sans-serif; vec2 uv = fragCoord.xy / iResolution.y;
letter-spacing: 0.06em; vec2 uvm = iMouse.xy / iResolution.y;
font-size: 1.21em;
color: #c20606;
hyphens: none;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
li { float tstart = 600. + iTime;
font-family: 'trench', sans-serif; float t = pow(tstart,1.9)*100.;
letter-spacing: 0.06em; float time = 0.98 - (.33 * mod(pow(sin(t * 1500.), 2.), 1.));
text-transform: capitalize;
font-size: 1.23em; // float noiseVal = Pseudo3dNoise(vec3(uv, time));
color: #c20606; 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 { float val = sin((noiseVal * time + (sin(time2*100.) * time2/100000000.))/.001);
width: 100%; 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 { void interfields(out vec4 fragColor, in vec2 fragCoord) {
color: #dddddd; 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 { void flashbang(out vec4 fragColor, in vec2 fragCoord) {
color: #dddddd; 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 { void glitchbang(out vec4 fragColor, in vec2 fragCoord) {
color: #dddddd; 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 { float val = sin(noiseVal * time + (fsin(time) * time / 10.));
margin-left: 0; fragColor.rgba = vec4(180./time2/val, 0., 0., 1.0);
margin-right: 0;
} }
.col-12 { void noiseinfection(out vec4 fragColor, in vec2 fragCoord) {
padding-left: 3vw; vec2 uv = fragCoord.xy / iResolution.y;
padding-right: 3vw; 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 { void orion(out vec4 fragColor, in vec2 fragCoord) {
color: #dddddd; vec2 uv = fragCoord.xy / iResolution.y;
font-size: 2em; 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 { void tvshutdown(out vec4 fragColor, in vec2 fragCoord) {
text-decoration: none; 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> </head>
<body> <body>
@ -301,7 +383,7 @@
<div class="aliasingdiv"></div> <div class="aliasingdiv"></div>
<div class="container"> <div class="container">
<br> <br>
<div class="img flyer"> <div class="img flyer">
<img src="resources/Sub_Factory_2025.webp" alt="Subfactory Banner"> <img src="resources/Sub_Factory_2025.webp" alt="Subfactory Banner">
</div> </div>
@ -466,7 +548,6 @@
<!--<script>--> <!--<script>-->
<!-- document.getElementById("focus").focus();--> <!-- document.getElementById("focus").focus();-->
<!--</script>--> <!--</script>-->
<script type="module"> <script type="module">
import * as THREE from 'https://unpkg.com/three/build/three.module.js'; import * as THREE from 'https://unpkg.com/three/build/three.module.js';
@ -474,10 +555,70 @@
let uniforms; let uniforms;
let texture; let texture;
let downsample_quality = 1.; let downsample_quality = 1.;
init(); let perftime_offset = 0;
render();
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() { function init() {
console.log('shader init with variation:', shadervariation );
camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 ); camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
scene = new THREE.Scene(); scene = new THREE.Scene();
const geometry = new THREE.PlaneGeometry( 2, 2 ); const geometry = new THREE.PlaneGeometry( 2, 2 );
@ -491,6 +632,7 @@
iResolution: { value: new THREE.Vector2(1.0,1.0) }, iResolution: { value: new THREE.Vector2(1.0,1.0) },
iMouse: { value: new THREE.Vector2(0.0,0.0) }, iMouse: { value: new THREE.Vector2(0.0,0.0) },
iChannel0: { value: texture }, iChannel0: { value: texture },
shadervariation: { value: shadervariation },
}; };
const material = new THREE.ShaderMaterial( { const material = new THREE.ShaderMaterial( {
@ -504,6 +646,7 @@
const canvas = document.querySelector('#hecksshader'); const canvas = document.querySelector('#hecksshader');
renderer = new THREE.WebGLRenderer({antialias: true, canvas}); renderer = new THREE.WebGLRenderer({antialias: true, canvas});
document.addEventListener( 'pointermove', onPointerMove); document.addEventListener( 'pointermove', onPointerMove);
reset_perftime();
} }
function onPointerMove(event) { function onPointerMove(event) {
@ -522,6 +665,14 @@
return true; return true;
} }
function reset_perftime() {
perftime_offset = performance.now();
}
function get_perftime() {
return performance.now() - perftime_offset;
}
function render() { function render() {
requestAnimationFrame( render ); requestAnimationFrame( render );
@ -533,9 +684,12 @@
uniforms['iResolution'].value = new THREE.Vector2( canvas.clientWidth / downsample_quality, canvas.clientHeight / downsample_quality ); 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 ); renderer.render( scene, camera );
} }
init();
render();
</script> </script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save