From 02547b888f1ea9957eb548fdffb808e9332e4d56 Mon Sep 17 00:00:00 2001 From: noe Date: Wed, 1 May 2024 01:42:35 -0400 Subject: [PATCH] 0005: hide alt3 --- html/005-thoughtform-hidenoe/main.js | 11 ++--- src/005-thoughtform-hidenoe/main.ts | 20 +++++---- .../shaders/outer-alt3.frag | 45 +++++++++++++++++++ src/005-thoughtform-hidenoe/shaders/outer.ts | 10 ++++- 4 files changed, 71 insertions(+), 15 deletions(-) create mode 100644 src/005-thoughtform-hidenoe/shaders/outer-alt3.frag diff --git a/html/005-thoughtform-hidenoe/main.js b/html/005-thoughtform-hidenoe/main.js index 4d119a9..0cad586 100644 --- a/html/005-thoughtform-hidenoe/main.js +++ b/html/005-thoughtform-hidenoe/main.js @@ -1,5 +1,6 @@ -import{d as D,e as j,f as i,g as J,h as z,i as y,k as B,m as O,n as K} from"../chunk-419236ae98000e07.js";var E=new O({colors:null,faces:new Uint8Array([0,1,2,0,3,1]),name:"src/meshes/plane.ply",normals:null,positions:new Float32Array([1,-1,0,-1,1,0,-1,-1,0,1,1,0]),uvs:new Float32Array([1,0,0,1,0,0,1,1]),vertexCount:4});var Q=`#version 300 es -precision highp float;uniform float u_time;in vec2 uv0;out vec4 fragColor;vec2 squareImaginary(vec2 number,float mod){return vec2(pow(number.x*mod,2.0)-pow(number.y*mod,2.0),2.0*number.x*number.y);}float iterateMandelbrot(vec2 coord){vec2 z=vec2(0,0);float maxIterations=100.0;for(float i=0.0;i2.0)return i/float(maxIterations);}return maxIterations;}void main(){vec2 uvMirror=abs(uv0*2.0-1.0);fragColor=vec4(0.0);float mandelbrot=iterateMandelbrot((uvMirror.xy+vec2(0.14,-0.525))*0.9);fragColor.r=mandelbrot;vec2 outerNoise=(mandelbrot)*(1.0-uvMirror*0.5);fragColor.gb+=(1.0-mandelbrot)*outerNoise;fragColor.r+=pow(1.0-length(uvMirror),8.0);fragColor.a=1.0;}`;var u={attributes:{vertex:"a_vertex",uv0:"a_uv0",normal:"a_normal",vertexColor:"a_vertex_color"},uniforms:{view:"u_view",projection:"u_projection",objectToWorld:"u_object_to_world",objectToWorldInv:"u_object_to_world_inv",light0:"u_light_0",light0Color:"u_light_0_color",time:"u_time",albedo:"u_albedo",texture0:"u_texture_0",texture1:"u_texture_1",texture2:"u_texture_2"}},U=(_)=>new y(u).vertex(B).fragment(Q).app(_);var F=`#version 300 es -precision highp float;uniform float u_time;in vec2 uv0;in vec3 light_pos;out vec4 fragColor;const float margin=0.5;vec3 hsv2rgb(vec3 c){vec4 K=vec4(1.0,2.0/3.0,1.0/3.0,3.0);vec3 p=abs(fract(c.xxx+K.xyz)*6.0-K.www);return c.z*mix(K.xxx,clamp(p-K.xxx,0.0,1.0),c.y);}void main(){vec2 cUV=uv0*2.0-1.0;float circleDistance=length(cUV);if(circleDistance>margin){discard;}float theta=atan(cUV.y,cUV.x);float spiral=sin(100.0*(sqrt(circleDistance*20.0)-10.0*theta-0.01*u_time*0.001));float edgeLightZone=pow(clamp(abs(dot(cUV.xyx,light_pos)),0.0,1.0)*2.0,4.0);float colorSpiral=sin(100.0*(sqrt(circleDistance*10.0)-0.001*theta-0.3*u_time*0.00005));vec3 hueRotation=hsv2rgb(vec3(colorSpiral,1.0,0.5));fragColor=vec4(hueRotation*spiral*edgeLightZone,1.0);fragColor.rgb+=min(spiral,0.0041666);}`;var V=`#version 300 es -precision highp float;uniform float u_time;in vec2 uv0;in vec3 light_pos;out vec4 fragColor;const float margin=0.5;vec3 hsv2rgb(vec3 c){vec4 K=vec4(1.0,2.0/3.0,1.0/3.0,3.0);vec3 p=abs(fract(c.xxx+K.xyz)*6.0-K.www);return c.z*mix(K.xxx,clamp(p-K.xxx,0.0,1.0),c.y);}void main(){vec2 cUV=uv0*2.0-1.0;float circleDistance=length(cUV);if(circleDistance>margin){discard;}float theta=atan(cUV.y,cUV.x);float spiral=sin(100.0*(sqrt(circleDistance*20.0)-10.0*theta-0.01*u_time*0.001));float edgeLightZone=pow(clamp(abs(dot(cUV.xyx,light_pos)),0.0,1.0)*2.0,4.0);float colorSpiral=sin(100.0*(sqrt(circleDistance*10.0)-0.001*theta-0.3*u_time*0.00005));vec3 hueRotation=hsv2rgb(vec3(colorSpiral,1.0,0.5));fragColor=vec4(colorSpiral,spiral,1.0,1.0);}`;var Z=`#version 300 es -precision highp float;uniform float u_time;in vec2 uv0;in vec3 light_pos;out vec4 fragColor;const float margin=0.9;vec3 hsv2rgb(vec3 c){vec4 K=vec4(1.0,2.0/3.0,1.0/3.0,3.0);vec3 p=abs(fract(c.xxx+K.xyz)*6.0-K.www);return c.z*mix(K.xxx,clamp(p-K.xxx,0.0,1.0),c.y);}void main(){vec2 cUV=uv0*2.0-1.0;float circleDistance=length(cUV);if(circleDistance>margin){discard;}float theta=atan(cUV.y,cUV.x);float spiral=sin(100.0*(sqrt(circleDistance*13.0)-(u_time*0.0001)*theta-0.01*u_time*0.001));float colorSpiral=sin(100.0*(sqrt(circleDistance*10.0)-0.001*theta-0.3*u_time*0.00005));fragColor=vec4(0,spiral,0,1.0);}`;var T={attributes:{vertex:"a_vertex",uv0:"a_uv0",normal:"a_normal",vertexColor:"a_vertex_color"},uniforms:{view:"u_view",projection:"u_projection",objectToWorld:"u_object_to_world",objectToWorldInv:"u_object_to_world_inv",light0:"u_light_0",light0Color:"u_light_0_color",time:"u_time",albedo:"u_albedo",texture0:"u_texture_0",texture1:"u_texture_1",texture2:"u_texture_2"}},C={normal:F,debug:V,alt2:Z},$=(_,k=F)=>new y(T).vertex(B).fragment(k).app(_);var x=new z({fov:45}),G=new D([0,0,2],j([0,0,0])),I=new D([1,-1,0],j([0,0,0])),c=new D(i(0),j([0,180,0]),i(1.8)),o=new D(i(0),j([0,180,180]),i(0.6));document.body.addEventListener("mousemove",(_)=>{const{clientX:k,clientY:H}=_,{clientWidth:L,clientHeight:P}=document.body,w=k/L,A=H/P,M=w*2-1,W=A*2-1;I.position[1]=M,I.position[0]=W});x.onUpdate((_,k)=>{});new K(x,c,new J(x,E,U(x),G).configure({}));var N=C.normal;if(location.search.includes("alt1"))N=C.debug;if(location.search.includes("alt2"))N=C.alt2;new K(x,o,new J(x,E,$(x,N),G,I).configure({}));x.start(); +import{d as C,e as D,f as j,g as O,h as G,i as I,k,m as V,n as Q} from"../chunk-419236ae98000e07.js";var B=new V({colors:null,faces:new Uint8Array([0,1,2,0,3,1]),name:"src/meshes/plane.ply",normals:null,positions:new Float32Array([1,-1,0,-1,1,0,-1,-1,0,1,1,0]),uvs:new Float32Array([1,0,0,1,0,0,1,1]),vertexCount:4});var E=`#version 300 es +precision highp float;uniform float u_time;in vec2 uv0;out vec4 fragColor;vec2 squareImaginary(vec2 number,float mod){return vec2(pow(number.x*mod,2.0)-pow(number.y*mod,2.0),2.0*number.x*number.y);}float iterateMandelbrot(vec2 coord){vec2 z=vec2(0,0);float maxIterations=100.0;for(float i=0.0;i2.0)return i/float(maxIterations);}return maxIterations;}void main(){vec2 uvMirror=abs(uv0*2.0-1.0);fragColor=vec4(0.0);float mandelbrot=iterateMandelbrot((uvMirror.xy+vec2(0.14,-0.525))*0.9);fragColor.r=mandelbrot;vec2 outerNoise=(mandelbrot)*(1.0-uvMirror*0.5);fragColor.gb+=(1.0-mandelbrot)*outerNoise;fragColor.r+=pow(1.0-length(uvMirror),8.0);fragColor.a=1.0;}`;var Z=`#version 300 es +precision highp float;uniform float u_time;in vec2 uv0;out vec4 fragColor;vec2 squareImaginary(vec2 number,float mod){return vec2(pow(number.x*mod,2.0)-pow(number.y*mod,2.0),2.0*number.x*number.y);}float iterateMandelbrot(vec2 coord){vec2 z=vec2(0,0);float maxIterations=69.0;for(float i=0.0;i100.0)return i/float(maxIterations);}return maxIterations;}void main(){vec2 uvMirror=abs(uv0*2.0-1.0);fragColor=vec4(0.0);float mandelbrot=iterateMandelbrot((uvMirror.yx-vec2(-1.075,1.0))*0.9);fragColor.r=mandelbrot;vec2 outerNoise=(mandelbrot)*(1.0-uvMirror*0.5);fragColor.gb+=(1.0-mandelbrot)*outerNoise;fragColor.a=1.0;}`;var T={attributes:{vertex:"a_vertex",uv0:"a_uv0",normal:"a_normal",vertexColor:"a_vertex_color"},uniforms:{view:"u_view",projection:"u_projection",objectToWorld:"u_object_to_world",objectToWorldInv:"u_object_to_world_inv",light0:"u_light_0",light0Color:"u_light_0_color",time:"u_time",albedo:"u_albedo",texture0:"u_texture_0",texture1:"u_texture_1",texture2:"u_texture_2"}},J={normal:E,alt3:Z},$=(x,_=E)=>new I(T).vertex(k).fragment(_).app(x);var K=`#version 300 es +precision highp float;uniform float u_time;in vec2 uv0;in vec3 light_pos;out vec4 fragColor;const float margin=0.5;vec3 hsv2rgb(vec3 c){vec4 K=vec4(1.0,2.0/3.0,1.0/3.0,3.0);vec3 p=abs(fract(c.xxx+K.xyz)*6.0-K.www);return c.z*mix(K.xxx,clamp(p-K.xxx,0.0,1.0),c.y);}void main(){vec2 cUV=uv0*2.0-1.0;float circleDistance=length(cUV);if(circleDistance>margin){discard;}float theta=atan(cUV.y,cUV.x);float spiral=sin(100.0*(sqrt(circleDistance*20.0)-10.0*theta-0.01*u_time*0.001));float edgeLightZone=pow(clamp(abs(dot(cUV.xyx,light_pos)),0.0,1.0)*2.0,4.0);float colorSpiral=sin(100.0*(sqrt(circleDistance*10.0)-0.001*theta-0.3*u_time*0.00005));vec3 hueRotation=hsv2rgb(vec3(colorSpiral,1.0,0.5));fragColor=vec4(hueRotation*spiral*edgeLightZone,1.0);fragColor.rgb+=min(spiral,0.0041666);}`;var q=`#version 300 es +precision highp float;uniform float u_time;in vec2 uv0;in vec3 light_pos;out vec4 fragColor;const float margin=0.5;vec3 hsv2rgb(vec3 c){vec4 K=vec4(1.0,2.0/3.0,1.0/3.0,3.0);vec3 p=abs(fract(c.xxx+K.xyz)*6.0-K.www);return c.z*mix(K.xxx,clamp(p-K.xxx,0.0,1.0),c.y);}void main(){vec2 cUV=uv0*2.0-1.0;float circleDistance=length(cUV);if(circleDistance>margin){discard;}float theta=atan(cUV.y,cUV.x);float spiral=sin(100.0*(sqrt(circleDistance*20.0)-10.0*theta-0.01*u_time*0.001));float edgeLightZone=pow(clamp(abs(dot(cUV.xyx,light_pos)),0.0,1.0)*2.0,4.0);float colorSpiral=sin(100.0*(sqrt(circleDistance*10.0)-0.001*theta-0.3*u_time*0.00005));vec3 hueRotation=hsv2rgb(vec3(colorSpiral,1.0,0.5));fragColor=vec4(colorSpiral,spiral,1.0,1.0);}`;var w=`#version 300 es +precision highp float;uniform float u_time;in vec2 uv0;in vec3 light_pos;out vec4 fragColor;const float margin=0.9;vec3 hsv2rgb(vec3 c){vec4 K=vec4(1.0,2.0/3.0,1.0/3.0,3.0);vec3 p=abs(fract(c.xxx+K.xyz)*6.0-K.www);return c.z*mix(K.xxx,clamp(p-K.xxx,0.0,1.0),c.y);}void main(){vec2 cUV=uv0*2.0-1.0;float circleDistance=length(cUV);if(circleDistance>margin){discard;}float theta=atan(cUV.y,cUV.x);float spiral=sin(100.0*(sqrt(circleDistance*13.0)-(u_time*0.0001)*theta-0.01*u_time*0.001));float colorSpiral=sin(100.0*(sqrt(circleDistance*10.0)-0.001*theta-0.3*u_time*0.00005));fragColor=vec4(0,spiral,0,1.0);}`;var b={attributes:{vertex:"a_vertex",uv0:"a_uv0",normal:"a_normal",vertexColor:"a_vertex_color"},uniforms:{view:"u_view",projection:"u_projection",objectToWorld:"u_object_to_world",objectToWorldInv:"u_object_to_world_inv",light0:"u_light_0",light0Color:"u_light_0_color",time:"u_time",albedo:"u_albedo",texture0:"u_texture_0",texture1:"u_texture_1",texture2:"u_texture_2"}},y={normal:K,debug:q,alt2:w},z=(x,_=K)=>new I(b).vertex(k).fragment(_).app(x);var i=new G({fov:45}),H=new C([0,0,2],D([0,0,0])),N=new C([1,-1,0],D([0,0,0])),o=new C(j(0),D([0,180,0]),j(1.8)),m=new C(j(0),D([0,180,180]),j(0.6));document.body.addEventListener("mousemove",(x)=>{const{clientX:_,clientY:P}=x,{clientWidth:c,clientHeight:F}=document.body,M=_/c,W=P/F,A=M*2-1,X=W*2-1;N.position[1]=A,N.position[0]=X});i.onUpdate((x,_)=>{});var U=y.normal,L=J.normal;if(location.search.includes("alt1"))U=y.debug;if(location.search.includes("alt2"))U=y.alt2;if(location.search.includes("alt3"))L=J.alt3;new Q(i,o,new O(i,B,$(i,L),H).configure({}));new Q(i,m,new O(i,B,z(i,U),H,N).configure({}));i.start(); diff --git a/src/005-thoughtform-hidenoe/main.ts b/src/005-thoughtform-hidenoe/main.ts index 507c1f7..8fa8ba3 100644 --- a/src/005-thoughtform-hidenoe/main.ts +++ b/src/005-thoughtform-hidenoe/main.ts @@ -3,7 +3,7 @@ import { WebGLApp } from "../renderer/webgl"; import { Renderable } from "../renderer/renderable"; import { Transform, etoq, v3 } from "../renderer/transform"; import plane from "../meshes/plane"; -import { outer } from "./shaders/outer"; +import { outer, outerFrags } from "./shaders/outer"; import { frags, noe } from "./shaders/noe"; import { createGizmo } from "../renderer/gizmo"; @@ -32,14 +32,8 @@ document.body.addEventListener("mousemove", (event) => { app.onUpdate((time, app) => {}); -new Renderable( - app, - transformPlane, - new MeshRenderer(app, plane, outer(app), camera).configure({}) -); - let noeShader = frags.normal; - +let hShader = outerFrags.normal; if (location.search.includes("alt1")) { noeShader = frags.debug; } @@ -48,6 +42,16 @@ if (location.search.includes("alt2")) { noeShader = frags.alt2; } +if (location.search.includes("alt3")) { + hShader = outerFrags.alt3; +} + +new Renderable( + app, + transformPlane, + new MeshRenderer(app, plane, outer(app, hShader), camera).configure({}) +); + new Renderable( app, transformSphere, diff --git a/src/005-thoughtform-hidenoe/shaders/outer-alt3.frag b/src/005-thoughtform-hidenoe/shaders/outer-alt3.frag new file mode 100644 index 0000000..0060862 --- /dev/null +++ b/src/005-thoughtform-hidenoe/shaders/outer-alt3.frag @@ -0,0 +1,45 @@ +#version 300 es +precision highp float; + +uniform float u_time; + +in vec2 uv0; + +out vec4 fragColor; + +vec2 squareImaginary(vec2 number, float mod){ + return vec2( + pow(number.x * mod,2.0) - pow(number.y * mod, 2.0), + 2.0 * number.x * number.y + ); +} + +float iterateMandelbrot(vec2 coord){ + vec2 z = vec2(0,0); + float maxIterations = 69.0; + + for (float i = 0.0; i < maxIterations; i++) { + // float factor = cos((1.3*6.0) * sin(u_time * 0.0005)); + float mod = u_time * 0.0003; + // mod = 0.5; + z = squareImaginary(z, 1.0/mod) + coord; + if (length(z) > 100.0) return i / float(maxIterations); + } + + return maxIterations; +} + +void main() { + // uv0 is 0..1, we want to denormalize this to -1..1 + vec2 uvMirror = abs(uv0 * 2.0 - 1.0); + fragColor = vec4(0.0); + float mandelbrot = iterateMandelbrot((uvMirror.yx - vec2(-1.075, 1.0)) * 0.9); + fragColor.r = mandelbrot; + + vec2 outerNoise = (mandelbrot) * (1.0 - uvMirror * 0.5); + fragColor.gb += (1.0 - mandelbrot) * outerNoise; + + // fragColor.r += pow(1.0 - length(uvMirror), 18.0); + + fragColor.a = 1.0; +} diff --git a/src/005-thoughtform-hidenoe/shaders/outer.ts b/src/005-thoughtform-hidenoe/shaders/outer.ts index c81534f..de15303 100644 --- a/src/005-thoughtform-hidenoe/shaders/outer.ts +++ b/src/005-thoughtform-hidenoe/shaders/outer.ts @@ -2,6 +2,7 @@ import { Shader, ShaderConfig } from "../../renderer/shader"; import { WebGLApp } from "../../renderer/webgl"; import vert from "../../common-shaders/basic.vert"; import frag from "./outer.frag"; +import fragAlt3 from "./outer-alt3.frag"; export const basicShaderConfig: ShaderConfig = { attributes: { @@ -26,5 +27,10 @@ export const basicShaderConfig: ShaderConfig = { }, }; -export const outer = (app: WebGLApp) => - new Shader(basicShaderConfig).vertex(vert).fragment(frag).app(app); +export const outerFrags = { + normal: frag, + alt3: fragAlt3, +}; + +export const outer = (app: WebGLApp, fragShader: string = frag) => + new Shader(basicShaderConfig).vertex(vert).fragment(fragShader).app(app);