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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 209
      html/css/fontred.css
  2. 217
      html/css/fontwhite.css
  3. 522
      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');*/
/*}*/

522
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://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,8 +59,23 @@
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);
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
///////////////////
// SHADER variationS
///////////////////
void hallucinate_1(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = fragCoord.xy / iResolution.y;
vec2 uvm = iMouse.xy / iResolution.y;
@ -71,227 +88,292 @@
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;
}
#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 {
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;
}
float time = 30.+(3. * pow(cos(iTime / 23000.),2.));
.card {
background-color: transparent;
width: 100%;
margin-top: 0vh;
margin-bottom: 0vh;
border: 0px solid #dee2e6 !important;
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.));
.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 val = sin(noiseVal * time + (sin(time) * time / 10.));
val = 2./time2/val;
val *= 0.4;
fragColor.rgba = vec4(val,0.,0.,1.0);
}
.flyer {
opacity: 0.8;
}
void bentorbits(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = fragCoord.xy / iResolution.y;
vec2 uvm = iMouse.xy / iResolution.y;
.logo {
margin-left: auto;
margin-right: auto;
padding-bottom: 0vh;
width: 50%;
display: block;
}
float time = 20.98 - (.33 * mod(pow(fsin(iTime / 150000.), 2.), 1.));
.card-title {
font-family: 'Lato black', sans-serif;
color: #ef3333;
font-size: 1.3rem;
}
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.));
.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;
float val = fsin(noiseVal * time + (fsin(time) * time / 10.));
val =180./time2/val;
val *= 0.1;
fragColor.rgba = vec4(val,0.,0.,1.0);
}
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;
}
void debris(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = fragCoord.xy / iResolution.y;
vec2 uvm = iMouse.xy / iResolution.y;
float tstart = 300000. + iTime;
float t = 300000.+ pow(tstart,2.)*1000.;
float time = 400.98 - (.33 * mod(pow(sin(t * 1500000.), 2.), 1.));
h5 {
text-transform: uppercase;
font-size: 0.1rem;
color: #c00606;
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.));
float val = sin((noiseVal * time + (sin(time2*100.) * time2/100000000.))/.001);
fragColor.rgba = vec4(.001/time2/val, 0., 0., 1.0);
}
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 decorationgoeslsd(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = fragCoord.xy / iResolution.y;
vec2 uvm = iMouse.xy / iResolution.y;
float time = 0.98+(20. * pow(cos(iTime / 200000.),2.));
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.));
float val = sin(noiseVal * time + (sin(time) * time / 10.));
val = 18./time2/val;
val *= 0.12;
fragColor.rgba = vec4(val,0.,0.,1.0);
}
li {
font-family: 'trench', sans-serif;
letter-spacing: 0.06em;
text-transform: capitalize;
font-size: 1.23em;
color: #c20606;
void camousmudgy(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,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.));
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);
}
img {
width: 100%;
void flashsmudgy(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = fragCoord.xy / iResolution.y;
vec2 uvm = iMouse.xy / iResolution.y;
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);
}
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.));
a:link {
color: #dddddd;
// 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:visited {
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:hover {
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);
}
a:active {
color: #dddddd;
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.));
float val = sin(noiseVal * time + (fsin(time) * time / 10.));
fragColor.rgba = vec4(180./time2/val, 0., 0., 1.0);
}
void noiseinfection(out vec4 fragColor, in vec2 fragCoord) {
vec2 uv = fragCoord.xy / iResolution.y;
vec2 uvm = iMouse.xy / iResolution.y;
.row {
margin-left: 0;
margin-right: 0;
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);
}
.col-12 {
padding-left: 3vw;
padding-right: 3vw;
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);
}
.fas, .fab {
color: #dddddd;
font-size: 2em;
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);
}
a, u {
text-decoration: none;
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);
}
</style>
// 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>
@ -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.;
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();
render();
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>

Write Preview
Loading…
Cancel
Save