From 031247c76f8001e38e7b154d11b50d6068ab5f8c Mon Sep 17 00:00:00 2001 From: min Date: Thu, 11 Sep 2025 15:44:52 -0400 Subject: [PATCH] cut off --- js/main.js | 2 +- shader/bg.frag | 38 +++++++++++++++++++++++++++++--------- 2 files changed, 30 insertions(+), 10 deletions(-) diff --git a/js/main.js b/js/main.js index b44bd65..3b235db 100644 --- a/js/main.js +++ b/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); diff --git a/shader/bg.frag b/shader/bg.frag index 5da5c1e..7042bd7 100644 --- a/shader/bg.frag +++ b/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); }