From bdacfc0f5f6c24b62ca45bc4342fc561e5f56290 Mon Sep 17 00:00:00 2001 From: noe Date: Tue, 30 Apr 2024 23:51:19 -0400 Subject: [PATCH] 0005: noe mouse follow, tighten hide glow --- html/005-thoughtform-hidenoe/main.js | 8 +++--- src/005-thoughtform-hidenoe/main.ts | 25 +++++++++++++++---- .../shaders/outer.frag | 2 +- 3 files changed, 25 insertions(+), 10 deletions(-) diff --git a/html/005-thoughtform-hidenoe/main.js b/html/005-thoughtform-hidenoe/main.js index 676c3ad..756b5d3 100644 --- a/html/005-thoughtform-hidenoe/main.js +++ b/html/005-thoughtform-hidenoe/main.js @@ -1,4 +1,4 @@ -import{d as j,e as k,f as _,g as B,h as K,i as x,k as c,m as D,n as C} from"../chunk-419236ae98000e07.js";var z=new D({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),5.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"}},F=(y)=>new x(U).vertex(c).fragment(E).app(y);var H=`#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 I=`#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 Y={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=(y,O=!1)=>new x(Y).vertex(c).fragment(O?I:H).app(y);var Z=location.search.includes("alt1"),i=new K({fov:45}),N=new j([0,0,2],k([0,0,0])),$=new j(_(0),k([0,180,0]),_(1.8)),A=new j(_(0),k([0,180,180]),_(0.6));new C(i,$,new B(i,z,F(i),N).configure({}));new C(i,A,new B(i,z,J(i,Z),N).configure({}));i.start(); +import{d as j,e as k,f as i,g as F,h as U,i as B,k as C,m as J,n as I} from"../chunk-419236ae98000e07.js";var D=new J({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 K=`#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 q={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"}},N=(x)=>new B(q).vertex(C).fragment(K).app(x);var O=`#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 P=`#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 X={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"}},Q=(x,y=!1)=>new B(X).vertex(C).fragment(y?P:O).app(x);var Y=location.search.includes("alt1"),_=new U({fov:45}),V=new j([0,0,2],k([0,0,0])),E=new j([1,-1,0],k([0,0,0])),R=new j(i(0),k([0,180,0]),i(1.8)),T=new j(i(0),k([0,180,180]),i(0.6));document.body.addEventListener("mousemove",(x)=>{const{clientX:y,clientY:Z}=x,{clientWidth:$,clientHeight:z}=document.body,A=y/$,G=Z/z,H=A*2-1,L=G*2-1;E.position[1]=H,E.position[0]=L});_.onUpdate((x,y)=>{});new I(_,R,new F(_,D,N(_),V).configure({}));new I(_,T,new F(_,D,Q(_,Y),V,E).configure({}));_.start(); diff --git a/src/005-thoughtform-hidenoe/main.ts b/src/005-thoughtform-hidenoe/main.ts index 15eac5a..f284706 100644 --- a/src/005-thoughtform-hidenoe/main.ts +++ b/src/005-thoughtform-hidenoe/main.ts @@ -5,19 +5,34 @@ import { Transform, etoq, v3 } from "../renderer/transform"; import plane from "../meshes/plane"; import { outer } from "./shaders/outer"; import { noe } from "./shaders/noe"; +import { createGizmo } from "../renderer/gizmo"; const useDebug = location.search.includes("alt1"); const app = new WebGLApp({ fov: 45 }); const camera = new Transform([0, 0, 2], etoq([0, 0, 0])); + +const light = new Transform([1, -1, 0], etoq([0, 0, 0])); + const transformPlane = new Transform(v3(0), etoq([0, 180, 0]), v3(1.8)); const transformSphere = new Transform(v3(0), etoq([0, 180, 180]), v3(0.6)); -// app.onUpdate((time, app) => { -// // const wiggle = 40 * (Math.sin(time) * 0.001); -// // camera.position = [wiggle, 2, 4 - wiggle]; -// }); +document.body.addEventListener("mousemove", (event) => { + const { clientX, clientY } = event; + const { clientWidth, clientHeight } = document.body; + + const screenX = clientX / clientWidth; + const screenY = clientY / clientHeight; + + const centeredX = screenX * 2 - 1; + const centeredY = screenY * 2 - 1; + + light.position[1] = centeredX; + light.position[0] = centeredY; +}); + +app.onUpdate((time, app) => {}); new Renderable( app, @@ -28,7 +43,7 @@ new Renderable( new Renderable( app, transformSphere, - new MeshRenderer(app, plane, noe(app, useDebug), camera).configure({}) + new MeshRenderer(app, plane, noe(app, useDebug), camera, light).configure({}) ); // createGizmo(app, camera, light); diff --git a/src/005-thoughtform-hidenoe/shaders/outer.frag b/src/005-thoughtform-hidenoe/shaders/outer.frag index 0f39497..b7c0653 100644 --- a/src/005-thoughtform-hidenoe/shaders/outer.frag +++ b/src/005-thoughtform-hidenoe/shaders/outer.frag @@ -37,7 +37,7 @@ void main() { vec2 outerNoise = (mandelbrot) * (1.0 - uvMirror * 0.5); fragColor.gb += (1.0 - mandelbrot) * outerNoise; - fragColor.r += pow(1.0 - length(uvMirror), 5.0); + fragColor.r += pow(1.0 - length(uvMirror), 8.0); fragColor.a = 1.0; }