0005: thoughtform complete
This commit is contained in:
parent
269f54882f
commit
86f1634b5f
18 changed files with 2632 additions and 14254 deletions
|
|
@ -12,6 +12,7 @@ https://art.mekanoe.com
|
|||
- [./002-webgl-engine](https://art.mekanoe.com/002-webgl-engine)
|
||||
- [./003-scene](https://art.mekanoe.com/003-scene)
|
||||
- [./004-a-new-leaf](https://art.mekanoe.com/004-a-new-leaf)
|
||||
- [./005-thoughtform-hidenoe](https://art.mekanoe.com/005-thoughtform-hidenoe)
|
||||
|
||||
## Development
|
||||
|
||||
|
|
|
|||
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
|
@ -1 +1 @@
|
|||
import{a as I,b as J,c,d as S,e as R,f as Y,g as p,h as q,i as f,j as k,k as w,l as N,m as U} from"../chunk-2ef356c72587f126.js";var s=new k({colors:null,faces:new Uint8Array([0,1,2,1,0,3,0,2,4,0,4,5,0,5,3,1,3,6,2,1,7,4,2,8,9,10,11,12,9,13,1,6,7,2,7,8,10,8,11,9,11,13,12,13,6,7,6,14,8,7,14,11,8,14,13,11,14,6,13,14,15,16,17,17,16,18,19,20,21,18,16,22,22,16,15,23,24,25]),name:"src/meshes/trianglething/trianglething.ply",normals:new Float32Array([0,-1,0.00000083803394,-0.5257306,-0.44721383,0.723607,-0.8506533,-0.44721213,-0.2763879,0.5257306,-0.4472139,0.723607,0,-0.44721153,-0.89442825,0.8506533,-0.4472122,-0.27638793,0,0.44721153,0.89442825,-0.8506533,0.44721216,0.27638793,-0.5257306,0.4472139,-0.72360694,0.8506533,-0.4472122,-0.27638793,0,-0.44721153,-0.89442825,0.5257306,0.4472139,-0.72360694,0.5257306,-0.4472139,0.723607,0.85065323,0.4472122,0.2763879,0,1,-0.0000008165459,0.8999471,-0.43599886,0.00000024163015,-0.00000005150958,1,0,-0.000000030203772,-0.4359989,0.8999472,-0.8999471,-0.4359989,-0.00000024291313,-0.000000030203772,-0.4359989,0.8999472,0,-0.43599886,-0.8999471,0.8999471,-0.43599886,0.00000024163015,0,-0.43599886,-0.8999471,-0.000000030203772,-0.4359989,0.8999472,-0.8999471,-0.4359989,-0.00000024291313,0,-0.43599886,-0.8999471]),positions:new Float32Array([0,2.6090002,0,-0.36800402,2.9959497,0.50652003,-0.5954481,2.9959497,-0.19346952,0.36800402,2.9959497,0.50652003,0,2.9959497,-0.62609756,0.5954481,2.9959497,-0.19346952,0,3.6220508,0.62609756,-0.5954481,3.6220508,0.19346952,-0.36800402,3.6220508,-0.50652003,0.5954481,2.9959497,-0.19346952,0,2.9959497,-0.62609756,0.36800402,3.6220508,-0.50652003,0.36800402,2.9959497,0.50652003,0.5954481,3.6220508,0.19346952,0,4.0090003,0,1.0000001,0,0,0,2.5000002,0,-0.000000043711395,0,1.0000001,-1.0000001,0,-0.00000008742279,-0.000000043711395,0,1.0000001,0.000000011924882,0,-1.0000001,1.0000001,0,0,0.000000011924882,0,-1.0000001,-0.000000043711395,0,1.0000001,-1.0000001,0,-0.00000008742279,0.000000011924882,0,-1.0000001]),uvs:new Float32Array([0.7660872,0.5526656,0.6449925,0.52286637,0.8418907,0.33128682,0.60803074,0.79587877,0.96344936,0.40123126,0.8416727,0.64077806,0.50600564,0.49428308,0.704352,0.31297976,0.79145527,0.046412975,0.35179207,0.26814616,0.47356877,0.028599411,0.5382167,0.15491244,0.118150145,0.42324704,0.40614995,0.39580685,0.5992601,0.26365823,0.4984935,0.5027367,0.24900003,0.7522302,-0.00049349666,0.50273675,-0.00049346685,1.0017238,0.7633698,0.99398905,0.99752307,0.7598357,0.9975231,0.99398893,0.49849355,1.0017238,0.99646366,0.7612665,0.99646366,0.9954198,0.7623104,0.9954198]),vertexCount:26});var V="../texture0-577d5216cdab32bc.png";var g="../texture1-e472a46c91711e86.png";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"}},W=(b)=>new p(Q).vertex(U).fragment(q).app(b);var B=new Y({fov:45}),X=new J([2,3,3],c([-15,40,0])),l=new J([2,2,0]),a=new J(S(0),c([0,0,0])),L=new J([-3,0,1],c([0,0,0])),F=new N(B,V),y=new N(B,g);B.onUpdate(()=>{I.rotateY(a.rotation,a.rotation,0.001),I.rotateY(L.rotation,L.rotation,0.001)});new w(B,a,new R(B,s,W(B).addTexture("texture0",F).addTexture("texture1",y),X,l).configure({}));new w(B,L,new R(B,s,f(B).addTexture("texture0",F).addTexture("texture1",y),X,l).configure({}));B.start();
|
||||
import{a as N,b as U} from"../chunk-13ea4b456137d650.js";import{c as I,d as J,e as c,f as S,g as R,h as Y,i as p,j as q,l as f,m as k,n as w} from"../chunk-419236ae98000e07.js";var s=new k({colors:null,faces:new Uint8Array([0,1,2,1,0,3,0,2,4,0,4,5,0,5,3,1,3,6,2,1,7,4,2,8,9,10,11,12,9,13,1,6,7,2,7,8,10,8,11,9,11,13,12,13,6,7,6,14,8,7,14,11,8,14,13,11,14,6,13,14,15,16,17,17,16,18,19,20,21,18,16,22,22,16,15,23,24,25]),name:"src/meshes/trianglething/trianglething.ply",normals:new Float32Array([0,-1,0.00000083803394,-0.5257306,-0.44721383,0.723607,-0.8506533,-0.44721213,-0.2763879,0.5257306,-0.4472139,0.723607,0,-0.44721153,-0.89442825,0.8506533,-0.4472122,-0.27638793,0,0.44721153,0.89442825,-0.8506533,0.44721216,0.27638793,-0.5257306,0.4472139,-0.72360694,0.8506533,-0.4472122,-0.27638793,0,-0.44721153,-0.89442825,0.5257306,0.4472139,-0.72360694,0.5257306,-0.4472139,0.723607,0.85065323,0.4472122,0.2763879,0,1,-0.0000008165459,0.8999471,-0.43599886,0.00000024163015,-0.00000005150958,1,0,-0.000000030203772,-0.4359989,0.8999472,-0.8999471,-0.4359989,-0.00000024291313,-0.000000030203772,-0.4359989,0.8999472,0,-0.43599886,-0.8999471,0.8999471,-0.43599886,0.00000024163015,0,-0.43599886,-0.8999471,-0.000000030203772,-0.4359989,0.8999472,-0.8999471,-0.4359989,-0.00000024291313,0,-0.43599886,-0.8999471]),positions:new Float32Array([0,2.6090002,0,-0.36800402,2.9959497,0.50652003,-0.5954481,2.9959497,-0.19346952,0.36800402,2.9959497,0.50652003,0,2.9959497,-0.62609756,0.5954481,2.9959497,-0.19346952,0,3.6220508,0.62609756,-0.5954481,3.6220508,0.19346952,-0.36800402,3.6220508,-0.50652003,0.5954481,2.9959497,-0.19346952,0,2.9959497,-0.62609756,0.36800402,3.6220508,-0.50652003,0.36800402,2.9959497,0.50652003,0.5954481,3.6220508,0.19346952,0,4.0090003,0,1.0000001,0,0,0,2.5000002,0,-0.000000043711395,0,1.0000001,-1.0000001,0,-0.00000008742279,-0.000000043711395,0,1.0000001,0.000000011924882,0,-1.0000001,1.0000001,0,0,0.000000011924882,0,-1.0000001,-0.000000043711395,0,1.0000001,-1.0000001,0,-0.00000008742279,0.000000011924882,0,-1.0000001]),uvs:new Float32Array([0.7660872,0.5526656,0.6449925,0.52286637,0.8418907,0.33128682,0.60803074,0.79587877,0.96344936,0.40123126,0.8416727,0.64077806,0.50600564,0.49428308,0.704352,0.31297976,0.79145527,0.046412975,0.35179207,0.26814616,0.47356877,0.028599411,0.5382167,0.15491244,0.118150145,0.42324704,0.40614995,0.39580685,0.5992601,0.26365823,0.4984935,0.5027367,0.24900003,0.7522302,-0.00049349666,0.50273675,-0.00049346685,1.0017238,0.7633698,0.99398905,0.99752307,0.7598357,0.9975231,0.99398893,0.49849355,1.0017238,0.99646366,0.7612665,0.99646366,0.9954198,0.7623104,0.9954198]),vertexCount:26});var V="../texture0-577d5216cdab32bc.png";var g="../texture1-e472a46c91711e86.png";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"}},W=(b)=>new p(Q).vertex(U).fragment(q).app(b);var B=new Y({fov:45}),X=new J([2,3,3],c([-15,40,0])),l=new J([2,2,0]),a=new J(S(0),c([0,0,0])),L=new J([-3,0,1],c([0,0,0])),F=new N(B,V),y=new N(B,g);B.onUpdate(()=>{I.rotateY(a.rotation,a.rotation,0.001),I.rotateY(L.rotation,L.rotation,0.001)});new w(B,a,new R(B,s,W(B).addTexture("texture0",F).addTexture("texture1",y),X,l).configure({}));new w(B,L,new R(B,s,f(B).addTexture("texture0",F).addTexture("texture1",y),X,l).configure({}));B.start();
|
||||
|
|
|
|||
|
|
@ -24,6 +24,6 @@
|
|||
<div id="telemetry">XX.X FPS (XX.X ms)</div>
|
||||
<div id="loading" class="loading-active"><div id="loading-text">[noeidelon] [stage 1]<br />bootstrapping...<span id="stage1-error"><br />this is taking a while...</span><span id="stage1-error2"><br />[panic] <span style="color: red">heck wtf</span></span></div></div>
|
||||
<div id="editor"></div>
|
||||
<nav><a class="nav-left" href="/003-scene">⇠ 003-scene</a></nav>
|
||||
<nav><a class="nav-left" href="/003-scene">⇠ 003-scene</a><a class="nav-right" href="/005-thoughtform-hidenoe">005-thoughtform-hidenoe ⇢</a></nav>
|
||||
</main>
|
||||
<script src="/004-a-new-leaf/main.js" type="module"></script>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
29
html/005-thoughtform-hidenoe/index.html
Normal file
29
html/005-thoughtform-hidenoe/index.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8" />
|
||||
<title>com.mekanoe.art // 005-thoughtform-hidenoe</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: Atkinson Hyperlegible, sans-serif;
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/work.css" />
|
||||
<main>
|
||||
<canvas id="canvas" width="1280" height="720"></canvas>
|
||||
<div id="telemetry">XX.X FPS (XX.X ms)</div>
|
||||
<div id="loading" class="loading-active"><div id="loading-text">[noeidelon] [stage 1]<br />bootstrapping...<span id="stage1-error"><br />this is taking a while...</span><span id="stage1-error2"><br />[panic] <span style="color: red">heck wtf</span></span></div></div>
|
||||
<div id="editor"></div>
|
||||
<nav><a class="nav-left" href="/004-a-new-leaf">⇠ 004-a-new-leaf</a></nav>
|
||||
</main>
|
||||
<script src="/005-thoughtform-hidenoe/main.js" type="module"></script>
|
||||
3
html/005-thoughtform-hidenoe/main.js
Normal file
3
html/005-thoughtform-hidenoe/main.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import{d as y,e as j,f as x,g as B,h as O,i as D,k as I,m as F,n as E} from"../chunk-419236ae98000e07.js";var z=new F({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 H=`#version 300 es
|
||||
precision highp float;uniform float u_time;in vec2 uv0;out vec4 fragColor;vec2 squareImaginary(vec2 number){return vec2(pow(number.x,2.0)-pow(number.y,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;i<maxIterations;i++){z=squareImaginary(z)+(coord*-1.3);if(length(z)>2.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.a=1.0;}`;var V={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=(k)=>new D(V).vertex(I).fragment(H).app(k);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 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"}},N=(k)=>new D(Y).vertex(I).fragment(K).app(k);var _=new O({fov:45}),m=new y(x(-5)),Q=new y([0,0,2],j([0,0,0])),Z=new y(x(0),j([0,180,0]),x(1.8)),$=new y(x(0),j([0,180,180]),x(0.6));new E(_,Z,new B(_,z,J(_),Q).configure({}));new E(_,$,new B(_,z,N(_),Q).configure({}));_.start();
|
||||
5
html/chunk-13ea4b456137d650.js
Normal file
5
html/chunk-13ea4b456137d650.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
class n{_;u;y;texture=null;width=0;height=0;constructor(_,u,y={}){this.app=_;this.url=u;this.config=y}setImage(_,u,y){return this.texture=_,this.width=u,this.height=y,this}async loadImage(){if(this.url==="manual"){if(this.texture===null)throw new Error("manual specified, but texture was not ready...");return}if(this.texture!==null)return;this.app.telemetry?.addTextures(-1),this.app.loading("Fetching textures...");const _=new Image;return new Promise((u,y)=>{_.onload=async()=>{this.texture=await createImageBitmap(_,{imageOrientation:"flipY"}),this.width=this.texture.width,this.height=this.texture.height,this.app.telemetry?.addTextures(2),u(void 0)},_.onerror=(f)=>{this.app.telemetry?.addTextures(1),y(new Error(`texture load of ${this.url} failed: ${f.toString()}`))},_.src=this.url})}}var q=`#version 300 es
|
||||
uniform mat4 u_view;uniform mat4 u_projection;uniform mat4 u_object_to_world;uniform mat4 u_object_to_world_inv;uniform vec3 u_light_0;in vec4 a_vertex;in vec2 a_uv0;in vec3 a_normal;in vec4 a_vertex_color;out vec2 uv0;out vec3 normal;out vec4 vertex_color;out vec3 light_pos;
|
||||
#define ROUNDING_FACTOR 230.0f
|
||||
void main(){mat4 worldInv=inverse(u_view);mat4 MVW=u_projection*u_view*u_object_to_world;vec4 realPosition=MVW*a_vertex;realPosition.xyz=round(vec3(realPosition.xyz*ROUNDING_FACTOR))/ROUNDING_FACTOR;gl_Position=realPosition;uv0=a_uv0;normal=normalize(mat3(worldInv)*a_normal);vertex_color=a_vertex_color;light_pos=normalize(mat3(u_object_to_world_inv)*u_light_0);}`;
|
||||
export{n as a,q as b};
|
||||
File diff suppressed because one or more lines are too long
5
html/chunk-419236ae98000e07.js
Normal file
5
html/chunk-419236ae98000e07.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -31,6 +31,7 @@
|
|||
</header>
|
||||
<section id="works">
|
||||
<ul>
|
||||
<li><a href="/005-thoughtform-hidenoe">./005-thoughtform-hidenoe</a></li>
|
||||
<li><a href="/004-a-new-leaf">./004-a-new-leaf</a></li>
|
||||
<li><a href="/003-scene">./003-scene</a></li>
|
||||
<li><a href="/002-webgl-engine">./002-webgl-engine</a></li>
|
||||
|
|
|
|||
14
package.json
14
package.json
|
|
@ -10,20 +10,20 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"bun-types": "latest",
|
||||
"npm-run-all2": "^6.1.1",
|
||||
"nodemon": "^3.0.1",
|
||||
"prettier": "^3.0.3"
|
||||
"npm-run-all2": "^6.1.2",
|
||||
"nodemon": "^3.1.0",
|
||||
"prettier": "^3.2.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": "^5.2.2"
|
||||
"typescript": "^5.4.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"chalk": "^5.3.0",
|
||||
"esbuild-plugin-glsl": "^1.2.2",
|
||||
"gl-matrix": "^3.4.3",
|
||||
"glob": "^10.3.10",
|
||||
"serve": "^14.2.1",
|
||||
"typescript": "^5.2.2"
|
||||
"glob": "^10.3.12",
|
||||
"serve": "^14.2.3",
|
||||
"typescript": "^5.4.5"
|
||||
},
|
||||
"nodemonConfig": {
|
||||
"ignore": [
|
||||
|
|
|
|||
|
|
@ -3,5 +3,6 @@
|
|||
pkgs.mkShell {
|
||||
buildInputs = with pkgs; [
|
||||
bun
|
||||
nodejs
|
||||
];
|
||||
}
|
||||
|
|
@ -17,10 +17,11 @@ out vec4 fragColor;
|
|||
|
||||
const float margin = 0.5;
|
||||
|
||||
// float r = length(m);
|
||||
// float a = atan(m.y, m.x);
|
||||
// float v = sin(100.*(sqrt(r)-0.02*a-.3*t));
|
||||
// return clamp(v,0.,1.);
|
||||
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() {
|
||||
// 0..1 to -1..1
|
||||
|
|
@ -33,6 +34,11 @@ void main() {
|
|||
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, 7.0);
|
||||
fragColor = vec4(0.0, spiral, edgeLightZone, 1.0);
|
||||
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);
|
||||
}
|
||||
1474
src/meshes/uvsphere-inverted.ply
Normal file
1474
src/meshes/uvsphere-inverted.ply
Normal file
File diff suppressed because it is too large
Load diff
12
src/meshes/uvsphere-inverted.ts
Normal file
12
src/meshes/uvsphere-inverted.ts
Normal file
File diff suppressed because one or more lines are too long
15299
src/meshes/uvsphere.ply
15299
src/meshes/uvsphere.ply
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue