cut off

js/main.js

@@ -6,7 +6,7 @@ var gl = canvas.getContext("webgl", {
 });
 
 function resizeCanvas() {
-  const scl = (p) => Math.trunc(p / 2);
+  const scl = (p) => Math.trunc(p / 4);
 
   var width = scl(gl.canvas.clientWidth);
   var height = scl(gl.canvas.clientHeight);

shader/bg.frag

@@ -3,10 +3,14 @@ precision mediump float;
 uniform float u_time;
 uniform vec2 u_resolution;
 
+const float PI = 3.1415926535897932384626433832795;
 const vec2 zero = vec2(0.0);
 
-const vec4 darker = vec4(0.0235, 0.0274, 0.0549, 1.0);
-const vec4 lighter = vec4(0.1058, 0.1137, 0.1450, 1.0);
+// const vec4 darker = vec4(0.0235, 0.0274, 0.0549, 1.0);
+// const vec4 lighter = vec4(0.1058, 0.1137, 0.1450, 1.0);
+
+const vec4 darker = vec4(0.01, 0.01, 0.01, 1.0);
+const vec4 lighter = vec4(0.05, 0.05, 0.05, 1.0);
 
 vec3 mod289(vec3 x) {
     return x - floor(x * (1.0 / 289.0)) * 289.0;
@@ -54,8 +58,7 @@ void main() {
     vec2 scale2square = u_resolution / vec2(shortside);
 
     // subtract center to avoid misalignment
-    vec2 hereuncenter = gl_FragCoord.xy - center;
-    vec2 herescaled = (hereuncenter / scale2square) + center;
+    vec2 herescaled = ((gl_FragCoord.xy - center) / scale2square) + center;
 
     // get distance from center
     float dist = distance(herescaled, center);
@@ -63,17 +66,34 @@ void main() {
 
     // at lower clock values, we make vignette gradient denser
     // (at kinda slow rate for a breathing effect)
-    float slowtime = u_time / 2.0;
+    float slowtime = u_time / 1.3;
     float timing = sin(slowtime) + 1.0;
-    float vig = distf + mix(-0.05, 0.0, timing);
+    // map 0-1 timing value into a slight offset
+    float vig = distf + mix(-0.18, -0.1, timing);
+
+    // get coords relative to center, and then get angle
+    vec2 herer2c = herescaled - center;
+    float angle = atan(herer2c.y, herer2c.x);
+
+    // determine our cutoff based on this
+    // so it looks wavy
+    float cut = 0.2 + (0.02 * sin(20.0 * angle));
+
+    // apply cutoff if we are too close to center
+    float vigc = vig * step(0.2, vig);
 
     // randomize noise pattern every second ish
     float fasttime = u_time * 1.1;
     float second = floor(fasttime);
-    float noise = snoise(vec2(herescaled.x * herescaled.y, second));
+    float noise = snoise(vec2(gl_FragCoord.x * gl_FragCoord.y, second));
 
     // blend noise and gradient
-    float final = (1.0 - vig) - noise * 0.9;
+    float final = (1.0 - vigc); // - (noise * 0.9);
+    // quantize
+    float finalq = final;
+    // float finalq = floor(final);
 
-    gl_FragColor = mix(darker, lighter, final);
+    gl_FragColor = mix(darker, lighter, finalq);
+    // vec2 c = gl_FragCoord.xy - center;
+    // gl_FragColor = vec4(vec3(smoothstep(-PI, PI, atan(c.y, c.x))), 1.0);
 }