marco/TunnelProofOfConcept
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

anotherTunnelMessToWorkWith

Browse Source
This commit is contained in:
Marco
2024-02-23 11:28:00 +01:00
parent 8d8f7aacf6
commit 26fd76c2a1
57 changed files with 1320 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

1
.cache/22/ebd6d6e88eb48cc4e5aac2f904e333.json Normal file
View File

@@ -0,0 +1 @@
{"id":"Pl0n","dependencies":[{"name":"/Users/marco/codeProjects/gpt_widgets/public/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform sampler2D u_texture;\\n\\n// https://www.shadertoy.com/view/4djSRW\\nfloat hash12(vec2 p){\\n vec3 p3 = fract(vec3(p.xyx) * .1031);\\n p3 += dot(p3, p3.yzx + 33.33);\\n return fract((p3.x + p3.y) * p3.z);\\n}\\n\\nvoid main() {\\n vec2 uv = vUv;\\n\\n const float numbers = 9.0;\\n\\n vec2 repeat = vec2(6.0, 12.0);\\n\\n vec2 cell = floor(uv * repeat * numbers);\\n\\n float rand = 100.0 * hash12(cell);\\n\\n vec4 color = texture2D(u_texture, uv);\\n\\n gl_FragColor = color;\\n}\";"},"sourceMaps":{"js":{"mappings":[{"source":"src/shaders/simplefragment.glsl","name":"module","original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"src/shaders/simplefragment.glsl","name":"exports","original":{"line":1,"column":7},"generated":{"line":1,"column":7}},{"source":"src/shaders/simplefragment.glsl","original":{"line":1,"column":15},"generated":{"line":1,"column":15}}],"sources":{"src/shaders/simplefragment.glsl":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform sampler2D u_texture;\\n\\n// https://www.shadertoy.com/view/4djSRW\\nfloat hash12(vec2 p){\\n vec3 p3 = fract(vec3(p.xyx) * .1031);\\n p3 += dot(p3, p3.yzx + 33.33);\\n return fract((p3.x + p3.y) * p3.z);\\n}\\n\\nvoid main() {\\n vec2 uv = vUv;\\n\\n const float numbers = 9.0;\\n\\n vec2 repeat = vec2(6.0, 12.0);\\n\\n vec2 cell = floor(uv * repeat * numbers);\\n\\n float rand = 100.0 * hash12(cell);\\n\\n vec4 color = texture2D(u_texture, uv);\\n\\n gl_FragColor = color;\\n}\";"},"lineCount":null}},"error":null,"hash":"3e19909c9287baf3b5e3242a704348ef","cacheData":{"env":{}}}

1
.cache/25/07e2f3dc7187c9e3ac018a13e337ae.json Normal file
View File

@@ -0,0 +1 @@
{"id":"BydC","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"/0727427dc433dca76146a91ebf70274a.png\";"},"sourceMaps":null,"error":null,"hash":"91b12bdaafd75b35acd8a721a7085b1e","cacheData":{"env":{}}}

1
.cache/27/df672e4aff2334eec41e701d06dc9a.json Normal file
View File

@@ -0,0 +1 @@
{"id":"HJIv","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"/1c922fc3dbc5d45f7724976abecd4900.png\";"},"sourceMaps":null,"error":null,"hash":"387f416b80ce9e7f2b25edc0476d515c","cacheData":{"env":{}}}

1
.cache/2c/7dfe824bb2fd601e4bc50003b664e6.json Normal file
View File

File diff suppressed because one or more lines are too long

2
.cache/45/518cc30499e9370b83556744c65c6c.json
View File

File diff suppressed because one or more lines are too long

1
.cache/6f/ba86065a2d2dc0435d4272aa752d72.json Normal file
View File

@@ -0,0 +1 @@
{"id":"sGNS","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"/b0635267a3cb78ec5f5a812729b6c556.png\";"},"sourceMaps":null,"error":null,"hash":"e12b361674491a94e38d14aa26e681b9","cacheData":{"env":{}}}

1
.cache/77/f3d02415df24ccc629a6f00422b212.json Normal file
View File

@@ -0,0 +1 @@
{"id":"EU5I","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"/114e48fffb508a9b96228bea25eb0527.png\";"},"sourceMaps":null,"error":null,"hash":"4a40dbb24057ba1b6e128bc08d1fd5ab","cacheData":{"env":{}}}

1
.cache/7a/4da79a439abca05211dea52f803226.json Normal file
View File

File diff suppressed because one or more lines are too long

1
.cache/80/d51ccbd38067a3ef2de29c4464dfb9.json Normal file
View File

@@ -0,0 +1 @@
{"id":"s8zH","dependencies":[{"name":"./src/index.js","dynamic":true,"resolved":"/Users/marco/codeProjects/tunnel/src/index.js","parent":"/Users/marco/codeProjects/tunnel/index.html"}],"generated":{"html":"<!DOCTYPE html><html><head><title>Parcel Sandbox</title><meta charset=\"UTF-8\"></head><body> <div id=\"container\"></div> <script src=\"/1fdf421c05c1140f6d71444ea2b27638.js\"></script> </body></html>"},"sourceMaps":null,"error":null,"hash":"ffd19cf20529c8363d4dd48f8ffc1b90","cacheData":{}}

1
.cache/9c/219b01a68599db37878c8e5c33435e.json Normal file
View File

@@ -0,0 +1 @@
{"id":"tEKs","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"/b442acd1de977fe34f67c4434e58ef32.png\";"},"sourceMaps":null,"error":null,"hash":"575e79e72a3cabd3d1667e1f2e96c0cb","cacheData":{"env":{}}}

1
.cache/9e/3e4e9406b957e9c8a7899310f0c2b7.json Normal file
View File

@@ -0,0 +1 @@
{"id":"AJno","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"#define GLSLIFY 1\\n// vertex.glsl\\n\\nvarying vec2 vUv;\\nuniform float time;\\nuniform float distortionFactorX;\\nuniform float distortionFactorY; // Added uniform for Y-axis distortion\\n\\nvoid main() {\\n vUv = uv;\\n\\n // Apply distortion to the X and Y coordinates\\n float distortedX = position.x + sin(position.y * distortionFactorX) * 0.2;\\n float distortedY = position.y + cos(position.x * distortionFactorY) * 0.2;\\n\\n gl_Position = projectionMatrix * modelViewMatrix * vec4(distortedX, distortedY, position.z, 1.0);\\n}\\n\";"},"sourceMaps":{"js":{"mappings":[{"source":"src/shaders/vertex.glsl","name":"module","original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"src/shaders/vertex.glsl","name":"exports","original":{"line":1,"column":7},"generated":{"line":1,"column":7}},{"source":"src/shaders/vertex.glsl","original":{"line":1,"column":15},"generated":{"line":1,"column":15}}],"sources":{"src/shaders/vertex.glsl":"module.exports=\"#define GLSLIFY 1\\n// vertex.glsl\\n\\nvarying vec2 vUv;\\nuniform float time;\\nuniform float distortionFactorX;\\nuniform float distortionFactorY; // Added uniform for Y-axis distortion\\n\\nvoid main() {\\n vUv = uv;\\n\\n // Apply distortion to the X and Y coordinates\\n float distortedX = position.x + sin(position.y * distortionFactorX) * 0.2;\\n float distortedY = position.y + cos(position.x * distortionFactorY) * 0.2;\\n\\n gl_Position = projectionMatrix * modelViewMatrix * vec4(distortedX, distortedY, position.z, 1.0);\\n}\\n\";"},"lineCount":null}},"error":null,"hash":"d6981aad118adecd048d5238fadca874","cacheData":{"env":{}}}

1
.cache/b6/4a567318352ec13f6159a7cb4a9cf3.json Normal file
View File

@@ -0,0 +1 @@
{"id":"mFDW","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform float time;\\n\\nvoid main() {\\n vUv = uv;\\n\\n // Adjust the scale factor based on your desired appearance\\n float scale = 0.5; // Adjust as needed\\n vUv.y *= scale;\\n\\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\\n}\\n\";"},"sourceMaps":{"js":{"mappings":[{"source":"src/shaders/newvertex.glsl","name":"module","original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"src/shaders/newvertex.glsl","name":"exports","original":{"line":1,"column":7},"generated":{"line":1,"column":7}},{"source":"src/shaders/newvertex.glsl","original":{"line":1,"column":15},"generated":{"line":1,"column":15}}],"sources":{"src/shaders/newvertex.glsl":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform float time;\\n\\nvoid main() {\\n vUv = uv;\\n\\n // Adjust the scale factor based on your desired appearance\\n float scale = 0.5; // Adjust as needed\\n vUv.y *= scale;\\n\\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\\n}\\n\";"},"lineCount":null}},"error":null,"hash":"f5968fe6f019cd1be429bb7c1e987262","cacheData":{"env":{}}}

1
.cache/bf/3779baec010331f7ababd2bb80f4d7.json Normal file
View File

@@ -0,0 +1 @@
{"id":"Pl0n","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform sampler2D u_texture;\\n\\n// https://www.shadertoy.com/view/4djSRW\\nfloat hash12(vec2 p){\\n vec3 p3 = fract(vec3(p.xyx) * .1031);\\n p3 += dot(p3, p3.yzx + 33.33);\\n return fract((p3.x + p3.y) * p3.z);\\n}\\n\\nvoid main() {\\n vec2 uv = vUv;\\n\\n // Adjust UV coordinates based on the length of the tube\\n uv.y *= 5.0; // You may need to adjust this value based on your specific tube length\\n\\n const float numbers = 9.0;\\n\\n vec2 repeat = vec2(1.0, 1.0);\\n\\n vec2 cell = floor(uv * repeat * numbers);\\n\\n float rand = 100.0 * hash12(cell);\\n\\n vec4 color = texture2D(u_texture, uv);\\n\\n gl_FragColor = color;\\n}\";"},"sourceMaps":{"js":{"mappings":[{"source":"src/shaders/simplefragment.glsl","name":"module","original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"src/shaders/simplefragment.glsl","name":"exports","original":{"line":1,"column":7},"generated":{"line":1,"column":7}},{"source":"src/shaders/simplefragment.glsl","original":{"line":1,"column":15},"generated":{"line":1,"column":15}}],"sources":{"src/shaders/simplefragment.glsl":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform sampler2D u_texture;\\n\\n// https://www.shadertoy.com/view/4djSRW\\nfloat hash12(vec2 p){\\n vec3 p3 = fract(vec3(p.xyx) * .1031);\\n p3 += dot(p3, p3.yzx + 33.33);\\n return fract((p3.x + p3.y) * p3.z);\\n}\\n\\nvoid main() {\\n vec2 uv = vUv;\\n\\n // Adjust UV coordinates based on the length of the tube\\n uv.y *= 5.0; // You may need to adjust this value based on your specific tube length\\n\\n const float numbers = 9.0;\\n\\n vec2 repeat = vec2(1.0, 1.0);\\n\\n vec2 cell = floor(uv * repeat * numbers);\\n\\n float rand = 100.0 * hash12(cell);\\n\\n vec4 color = texture2D(u_texture, uv);\\n\\n gl_FragColor = color;\\n}\";"},"lineCount":null}},"error":null,"hash":"5a3de69cd8528d686b7e426f0419ca9c","cacheData":{"env":{}}}

1
.cache/c6/87e62efae674b71131cc73cb73cf52.json Normal file
View File

@@ -0,0 +1 @@
{"id":"izBg","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"/8b306026f6f95df89c877c84aef2ab20.gif\";"},"sourceMaps":null,"error":null,"hash":"bd9f5f08dcd9bc726cc5d07bcf54a0fb","cacheData":{"env":{}}}

1
.cache/da/f75ef6a0483a7e4e9f97feb38bdfba.json Normal file
View File

@@ -0,0 +1 @@
{"id":"KgO4","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform sampler2D u_texture;\\n\\nvoid main() {\\n vec4 color = texture2D(u_texture, vUv);\\n gl_FragColor = color;\\n}\\n\";"},"sourceMaps":{"js":{"mappings":[{"source":"src/shaders/nodistort.glsl","name":"module","original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"src/shaders/nodistort.glsl","name":"exports","original":{"line":1,"column":7},"generated":{"line":1,"column":7}},{"source":"src/shaders/nodistort.glsl","original":{"line":1,"column":15},"generated":{"line":1,"column":15}}],"sources":{"src/shaders/nodistort.glsl":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform sampler2D u_texture;\\n\\nvoid main() {\\n vec4 color = texture2D(u_texture, vUv);\\n gl_FragColor = color;\\n}\\n\";"},"lineCount":null}},"error":null,"hash":"e5c77cfbcd1ddd6e994cde42fd35f9a8","cacheData":{"env":{}}}

1
.cache/e3/82e4ee591308a0ce26c5ec4d75ae85.json Normal file
View File

@@ -0,0 +1 @@
{"id":"TBTy","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"/d13053cba5bdf13c346f6e5788df12a8.png\";"},"sourceMaps":null,"error":null,"hash":"987918cb910d56c131adac68cf55bebe","cacheData":{"env":{}}}

1
.cache/e6/b3e7fcf41579cf727d5e57acca3f02.json Normal file
View File

File diff suppressed because one or more lines are too long

1
.cache/ed/b28080243d992a24cd930462df4992.json Normal file
View File

@@ -0,0 +1 @@
{"id":"D9Nj","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"css":"body{background-color:#000;overflow:hidden}#container{width:100vw;height:100vh;position:fixed;top:0;left:0}","js":""},"sourceMaps":{"css":{"mappings":[{"source":"styles.css","name":null,"original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"styles.css","name":null,"original":{"line":2,"column":2},"generated":{"line":1,"column":5}},{"source":"styles.css","name":null,"original":{"line":2,"column":27},"generated":{"line":1,"column":26}},{"source":"styles.css","name":null,"original":{"line":3,"column":2},"generated":{"line":1,"column":27}},{"source":"styles.css","name":null,"original":{"line":4,"column":0},"generated":{"line":1,"column":42}},{"source":"styles.css","name":null,"original":{"line":6,"column":0},"generated":{"line":1,"column":43}},{"source":"styles.css","name":null,"original":{"line":7,"column":2},"generated":{"line":1,"column":54}},{"source":"styles.css","name":null,"original":{"line":7,"column":14},"generated":{"line":1,"column":65}},{"source":"styles.css","name":null,"original":{"line":8,"column":2},"generated":{"line":1,"column":66}},{"source":"styles.css","name":null,"original":{"line":8,"column":15},"generated":{"line":1,"column":78}},{"source":"styles.css","name":null,"original":{"line":9,"column":2},"generated":{"line":1,"column":79}},{"source":"styles.css","name":null,"original":{"line":9,"column":17},"generated":{"line":1,"column":93}},{"source":"styles.css","name":null,"original":{"line":10,"column":2},"generated":{"line":1,"column":94}},{"source":"styles.css","name":null,"original":{"line":10,"column":8},"generated":{"line":1,"column":99}},{"source":"styles.css","name":null,"original":{"line":11,"column":2},"generated":{"line":1,"column":100}},{"source":"styles.css","name":null,"original":{"line":12,"column":0},"generated":{"line":1,"column":106}}],"sources":{"styles.css":"body {\n background-color: #000000;\n overflow: hidden;\n}\n\n#container {\n width: 100vw;\n height: 100vh;\n position: fixed;\n top: 0;\n left: 0;\n}\n"},"lineCount":null}},"error":null,"hash":"c955194d39ac31a63acc63e164a083d3","cacheData":{"env":{}}}

1
.cache/fd/b3de47ffd3a797c6040e69f074f559.json Normal file
View File

@@ -0,0 +1 @@
{"id":"B8ez","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform sampler2D u_texture;\\n\\n// https://www.shadertoy.com/view/4djSRW\\nfloat hash12(vec2 p){\\n vec3 p3 = fract(vec3(p.xyx) * .1031);\\n p3 += dot(p3, p3.yzx + 33.33);\\n return fract((p3.x + p3.y) * p3.z);\\n}\\n\\nvoid main() {\\n vec2 uv = vUv;\\n\\n const float numbers = 9.0;\\n\\n vec2 repeat = vec2(6.0, 12.0);\\n\\n vec2 cell = floor(uv * repeat * numbers);\\n\\n float rand = 100.0 * hash12(cell);\\n\\n float grid = mod(cell.x + cell.y, 2.0); // Grid pattern\\n\\n // Create holes by checking the hash value\\n float holeThreshold = 0.2;\\n float hole = step(holeThreshold, hash12(cell + vec2(rand)));\\n\\n vec4 color = texture2D(u_texture, uv);\\n\\n // Apply the grid pattern and holes\\n color.rgb *= mix(1.0, 0.8, grid); // Darken the grid cells\\n color.rgb *= hole; // Make holes transparent\\n\\n gl_FragColor = color;\\n}\\n\";"},"sourceMaps":{"js":{"mappings":[{"source":"src/shaders/fragmetgridnoanimation.glsl","name":"module","original":{"line":1,"column":0},"generated":{"line":1,"column":0}},{"source":"src/shaders/fragmetgridnoanimation.glsl","name":"exports","original":{"line":1,"column":7},"generated":{"line":1,"column":7}},{"source":"src/shaders/fragmetgridnoanimation.glsl","original":{"line":1,"column":15},"generated":{"line":1,"column":15}}],"sources":{"src/shaders/fragmetgridnoanimation.glsl":"module.exports=\"#define GLSLIFY 1\\nvarying vec2 vUv;\\nuniform sampler2D u_texture;\\n\\n// https://www.shadertoy.com/view/4djSRW\\nfloat hash12(vec2 p){\\n vec3 p3 = fract(vec3(p.xyx) * .1031);\\n p3 += dot(p3, p3.yzx + 33.33);\\n return fract((p3.x + p3.y) * p3.z);\\n}\\n\\nvoid main() {\\n vec2 uv = vUv;\\n\\n const float numbers = 9.0;\\n\\n vec2 repeat = vec2(6.0, 12.0);\\n\\n vec2 cell = floor(uv * repeat * numbers);\\n\\n float rand = 100.0 * hash12(cell);\\n\\n float grid = mod(cell.x + cell.y, 2.0); // Grid pattern\\n\\n // Create holes by checking the hash value\\n float holeThreshold = 0.2;\\n float hole = step(holeThreshold, hash12(cell + vec2(rand)));\\n\\n vec4 color = texture2D(u_texture, uv);\\n\\n // Apply the grid pattern and holes\\n color.rgb *= mix(1.0, 0.8, grid); // Darken the grid cells\\n color.rgb *= hole; // Make holes transparent\\n\\n gl_FragColor = color;\\n}\\n\";"},"lineCount":null}},"error":null,"hash":"c7b09398894f598fcec5bee36163d56d","cacheData":{"env":{}}}

1
.cache/fe/2c67af41d4fbef07e8a944c7f0e461.json Normal file
View File

@@ -0,0 +1 @@
{"id":"BhIN","dependencies":[{"name":"/Users/marco/codeProjects/tunnel/package.json","includedInParent":true,"mtime":1702561850976}],"generated":{"js":"module.exports=\"/06120ddfe7b5db8b38856ef56fc0d01b.png\";"},"sourceMaps":null,"error":null,"hash":"74555c0e13f21a5652e811ed89c28d2e","cacheData":{"env":{}}}

3
.gitignore vendored
View File

@@ -1 +1,2 @@
/node_modules/ /node_modules/
/dist

BIN
blackedoutleft.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 MiB

BIN
blackoutright_30000x1500.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 MiB

BIN
dist/123.dc54f579.png vendored
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 MiB

2
dist/index.html vendored
View File

@@ -1 +1 @@
<!DOCTYPE html><html><head><title>Parcel Sandbox</title><meta charset="UTF-8"><link rel="stylesheet" href="/src.95de4f98.css"></head><body> <div id="container"></div> <script src="/src.5600be97.js"></script> </body></html> <!DOCTYPE html><html><head><title>Parcel Sandbox</title><meta charset="UTF-8"><link rel="stylesheet" href="/src.95de4f98.css"></head><body> <div id="container"></div> <script src="/src.93aa41b5.js"></script> </body></html>

15
dist/src.5600be97.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/src.5600be97.js.map vendored
View File

File diff suppressed because one or more lines are too long

BIN
full30000x1500.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 MiB

BIN
src/.DS_Store vendored
View File

Binary file not shown.

BIN
src/TunnelbandMatrix15dec2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
src/Tunnelbandmatrix+plaatjes15dec.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 MiB

BIN
src/blackedoutleft.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 MiB

BIN
src/blackoutright_30000x1500.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 MiB

BIN
src/fire.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 331 KiB

BIN
src/full30000x1500.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 MiB

344
src/index.js
View File

@@ -1,14 +1,25 @@
// inspiration from Etienne Jacob // Import styles
// https://www.thisiscolossal.com/wp-content/uploads/2018/12/agifcolossaltd2opt.gif
import "./styles.css"; import "./styles.css";
// Import THREE library
import * as THREE from "three"; import * as THREE from "three";
// import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// Import vertex shader
import vertex from "./shaders/vertex.glsl"; import vertex from "./shaders/vertex.glsl";
// Import fragment shader
import fragment from "./shaders/fragment.glsl"; import fragment from "./shaders/fragment.glsl";
import txt from "./123.png";
// Import texture images
// import txt1 from "./TunnelbandMatrix15dec2.png";
// import txt2 from "./blackedoutleft.png";
import txt1 from "./blackoutright_30000x1500.png";
import txt2 from "./full30000x1500.png";
// import txt2 from "./swirl.gif"; // Replace with the actual path of your second texture
// Initialize global timer variable
let timer = 0; let timer = 0;
let mouseIsDown = false;
export default class Sketch { export default class Sketch {
constructor(options) { constructor(options) {
this.clock = new THREE.Clock(); this.clock = new THREE.Clock();
@@ -16,50 +27,81 @@ export default class Sketch {
this.container = options.domElement; this.container = options.domElement;
this.height = this.container.offsetHeight; this.height = this.container.offsetHeight;
this.width = this.container.offsetWidth; this.width = this.container.offsetWidth;
this.camera = new THREE.PerspectiveCamera( this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 0.1, 1000);
75,
this.width / this.height,
0.1,
1000
);
this.camera.position.set(0, 0, 10); this.camera.position.set(0, 0, 10);
this.scene = new THREE.Scene(); this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setPixelRatio(window.devicePixelRatio * 2); this.renderer.setPixelRatio(window.devicePixelRatio * 2);
this.container.appendChild(this.renderer.domElement); this.container.appendChild(this.renderer.domElement);
// this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.normal = new THREE.Vector3(); this.normal = new THREE.Vector3();
this.binormal = new THREE.Vector3(); this.binormal = new THREE.Vector3();
this.resize(); this.resize();
this.addObjects(); this.addObjects();
this.render(); this.render();
this.setUpResize(); this.setUpResize();
// this.replaceTxt1();
this.setOpacityLayer1(1, 0);
this.setOpacityLayer2(1, 30);
} }
addObjects() { addObjects() {
const texture = new THREE.TextureLoader().load(txt, (texture) => { var texture1 = new THREE.TextureLoader().load(txt1, (texture) => {
texture.minFilter = THREE.NearestFilter; texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter; texture.magFilter = THREE.NearestFilter;
}); });
this.material = new THREE.ShaderMaterial({ var texture2 = new THREE.TextureLoader().load(txt2, (texture) => {
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
});
this.shaderMaterial = new THREE.ShaderMaterial({
side: THREE.DoubleSide, side: THREE.DoubleSide,
// transparent:true, depthWrite: true,
// wireframe: true, depthTest: true,
transparent: true,
// blending: THREE.NormalBlending,
blending: THREE.NoBlending,
uniforms: { uniforms: {
time: { type: "f", value: 0 }, time: { type: "f", value: 0 },
uResolution: { type: "v4", value: new THREE.Vector4() }, uResolution: { type: "v4", value: new THREE.Vector4() },
u_texture: { type: "t", value: texture } u_texture: { type: "t", value: texture1 },
u_texture2: { type: "t", value: texture2 },
distortionFactorX: { type: "f", value: 0 },
distortionFactorY: { type: "f", value: 0 },
repeatX: { type: "f", value: 12.0 },
repeatY: { type: "f", value: 6.0 },
aspectRatioCorrection: { type: "f", value: 15 },
transparency1: { type: "f", value: 0 },
transparency2: { type: "f", value: 0 }, // Set initial transparency for the second texture
scale: { type: "v2", value: new THREE.Vector2(1.0, 1.0) },
offset: { type: "v2", value: new THREE.Vector2(0.0, 0.0) },
rotation: { type: "f", value: 0.0 },
turbulence: { type: "f", value: 0.0 },
colorOffset: { type: "f", value: 0.0 },
brightness: { type: "f", value: 1.0 },
waveSpeed: { type: "f", value: 0.0 },
globalScale: { type: "f", value: 1.0 },
twist: { type: "f", value: 1.0 },
waveFrequency: { type: "f", value: 0.0 },
depthFactor: { type: "f", value: 0.0 },
glowIntensity: { type: "f", value: 0.0 },
pulseSpeed: { type: "f", value: 0.0 },
colorR: { type: "f", value: 1.0 },
colorG: { type: "f", value: 1.0 },
colorB: { type: "f", value: 1.0 },
}, },
vertexShader: vertex, vertexShader: vertex,
fragmentShader: fragment fragmentShader: fragment,
}); });
class CustomSinCurve extends THREE.Curve {
constructor(scale = 1) {
super();
class CustomSinCurve extends THREE.Curve {
constructor(scale = 2) {
super();
this.scale = scale; this.scale = scale;
} }
@@ -67,22 +109,211 @@ export default class Sketch {
const tx = Math.cos(2 * Math.PI * t); const tx = Math.cos(2 * Math.PI * t);
const ty = Math.sin(2 * Math.PI * t); const ty = Math.sin(2 * Math.PI * t);
const tz = 0.1 * Math.sin(8 * Math.PI * t); const tz = 0.1 * Math.sin(8 * Math.PI * t);
return optionalTarget.set(tx, ty, tz).multiplyScalar(this.scale); return optionalTarget.set(tx, ty, tz).multiplyScalar(this.scale);
} }
} }
const path = new CustomSinCurve(10); // const splineData = [
// [new THREE.Vector3(249.77046356468685, 932.2219407156813, -255.94041268503986),
// new THREE.Vector3(184.2697143587856, 340.8431828885419, -137.50911515694105),
// new THREE.Vector3(19.942904199485042, 228.58948494060985, 62.791664957972415),
// new THREE.Vector3(129.44330187699228, 123.24717120015652, 180.72662546735586),
// new THREE.Vector3(194.62366419209283, -50.957866448272654, 348.9131609506699),
// new THREE.Vector3(233.83324329738002, -6.6805514372266215, 586.011268528852),
// new THREE.Vector3(33.97204422946808, -11.55735269269492, 843.3100027995519),
// new THREE.Vector3(122.26648943463792, -206.74514914968762, 925.883739846062),
// new THREE.Vector3(386.39147370444016, -156.50797561120535, 1011.8913441984032),
// new THREE.Vector3(711.7691000196912, -348.3088368387029, 1189.6414444065897)]
// ];
// const splineData = [
// [new THREE.Vector3(473.11863126256065, 1148.7914983677936, -626.3088726774722),
// new THREE.Vector3(245.61458415195102, 1116.9549354293442, -263.87118049677656),
// new THREE.Vector3(245.61458415195102, 1116.9549354293442, -263.87118049677656),
// new THREE.Vector3(245.61458415195102, 1116.9549354293442, -263.87118049677656),
// new THREE.Vector3(204.61699075454024, 370.04031630467887, -68.48460037267392),
// new THREE.Vector3(86.44131454502019, 269.45084890937585, 62.791664957972415),
// new THREE.Vector3(72.15795829069751, 58.51161097159243, 171.57374030692884),
// new THREE.Vector3(25.789881573044692, -33.22822178799524, 348.9131609506699),
// new THREE.Vector3(136.00387125935322, -8.133815744630706, 585.6112333240656),
// new THREE.Vector3(33.97204422946808, -11.55735269269492, 843.3100027995519),
// new THREE.Vector3(125.44573300578595, -64.95811252917446, 1087.520327532037),
// new THREE.Vector3(-229.4300492080865, -204.31919716633735, 1592.4021728239306),
// new THREE.Vector3(-32.58894150524465, -427.4049046320883, 2072.332326149018),
// new THREE.Vector3(508.9934515582963, -2499.952976214704, 5435.133591888159),
// new THREE.Vector3(1759.943314976105, -3123.674630232325, 7714.175951240869)]
// ]
this.geometry = new THREE.TubeGeometry(path, 200, 0.5, 20, false); // const splineData = [[
this.mesh = new THREE.Mesh(this.geometry, this.material); // new THREE.Vector3(473.11863126256065, 1148.7914983677936, -626.3088726774722),
// new THREE.Vector3(23.51828362256837, 1128.368276997569, -619.9291758003139),
// new THREE.Vector3(63.43602909903811, 1094.885204825893, -460.9975125081666),
// new THREE.Vector3(296.1407291653776, 959.7356327576776, -503.15980942417),
// new THREE.Vector3(410.4183885943379, -618.6838591644985, -229.9284358044308),
// new THREE.Vector3(204.61699075454024, 370.04031630467887, -68.48460037267392),
// new THREE.Vector3(86.44131454502019, 269.45084890937585, 62.791664957972415),
// new THREE.Vector3(72.15795829069751, 58.51161097159243, 171.57374030692884),
// new THREE.Vector3(25.789881573044692, -33.22822178799524, 348.9131609506699),
// new THREE.Vector3(136.00387125935322, -8.133815744630706, 585.6112333240656),
// new THREE.Vector3(33.97204422946808, -11.55735269269492, 843.3100027995519),
// new THREE.Vector3(125.44573300578595, -64.95811252917446, 1087.520327532037),
// new THREE.Vector3(-229.4300492080865, -204.31919716633735, 1592.4021728239306),
// new THREE.Vector3(-32.58894150524465, -427.4049046320883, 2072.332326149018),
// new THREE.Vector3(508.9934515582963, -2499.952976214704, 5435.133591888159),
// new THREE.Vector3(1759.943314976105, -3123.674630232325, 7714.175951240869)]
// ]
const splineData = [[
new THREE.Vector3(473.11863126256065, 1148.7914983677936, -626.3088726774722),
new THREE.Vector3(119.89018791921463, 1106.433693900733, -832.5766659881987),
new THREE.Vector3(117.90596454302678, 1033.555957750614, -612.8498670255568),
new THREE.Vector3(182.54143644281098, 825.3080107623409, -480.6932058171036),
new THREE.Vector3(118.67378490442167, 396.4887161528761, -380.5280111161988),
new THREE.Vector3(280.3702856718703, 292.9366974262628, -76.78175980638068),
new THREE.Vector3(86.44131454502019, 269.45084890937585, 62.791664957972415),
new THREE.Vector3(72.15795829069751, 58.51161097159243, 171.57374030692884),
new THREE.Vector3(-18.631970330989734, -12.469964424808147, 353.11898079093527),
new THREE.Vector3(136.00387125935322, -8.133815744630706, 585.6112333240656),
new THREE.Vector3(7.613134434090028, 114.78833598781391, 843.3100027995519),
new THREE.Vector3(125.44573300578595, -64.95811252917446, 1087.520327532037),
new THREE.Vector3(-136.7078013160953, -165.54943689384953, 1375.894502480654),
new THREE.Vector3(350.7398762821747, -364.1460096594824, 2008.9271623961001),
new THREE.Vector3(684.0517345033015, -496.61732486128324, 2253.715989472005),
new THREE.Vector3(1759.943314976105, -3123.674630232325, 7714.175951240869)]]
class CustomSplineCurve extends THREE.CatmullRomCurve3 {
constructor(points) {
// super(points, false, 'catmullrom', 0.9); // Set the type to 'catmullrom' with tension 0.1
super(points, false, 'chordal'); // Set the type to 'chordal'
// super(points, false, 'centripetal'); // Set the type to 'centripetal'
}
}
// // Convert splineData to THREE.Vector3 array
// const splinePoints = splineData[0];
// const path = new CustomSplineCurve(splinePoints);
const scaleFactor = .1; // Adjust as needed
// Apply scaling to the spline points
const scaledSplinePoints = splineData[0].map(point =>
new THREE.Vector3(point.x * scaleFactor, point.y * scaleFactor, point.z * scaleFactor)
);
// Create a new spline curve with scaled points
const path = new CustomSplineCurve(scaledSplinePoints);
// Create a new spline curve
// this.geometry = new THREE.TubeGeometry(path, splinePoints.length * 100, 0.5, 20, false);
this.geometry = new THREE.TubeGeometry(path, scaledSplinePoints.length * 100, 0.5, 20, false);
// const path = new CustomSinCurve(10);
// this.geometry = new THREE.TubeGeometry(path, 200, 0.5, 20, false);
this.mesh = new THREE.Mesh(this.geometry, this.shaderMaterial);
this.scene.add(this.mesh); this.scene.add(this.mesh);
window.shaderUniforms = this.shaderMaterial.uniforms;
// const defaultValues = {
// distortionFactorX: 0.0,
// distortionFactorY: 0.0,
// repeatX: 12.0,
// repeatY: 6.0,
// aspectRatioCorrection: 10.0,
// transparency1: 0.0, // Set initial transparency for the first texture
// transparency2: 1.0, // Set initial transparency for the second texture
// scale: new THREE.Vector2(1.0, 1.0),
// offset: new THREE.Vector2(0.0, 0.0),
// rotation: 0.0,
// turbulence: 0.0,
// colorOffset: 0.0,
// brightness: 1.0,
// waveFrequency: 1.0,
// depthFactor: 0.0,
// glowIntensity: 0.0,
// pulseSpeed: 1.0,
// colorR: 1.0,
// colorG: 1.0,
// colorB: 1.0,
// };
// Object.keys(defaultValues).forEach((key) => {
// window[key] = shaderUniforms[key].value = defaultValues[key];
// });
} }
replaceTxt1() {
setTimeout(() => {
console.log('texture 1 replaced')
var texture = new THREE.TextureLoader().load(txt2, (texture) => {
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
});
this.shaderMaterial.uniforms.u_texture.value = texture;
}, 20000);
}
setOpacityLayer1(opacity, timeout) {
setTimeout(() => {
this.shaderMaterial.uniforms.transparency1.value = opacity;
}, timeout);
}
setOpacityLayer2(opacity, timeout) {
setTimeout(() => {
this.shaderMaterial.uniforms.transparency2.value = opacity;
}, timeout);
}
// -=-==-=-=-=-=-=-=-=-=-=-=-=-=--=
Particle(scene, burst) {
var radius = Math.random() * 0.003 + 0.0003;
var geom = cell.geometry;
var range = 10;
var offset = burst ? 200 : 350;
var saturate = Math.floor(Math.random() * 20 + 65);
var light = burst ? 20 : 56;
this.color = new THREE.Color("hsl(" + (Math.random() * range + offset) + "," + saturate + "%," + light + "%)");
var mat = new THREE.MeshPhongMaterial({
color: this.color,
// shading: THREE.FlatShading
});
this.mesh = new THREE.Mesh(geom, mat);
this.mesh.scale.set(radius, radius, radius);
this.mesh.scale.x += (Math.random() - 0.5) * 0.001;
this.mesh.scale.y += (Math.random() - 0.5) * 0.001;
this.mesh.scale.z += (Math.random() - 0.5) * 0.001;
this.mesh.position.set(0, 0, 1.5);
this.percent = burst ? 0.2 : Math.random();
this.burst = burst ? true : false;
this.offset = new THREE.Vector3((Math.random() - 0.5) * 0.025, (Math.random() - 0.5) * 0.025, 0);
this.speed = Math.random() * 0.004 + 0.0002;
if (this.burst) {
this.speed += 0.003;
this.mesh.scale.x *= 1.4;
this.mesh.scale.y *= 1.4;
this.mesh.scale.z *= 1.4;
}
this.rotate = new THREE.Vector3(-Math.random() * 0.1 + 0.01, 0, Math.random() * 0.01);
this.pos = new THREE.Vector3(0, 0, 0);
};
// =--=-==-=--=-=-=-=-=-=-==--=-==--=-=
render() { render() {
this.time = timer; this.time = timer;
// https://threejs.org/examples/webgl_geometry_extrude_splines.html
let looptime = 10 * 1000; let looptime = 10 * 1000;
let t = (this.time % looptime) / looptime; let t = (this.time % looptime) / looptime;
let pos = this.geometry.parameters.path.getPointAt(t); let pos = this.geometry.parameters.path.getPointAt(t);
@@ -90,35 +321,18 @@ export default class Sketch {
let pickt = t * segments; let pickt = t * segments;
let pick = Math.floor(pickt); let pick = Math.floor(pickt);
let pickNext = (pick + 1) % segments; let pickNext = (pick + 1) % segments;
this.binormal.subVectors(this.geometry.binormals[pickNext], this.geometry.binormals[pick]);
this.binormal.subVectors( this.binormal.multiplyScalar(pickt - pick).add(this.geometry.binormals[pick]);
this.geometry.binormals[pickNext],
this.geometry.binormals[pick]
);
this.binormal
.multiplyScalar(pickt - pick)
.add(this.geometry.binormals[pick]);
let dir = this.geometry.parameters.path.getTangentAt(t); let dir = this.geometry.parameters.path.getTangentAt(t);
let offset = 0; let offset = 0;
this.normal.copy(this.binormal).cross(dir); this.normal.copy(this.binormal).cross(dir);
pos.add(this.normal.clone().multiplyScalar(offset)); pos.add(this.normal.clone().multiplyScalar(offset));
this.camera.position.copy(pos); this.camera.position.copy(pos);
let lookAt = this.geometry.parameters.path.getPointAt((t + 1 / this.geometry.parameters.path.getLength()) % 1);
let lookAt = this.geometry.parameters.path.getPointAt(
(t + 1 / this.geometry.parameters.path.getLength()) % 1
);
this.camera.matrix.lookAt(this.camera.position, lookAt, this.normal); this.camera.matrix.lookAt(this.camera.position, lookAt, this.normal);
this.camera.rotation.setFromRotationMatrix( this.camera.rotation.setFromRotationMatrix(this.camera.matrix, this.camera.rotation.order);
this.camera.matrix, this.shaderMaterial.uniforms.time.value = this.clock.getElapsedTime();
this.camera.rotation.order
);
this.material.uniforms.time.value = this.clock.getElapsedTime();
requestAnimationFrame(this.render.bind(this)); requestAnimationFrame(this.render.bind(this));
this.renderer.render(this.scene, this.camera); this.renderer.render(this.scene, this.camera);
} }
@@ -136,26 +350,16 @@ export default class Sketch {
} }
new Sketch({ new Sketch({
domElement: document.getElementById("container") domElement: document.getElementById("container"),
}); });
window.addEventListener("mousedown", function (e) { window.speed = 1;
mouseIsDown = true;
});
window.addEventListener("mouseup", function (e) {
mouseIsDown = false;
});
window.addEventListener("mousemove", function (e) { function render() {
if (mouseIsDown) { requestAnimationFrame(() => {
timer += ((e.clientY / window.innerHeight) * 2 - 1) * 10; timer += window.speed;
} render();
});
}
if (timer <= 0) { render();
timer = 0;
}
});
setInterval(() => {
timer += 1
}, 10)

447
src/index.js.16021300 Normal file
View File

@@ -0,0 +1,447 @@
// Import styles
import "./styles.css";
// Import THREE library
import * as THREE from "three";
// Import vertex shader
import vertex from "./shaders/vertex.glsl";
// Import fragment shader
import fragment from "./shaders/fragment.glsl";
// Import texture images
// import txt1 from "./TunnelbandMatrix15dec2.png";
// import txt2 from "./blackedoutleft.png";
import txt1 from "./blackoutright_30000x1500.png";
import txt2 from "./full30000x1500.png";
// import txt2 from "./swirl.gif"; // Replace with the actual path of your second texture
// Initialize global timer variable
let timer = 0;
export default class Sketch {
constructor(options) {
this.clock = new THREE.Clock();
this.time = 0;
this.container = options.domElement;
this.height = this.container.offsetHeight;
this.width = this.container.offsetWidth;
this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 0.1, 1000);
this.camera.position.set(0, 0, 10);
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setPixelRatio(window.devicePixelRatio * 2);
this.container.appendChild(this.renderer.domElement);
this.normal = new THREE.Vector3();
this.binormal = new THREE.Vector3();
this.resize();
this.addObjects();
this.render();
this.setUpResize();
// this.replaceTxt1();
this.setOpacityLayer1(1, 0);
this.setOpacityLayer2(1, 30);
}
addObjects() {
var texture1 = new THREE.TextureLoader().load(txt1, (texture) => {
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
});
var texture2 = new THREE.TextureLoader().load(txt2, (texture) => {
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
});
this.shaderMaterial = new THREE.ShaderMaterial({
side: THREE.DoubleSide,
depthWrite: true,
depthTest: true,
transparent: true,
// blending: THREE.NormalBlending,
blending: THREE.NoBlending,
uniforms: {
time: { type: "f", value: 0 },
uResolution: { type: "v4", value: new THREE.Vector4() },
u_texture: { type: "t", value: texture1 },
u_texture2: { type: "t", value: texture2 },
distortionFactorX: { type: "f", value: 0 },
distortionFactorY: { type: "f", value: 0 },
repeatX: { type: "f", value: 12.0 },
repeatY: { type: "f", value: 6.0 },
aspectRatioCorrection: { type: "f", value: 15 },
transparency1: { type: "f", value: 0 },
transparency2: { type: "f", value: 0 }, // Set initial transparency for the second texture
scale: { type: "v2", value: new THREE.Vector2(1.0, 1.0) },
offset: { type: "v2", value: new THREE.Vector2(0.0, 0.0) },
rotation: { type: "f", value: 0.0 },
turbulence: { type: "f", value: 0.0 },
colorOffset: { type: "f", value: 0.0 },
brightness: { type: "f", value: 1.0 },
waveSpeed: { type: "f", value: 0.0 },
globalScale: { type: "f", value: 1.0 },
twist: { type: "f", value: 1.0 },
waveFrequency: { type: "f", value: 0.0 },
depthFactor: { type: "f", value: 0.0 },
glowIntensity: { type: "f", value: 0.0 },
pulseSpeed: { type: "f", value: 0.0 },
colorR: { type: "f", value: 1.0 },
colorG: { type: "f", value: 1.0 },
colorB: { type: "f", value: 1.0 },
},
vertexShader: vertex,
fragmentShader: fragment,
});
class CustomSinCurve extends THREE.Curve {
constructor(scale = 2) {
super();
this.scale = scale;
}
getPoint(t, optionalTarget = new THREE.Vector3()) {
const tx = Math.cos(2 * Math.PI * t);
const ty = Math.sin(2 * Math.PI * t);
const tz = 0.1 * Math.sin(8 * Math.PI * t);
return optionalTarget.set(tx, ty, tz).multiplyScalar(this.scale);
}
}
// const splineData = [
// [new THREE.Vector3(249.77046356468685, 932.2219407156813, -255.94041268503986),
// new THREE.Vector3(184.2697143587856, 340.8431828885419, -137.50911515694105),
// new THREE.Vector3(19.942904199485042, 228.58948494060985, 62.791664957972415),
// new THREE.Vector3(129.44330187699228, 123.24717120015652, 180.72662546735586),
// new THREE.Vector3(194.62366419209283, -50.957866448272654, 348.9131609506699),
// new THREE.Vector3(233.83324329738002, -6.6805514372266215, 586.011268528852),
// new THREE.Vector3(33.97204422946808, -11.55735269269492, 843.3100027995519),
// new THREE.Vector3(122.26648943463792, -206.74514914968762, 925.883739846062),
// new THREE.Vector3(386.39147370444016, -156.50797561120535, 1011.8913441984032),
// new THREE.Vector3(711.7691000196912, -348.3088368387029, 1189.6414444065897)]
// ];
// const splineData = [
// [new THREE.Vector3(473.11863126256065, 1148.7914983677936, -626.3088726774722),
// new THREE.Vector3(245.61458415195102, 1116.9549354293442, -263.87118049677656),
// new THREE.Vector3(245.61458415195102, 1116.9549354293442, -263.87118049677656),
// new THREE.Vector3(245.61458415195102, 1116.9549354293442, -263.87118049677656),
// new THREE.Vector3(204.61699075454024, 370.04031630467887, -68.48460037267392),
// new THREE.Vector3(86.44131454502019, 269.45084890937585, 62.791664957972415),
// new THREE.Vector3(72.15795829069751, 58.51161097159243, 171.57374030692884),
// new THREE.Vector3(25.789881573044692, -33.22822178799524, 348.9131609506699),
// new THREE.Vector3(136.00387125935322, -8.133815744630706, 585.6112333240656),
// new THREE.Vector3(33.97204422946808, -11.55735269269492, 843.3100027995519),
// new THREE.Vector3(125.44573300578595, -64.95811252917446, 1087.520327532037),
// new THREE.Vector3(-229.4300492080865, -204.31919716633735, 1592.4021728239306),
// new THREE.Vector3(-32.58894150524465, -427.4049046320883, 2072.332326149018),
// new THREE.Vector3(508.9934515582963, -2499.952976214704, 5435.133591888159),
// new THREE.Vector3(1759.943314976105, -3123.674630232325, 7714.175951240869)]
// ]
// const splineData = [[
// new THREE.Vector3(473.11863126256065, 1148.7914983677936, -626.3088726774722),
// new THREE.Vector3(23.51828362256837, 1128.368276997569, -619.9291758003139),
// new THREE.Vector3(63.43602909903811, 1094.885204825893, -460.9975125081666),
// new THREE.Vector3(296.1407291653776, 959.7356327576776, -503.15980942417),
// new THREE.Vector3(410.4183885943379, -618.6838591644985, -229.9284358044308),
// new THREE.Vector3(204.61699075454024, 370.04031630467887, -68.48460037267392),
// new THREE.Vector3(86.44131454502019, 269.45084890937585, 62.791664957972415),
// new THREE.Vector3(72.15795829069751, 58.51161097159243, 171.57374030692884),
// new THREE.Vector3(25.789881573044692, -33.22822178799524, 348.9131609506699),
// new THREE.Vector3(136.00387125935322, -8.133815744630706, 585.6112333240656),
// new THREE.Vector3(33.97204422946808, -11.55735269269492, 843.3100027995519),
// new THREE.Vector3(125.44573300578595, -64.95811252917446, 1087.520327532037),
// new THREE.Vector3(-229.4300492080865, -204.31919716633735, 1592.4021728239306),
// new THREE.Vector3(-32.58894150524465, -427.4049046320883, 2072.332326149018),
// new THREE.Vector3(508.9934515582963, -2499.952976214704, 5435.133591888159),
// new THREE.Vector3(1759.943314976105, -3123.674630232325, 7714.175951240869)]
// ]
const splineData = [[
new THREE.Vector3(473.11863126256065, 1148.7914983677936, -626.3088726774722),
new THREE.Vector3(119.89018791921463, 1106.433693900733, -832.5766659881987),
new THREE.Vector3(117.90596454302678, 1033.555957750614, -612.8498670255568),
new THREE.Vector3(182.54143644281098, 825.3080107623409, -480.6932058171036),
new THREE.Vector3(118.67378490442167, 396.4887161528761, -380.5280111161988),
new THREE.Vector3(280.3702856718703, 292.9366974262628, -76.78175980638068),
new THREE.Vector3(86.44131454502019, 269.45084890937585, 62.791664957972415),
new THREE.Vector3(72.15795829069751, 58.51161097159243, 171.57374030692884),
new THREE.Vector3(-18.631970330989734, -12.469964424808147, 353.11898079093527),
new THREE.Vector3(136.00387125935322, -8.133815744630706, 585.6112333240656),
new THREE.Vector3(7.613134434090028, 114.78833598781391, 843.3100027995519),
new THREE.Vector3(125.44573300578595, -64.95811252917446, 1087.520327532037),
new THREE.Vector3(-136.7078013160953, -165.54943689384953, 1375.894502480654),
new THREE.Vector3(350.7398762821747, -364.1460096594824, 2008.9271623961001),
new THREE.Vector3(684.0517345033015, -496.61732486128324, 2253.715989472005),
new THREE.Vector3(1759.943314976105, -3123.674630232325, 7714.175951240869)]]
class CustomSplineCurve extends THREE.CatmullRomCurve3 {
constructor(points) {
// super(points, false, 'catmullrom', 0.9); // Set the type to 'catmullrom' with tension 0.1
super(points, false, 'chordal'); // Set the type to 'chordal'
// super(points, false, 'centripetal'); // Set the type to 'centripetal'
}
}
// // Convert splineData to THREE.Vector3 array
// const splinePoints = splineData[0];
// const path = new CustomSplineCurve(splinePoints);
const scaleFactor = .1; // Adjust as needed
// Apply scaling to the spline points
const scaledSplinePoints = splineData[0].map(point =>
new THREE.Vector3(point.x * scaleFactor, point.y * scaleFactor, point.z * scaleFactor)
);
// Create a new spline curve with scaled points
const path = new CustomSplineCurve(scaledSplinePoints);
// Create a new spline curve
// this.geometry = new THREE.TubeGeometry(path, splinePoints.length * 100, 0.5, 20, false);
this.geometry = new THREE.TubeGeometry(path, scaledSplinePoints.length * 100, 0.5, 20, false);
// const path = new CustomSinCurve(10);
// this.geometry = new THREE.TubeGeometry(path, 200, 0.5, 20, false);
this.mesh = new THREE.Mesh(this.geometry, this.shaderMaterial);
this.scene.add(this.mesh);
window.shaderUniforms = this.shaderMaterial.uniforms;
// const defaultValues = {
// distortionFactorX: 0.0,
// distortionFactorY: 0.0,
// repeatX: 12.0,
// repeatY: 6.0,
// aspectRatioCorrection: 10.0,
// transparency1: 0.0, // Set initial transparency for the first texture
// transparency2: 1.0, // Set initial transparency for the second texture
// scale: new THREE.Vector2(1.0, 1.0),
// offset: new THREE.Vector2(0.0, 0.0),
// rotation: 0.0,
// turbulence: 0.0,
// colorOffset: 0.0,
// brightness: 1.0,
// waveFrequency: 1.0,
// depthFactor: 0.0,
// glowIntensity: 0.0,
// pulseSpeed: 1.0,
// colorR: 1.0,
// colorG: 1.0,
// colorB: 1.0,
// };
// Object.keys(defaultValues).forEach((key) => {
// window[key] = shaderUniforms[key].value = defaultValues[key];
// });
}
replaceTxt1() {
setTimeout(() => {
console.log('texture 1 replaced')
var texture = new THREE.TextureLoader().load(txt2, (texture) => {
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
});
this.shaderMaterial.uniforms.u_texture.value = texture;
}, 20000);
}
setOpacityLayer1(opacity, timeout) {
setTimeout(() => {
this.shaderMaterial.uniforms.transparency1.value = opacity;
}, timeout);
}
setOpacityLayer2(opacity, timeout) {
setTimeout(() => {
this.shaderMaterial.uniforms.transparency2.value = opacity;
}, timeout);
}
// -=-==-=-=-=-=-=-=-=-=-=-=-=-=--=
Particle(scene, burst) {
var radius = Math.random() * 0.003 + 0.0003;
var geom = cell.geometry;
var range = 10;
var offset = burst ? 200 : 350;
var saturate = Math.floor(Math.random() * 20 + 65);
var light = burst ? 20 : 56;
this.color = new THREE.Color("hsl(" + (Math.random() * range + offset) + "," + saturate + "%," + light + "%)");
var mat = new THREE.MeshPhongMaterial({
color: this.color,
// shading: THREE.FlatShading
});
this.mesh = new THREE.Mesh(geom, mat);
this.mesh.scale.set(radius, radius, radius);
this.mesh.scale.x += (Math.random() - 0.5) * 0.001;
this.mesh.scale.y += (Math.random() - 0.5) * 0.001;
this.mesh.scale.z += (Math.random() - 0.5) * 0.001;
this.mesh.position.set(0, 0, 1.5);
this.percent = burst ? 0.2 : Math.random();
this.burst = burst ? true : false;
this.offset = new THREE.Vector3((Math.random() - 0.5) * 0.025, (Math.random() - 0.5) * 0.025, 0);
this.speed = Math.random() * 0.004 + 0.0002;
if (this.burst) {
this.speed += 0.003;
this.mesh.scale.x *= 1.4;
this.mesh.scale.y *= 1.4;
this.mesh.scale.z *= 1.4;
}
this.rotate = new THREE.Vector3(-Math.random() * 0.1 + 0.01, 0, Math.random() * 0.01);
this.pos = new THREE.Vector3(0, 0, 0);
};
// =--=-==-=--=-=-=-=-=-=-==--=-==--=-=
render() {
// Define adjustable variables
let looptime = 10 * 1000; // Total time for one loop in milliseconds
let speedMultiplier = 1; // Adjust the speed of the animation
let lateralOffsetFactor = 0.1; // Adjust the lateral offset factor to control corner cutting
let interpolationFactor = 0.1; // Adjust the interpolation factor for smoother movement
let minFOV = 60; // Minimum field of view
let maxFOV = 70; // Maximum field of view
// Calculate the time parameter for the animation
this.time = timer;
let t = (this.time % looptime) / looptime;
// Get the position along the path
let pos = this.geometry.parameters.path.getPointAt(t);
// Calculate the tangent to the path at the current position
let segments = this.geometry.tangents.length;
let pickt = t * segments;
let pick = Math.floor(pickt);
let pickNext = (pick + 1) % segments;
this.binormal.subVectors(this.geometry.binormals[pickNext], this.geometry.binormals[pick]);
this.binormal.multiplyScalar(pickt - pick).add(this.geometry.binormals[pick]);
let dir = this.geometry.parameters.path.getTangentAt(t);
let offset = 0;
this.normal.copy(this.binormal).cross(dir);
pos.add(this.normal.clone().multiplyScalar(offset));
// Apply lateral offset to the camera position
pos.add(this.normal.clone().multiplyScalar(lateralOffsetFactor));
// Smooth camera movement interpolation
let nextT = (t + 1 / this.geometry.parameters.path.getLength()) % 1;
let nextPos = this.geometry.parameters.path.getPointAt(nextT);
pos.lerp(nextPos, interpolationFactor);
// Set the camera position
this.camera.position.copy(pos);
// Adjust field of view dynamically
let fov = minFOV + (maxFOV - minFOV) * t;
this.camera.fov = fov;
this.camera.updateProjectionMatrix();
// Keep camera always looking forward
let lookAt = this.geometry.parameters.path.getPointAt((t + 1 / this.geometry.parameters.path.getLength()) % 1);
this.camera.matrix.lookAt(this.camera.position, lookAt, this.normal);
this.camera.rotation.setFromRotationMatrix(this.camera.matrix, this.camera.rotation.order);
// Update shader uniform time
this.shaderMaterial.uniforms.time.value = this.clock.getElapsedTime() * speedMultiplier;
// Request next frame render
requestAnimationFrame(this.render.bind(this));
// Render the scene
this.renderer.render(this.scene, this.camera);
}
// render() {
// this.time = timer;
// let looptime = 10 * 1000;
// let t = (this.time % looptime) / looptime;
// let pos = this.geometry.parameters.path.getPointAt(t);
// // Calculate the tangent to the path at the current position
// let tangent = this.geometry.parameters.path.getTangentAt(t).normalize();
// // Define a lateral offset to simulate cutting corners
// let cornerOffset = 0.2; // Adjust the amount of corner cutting
// let lateralOffset = new THREE.Vector3(-tangent.y, tangent.x, 0).multiplyScalar(cornerOffset);
// // Apply lateral offset to the camera position
// pos.add(lateralOffset);
// // Smooth camera movement interpolation
// let nextT = (t + 1 / this.geometry.parameters.path.getLength()) % 1;
// let nextPos = this.geometry.parameters.path.getPointAt(nextT);
// pos.lerp(nextPos, 0.1); // Adjust the interpolation factor (0.05) for smoother movement
// this.camera.position.copy(pos);
// // Adjust field of view dynamically
// let minFOV = 60; // Minimum FOV
// let maxFOV = 70; // Maximum FOV
// let fov = minFOV + (maxFOV - minFOV) * t;
// this.camera.fov = fov;
// this.camera.updateProjectionMatrix();
// // Keep camera always looking forward
// let lookAt = this.geometry.parameters.path.getPointAt((t + 1 / this.geometry.parameters.path.getLength()) % 1);
// this.camera.lookAt(lookAt);
// // Update shader uniform time
// this.shaderMaterial.uniforms.time.value = this.clock.getElapsedTime();
// requestAnimationFrame(this.render.bind(this));
// this.renderer.render(this.scene, this.camera);
// }
resize() {
this.width = this.container.offsetWidth;
this.height = this.container.offsetHeight;
this.renderer.setSize(this.width, this.height);
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
}
setUpResize() {
window.addEventListener("resize", this.resize.bind(this));
}
}
new Sketch({
domElement: document.getElementById("container"),
});
window.speed = 1;
function render() {
requestAnimationFrame(() => {
timer += window.speed;
render();
});
}
render();

239
src/sandbox.js Normal file
View File

@@ -0,0 +1,239 @@
// Import styles
import "./styles.css";
// Import THREE library
import * as THREE from "three";
// Import vertex shader
import vertex from "./shaders/vertex.glsl";
// Import fragment shader
import fragment from "./shaders/fragment.glsl";
// Import texture images
import txt1 from "./TunnelbandMatrix15dec2.png";
import txt2 from "./swirl.gif"; // Replace with the actual path of your second texture
// Initialize global timer variable
let timer = 0;
export default class Sketch {
constructor(options) {
this.clock = new THREE.Clock();
this.time = 0;
this.container = options.domElement;
this.height = this.container.offsetHeight;
this.width = this.container.offsetWidth;
this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 0.1, 1000);
this.camera.position.set(0, 0, 10);
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setPixelRatio(window.devicePixelRatio * 2);
this.container.appendChild(this.renderer.domElement);
this.normal = new THREE.Vector3();
this.binormal = new THREE.Vector3();
this.resize();
this.addObjects();
this.render();
this.setUpResize();
this.replaceTxt1();
}
addObjects() {
var texture1 = new THREE.TextureLoader().load(txt1, (texture) => {
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
});
var texture2 = new THREE.TextureLoader().load(txt2, (texture) => {
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
});
this.shaderMaterial = new THREE.ShaderMaterial({
side: THREE.DoubleSide,
depthWrite: true,
depthTest: true,
transparent: true,
// blending: THREE.NormalBlending,
blending: THREE.NoBlending,
uniforms: {
time: { type: "f", value: 0 },
uResolution: { type: "v4", value: new THREE.Vector4() },
u_texture: { type: "t", value: texture1 },
u_texture2: { type: "t", value: texture2 },
distortionFactorX: { type: "f", value: 0 },
distortionFactorY: { type: "f", value: 0 },
repeatX: { type: "f", value: 12.0 },
repeatY: { type: "f", value: 6.0 },
aspectRatioCorrection: { type: "f", value: 10 },
transparency1: { type: "f", value: 1 },
transparency2: { type: "f", value: .1 }, // Set initial transparency for the second texture
scale: { type: "v2", value: new THREE.Vector2(1.0, 1.0) },
offset: { type: "v2", value: new THREE.Vector2(0.0, 0.0) },
rotation: { type: "f", value: 0.0 },
turbulence: { type: "f", value: 0.0 },
colorOffset: { type: "f", value: 0.0 },
brightness: { type: "f", value: 1.0 },
waveSpeed: { type: "f", value: 0.0 },
globalScale: { type: "f", value: 1.0 },
twist: { type: "f", value: 0.0 },
waveFrequency: { type: "f", value: 0.0 },
depthFactor: { type: "f", value: 0.0 },
glowIntensity: { type: "f", value: 0.0 },
pulseSpeed: { type: "f", value: 0.0 },
colorR: { type: "f", value: 1.0 },
colorG: { type: "f", value: 1.0 },
colorB: { type: "f", value: 1.0 },
},
vertexShader: vertex,
fragmentShader: fragment,
});
class CustomSinCurve extends THREE.Curve {
constructor(scale = 2) {
super();
this.scale = scale;
}
getPoint(t, optionalTarget = new THREE.Vector3()) {
const tx = Math.cos(2 * Math.PI * t);
const ty = Math.sin(2 * Math.PI * t);
const tz = 0.1 * Math.sin(8 * Math.PI * t);
return optionalTarget.set(tx, ty, tz).multiplyScalar(this.scale);
}
}
class SplineSinCurve extends THREE.Curve {
constructor(scale = 2) {
super();
this.scale = scale;
// Define your spline data here
this.splineData = [
[new THREE.Vector3(245.61458415195102, 1116.9549354293442, -263.87118049677656),
new THREE.Vector3(204.61699075454024, 370.04031630467887, -68.48460037267392),
new THREE.Vector3(86.44131454502019, 269.45084890937585, 62.791664957972415),
new THREE.Vector3(129.44330187699228, 85.90780735895578, 180.72662546735586),
new THREE.Vector3(25.789881573044692, -33.22822178799524, 348.9131609506699),
new THREE.Vector3(136.00387125935322, -8.133815744630706, 585.6112333240656),
new THREE.Vector3(33.97204422946808, -11.55735269269492, 843.3100027995519),
new THREE.Vector3(122.26648943463792, -206.74514914968762, 925.883739846062),
new THREE.Vector3(386.39147370444016, -156.50797561120535, 1011.8913441984032),
new THREE.Vector3(711.7691000196912, -348.3088368387029, 1189.6414444065897)]
];
// Create CatmullRomCurve3 using spline data
this.curve = new THREE.CatmullRomCurve3(this.splineData);
}
}
// const path = new CustomSinCurve(10);
// Create spline curve and get its points
const spline = new SplineSinCurve();
const points = spline.curve.getPoints(100); // Adjust number of points as needed
// Create tube geometry along spline path
this.geometry = new THREE.TubeGeometry(spline.curve, 100, 0.5, 20, false)
// this.geometry = new THREE.TubeGeometry(path, 200, 0.5, 20, false);
this.mesh = new THREE.Mesh(this.geometry, this.shaderMaterial);
this.scene.add(this.mesh);
window.shaderUniforms = this.shaderMaterial.uniforms;
// const defaultValues = {
// distortionFactorX: 0.0,
// distortionFactorY: 0.0,
// repeatX: 12.0,
// repeatY: 6.0,
// aspectRatioCorrection: 10.0,
// transparency1: 0.0, // Set initial transparency for the first texture
// transparency2: 1.0, // Set initial transparency for the second texture
// scale: new THREE.Vector2(1.0, 1.0),
// offset: new THREE.Vector2(0.0, 0.0),
// rotation: 0.0,
// turbulence: 0.0,
// colorOffset: 0.0,
// brightness: 1.0,
// waveFrequency: 1.0,
// depthFactor: 0.0,
// glowIntensity: 0.0,
// pulseSpeed: 1.0,
// colorR: 1.0,
// colorG: 1.0,
// colorB: 1.0,
// };
// Object.keys(defaultValues).forEach((key) => {
// window[key] = shaderUniforms[key].value = defaultValues[key];
// });
}
replaceTxt1() {
setTimeout(() => {
var texture = new THREE.TextureLoader().load(txt2, (texture) => {
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
});
this.shaderMaterial.uniforms.u_texture.value = texture;
}, 2000);
}
render() {
this.time = timer;
let looptime = 10 * 1000;
let t = (this.time % looptime) / looptime;
let pos = this.geometry.parameters.path.getPointAt(t);
let segments = this.geometry.tangents.length;
let pickt = t * segments;
let pick = Math.floor(pickt);
let pickNext = (pick + 1) % segments;
this.binormal.subVectors(this.geometry.binormals[pickNext], this.geometry.binormals[pick]);
this.binormal.multiplyScalar(pickt - pick).add(this.geometry.binormals[pick]);
let dir = this.geometry.parameters.path.getTangentAt(t);
let offset = 0;
this.normal.copy(this.binormal).cross(dir);
pos.add(this.normal.clone().multiplyScalar(offset));
this.camera.position.copy(pos);
let lookAt = this.geometry.parameters.path.getPointAt((t + 1 / this.geometry.parameters.path.getLength()) % 1);
this.camera.matrix.lookAt(this.camera.position, lookAt, this.normal);
this.camera.rotation.setFromRotationMatrix(this.camera.matrix, this.camera.rotation.order);
this.shaderMaterial.uniforms.time.value = this.clock.getElapsedTime();
requestAnimationFrame(this.render.bind(this));
this.renderer.render(this.scene, this.camera);
}
resize() {
this.width = this.container.offsetWidth;
this.height = this.container.offsetHeight;
this.renderer.setSize(this.width, this.height);
this.camera.aspect = this.width / this.height;
this.camera.updateProjectionMatrix();
}
setUpResize() {
window.addEventListener("resize", this.resize.bind(this));
}
}
new Sketch({
domElement: document.getElementById("container"),
});
window.speed = 8;
function render() {
requestAnimationFrame(() => {
timer += window.speed;
render();
});
}
render();

108
src/shaders/fragment.glsl
View File

@@ -1,36 +1,106 @@
// Input varying representing the texture coordinates
varying vec2 vUv; varying vec2 vUv;
uniform float time;
uniform sampler2D u_texture;
// https://www.shadertoy.com/view/4djSRW // Time variable for animation
float hash12(vec2 p){ uniform float time;
vec3 p3 = fract(vec3(p.xyx) * .1031);
uniform sampler2D u_texture; // Texture samplers for the two textures
uniform sampler2D u_texture2; // Texture samplers for the two textures
uniform float transparency1; // Transparencies (opacities) for the two textures
uniform float transparency2; // Transparencies (opacities) for the two textures
uniform vec2 scale; // UV coordinates scaling
uniform vec2 offset; // UV coordinates offset
uniform float rotation; // Rotation angle for UV coordinates
uniform float turbulence; // Turbulence factor for UV coordinates distortion
uniform float colorOffset; // Offset for color modification
uniform float brightness; // Brightness adjustment
uniform float distortionFactorX; // Distortion factor along the X-axis
uniform float repeatX; // Texture repeat along the X-axis
uniform float repeatY; // Texture repeat along the Y-axis
uniform float aspectRatioCorrection; // Correction factor for texture aspect ratio
uniform float distortionFactorY; // Distortion factor along the Y-axis
uniform float waveSpeed; // Speed of the waving effect
uniform float globalScale; // Global scaling factor for UV coordinates
uniform float twist; // Twist factor for UV coordinates
uniform float waveFrequency; // Frequency of the waving effect
uniform float depthFactor; // Depth modulation factor for waving effect
uniform float glowIntensity; // Intensity of the glow effect
uniform float pulseSpeed; // Speed of the pulsation effect
uniform float colorR; // R color components for tinting
uniform float colorG; // G color components for tinting
uniform float colorB; // B color components for tinting
// Hash function for generating pseudo-random numbers
float hash12(vec2 p) {
vec3 p3 = fract(vec3(p.xyx) * 0.1031);
p3 += dot(p3, p3.yzx + 33.33); p3 += dot(p3, p3.yzx + 33.33);
return fract((p3.x + p3.y) * p3.z); return fract((p3.x + p3.y) * p3.z);
} }
void main() { void main() {
// Get the texture coordinates
vec2 uv = vUv; vec2 uv = vUv;
uv.x *= 3.142596; // Apply scaling to the UV coordinates
uv *= scale;
const float numbers = 9.0; // Apply rotation to the UV coordinates
uv = vec2(
uv.x * cos(rotation) - uv.y * sin(rotation),
uv.x * sin(rotation) + uv.y * cos(rotation)
);
vec2 repeat = vec2(6.0, 12.0); // Apply offset to the UV coordinates
uv += offset;
vec2 cell = (uv * repeat); // Apply turbulence to the UV coordinates
uv += turbulence * sin(time * 0.1) * vec2(hash12(uv), hash12(uv * 2.0));
cell.x *= numbers; // Apply color offset to UV coordinates
cell = floor(cell); uv += colorOffset;
float rand = 100.0 * hash12(cell); // Adjust UV coordinates to account for the aspect ratio of the texture
uv *= vec2(aspectRatioCorrection, 1.0);
float offset = mod(floor(time + rand), numbers) / numbers; // Encourage wrapping by using the fract function on the UV coordinates
uv = fract(uv * repeat); uv = fract(uv);
uv.x = fract(uv.x + offset);
vec4 color = texture2D(u_texture, uv); // Sample colors from the two textures
vec4 color1 = texture2D(u_texture, uv);
vec4 color2 = texture2D(u_texture2, uv);
color -= 0.05 * vec4(vec3(rand), 1.0); // Multiply texture colors by their respective transparencies (opacities)
gl_FragColor = color; color1 *= vec4(1.0, 1.0, 1.0, transparency1);
} color2 *= vec4(1.0, 1.0, 1.0, transparency2);
// Example: This wil render the first texture on 100% and the second texture will be on top
// vec4 finalColor = mix(color1 * transparency1, vec4(0.0), transparency2) + color2 * transparency2;
// Same as before but swapped layers
// vec4 finalColor = mix(color2 * transparency2, vec4(0.0), transparency1) + color1 * transparency1;
vec4 finalColor;
if (transparency1 >= 0.0) {
finalColor = mix(color1 * transparency1, vec4(0.0), transparency2) + color2 * transparency2;
} else if (transparency2 >= 0.0) {
finalColor = mix(color2 * transparency2, vec4(0.0), transparency1) + color1 * transparency1;
}
// Modify finalColor based on brightness
finalColor.rgb *= brightness;
// Pulsation effect
float pulse = 0.5 + 0.5 * sin(time * pulseSpeed);
finalColor.rgb += pulse * glowIntensity;
// Waving effect
float wave = sin(time * waveSpeed + uv.y * waveFrequency);
uv.x += wave * depthFactor;
finalColor.rgb += wave * depthFactor;
// Set the final color as the output
gl_FragColor = finalColor;
}

35
src/shaders/fragmetgridnoanimation.glsl Normal file
View File

@@ -0,0 +1,35 @@
varying vec2 vUv;
uniform sampler2D u_texture;
// https://www.shadertoy.com/view/4djSRW
float hash12(vec2 p){
vec3 p3 = fract(vec3(p.xyx) * .1031);
p3 += dot(p3, p3.yzx + 33.33);
return fract((p3.x + p3.y) * p3.z);
}
void main() {
vec2 uv = vUv;
const float numbers = 9.0;
vec2 repeat = vec2(6.0, 12.0);
vec2 cell = floor(uv * repeat * numbers);
float rand = 100.0 * hash12(cell);
float grid = mod(cell.x + cell.y, 2.0); // Grid pattern
// Create holes by checking the hash value
float holeThreshold = 0.2;
float hole = step(holeThreshold, hash12(cell + vec2(rand)));
vec4 color = texture2D(u_texture, uv);
// Apply the grid pattern and holes
color.rgb *= mix(1.0, 0.8, grid); // Darken the grid cells
color.rgb *= hole; // Make holes transparent
gl_FragColor = color;
}

12
src/shaders/newvertex.glsl Normal file
View File

@@ -0,0 +1,12 @@
varying vec2 vUv;
uniform float time;
void main() {
vUv = uv;
// Adjust the scale factor based on your desired appearance
float scale = 0.5; // Adjust as needed
vUv.y *= scale;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

7
src/shaders/nodistort.glsl Normal file
View File

@@ -0,0 +1,7 @@
varying vec2 vUv;
uniform sampler2D u_texture;
void main() {
vec4 color = texture2D(u_texture, vUv);
gl_FragColor = color;
}

25
src/shaders/simplefragment.glsl Normal file
View File

@@ -0,0 +1,25 @@
varying vec2 vUv;
uniform sampler2D u_texture;
// https://www.shadertoy.com/view/4djSRW
float hash12(vec2 p){
vec3 p3 = fract(vec3(p.xyx) * .1031);
p3 += dot(p3, p3.yzx + 33.33);
return fract((p3.x + p3.y) * p3.z);
}
void main() {
vec2 uv = vUv;
const float numbers = 9.0;
vec2 repeat = vec2(1.0, 1.0);
vec2 cell = floor(uv * repeat * numbers);
float rand = 100.0 * hash12(cell);
vec4 color = texture2D(u_texture, uv);
gl_FragColor = color;
}

15
src/shaders/vertex.glsl
View File

@@ -1,9 +1,16 @@
// vertex.glsl
varying vec2 vUv; varying vec2 vUv;
uniform float time; uniform float time;
uniform float distortionFactorX;
uniform float distortionFactorY; // Added uniform for Y-axis distortion
void main() { void main() {
vUv = uv; vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); // Apply distortion to the X and Y coordinates
} float distortedX = position.x + sin(position.y * distortionFactorX) * 0.2;
float distortedY = position.y + cos(position.x * distortionFactorY) * 0.2;
gl_Position = projectionMatrix * modelViewMatrix * vec4(distortedX, distortedY, position.z, 1.0);
}

11
src/splinedata.js Normal file
View File

@@ -0,0 +1,11 @@
[new THREE.Vector3(473.11863126256065, 1148.7914983677936, -626.3088726774722),
new THREE.Vector3(245.61458415195102, 1116.9549354293442, -263.87118049677656),
new THREE.Vector3(204.61699075454024, 370.04031630467887, -68.48460037267392),
new THREE.Vector3(86.44131454502019, 269.45084890937585, 62.791664957972415),
new THREE.Vector3(72.15795829069751, 58.51161097159243, 171.57374030692884),
new THREE.Vector3(25.789881573044692, -33.22822178799524, 348.9131609506699),
new THREE.Vector3(136.00387125935322, -8.133815744630706, 585.6112333240656),
new THREE.Vector3(33.97204422946808, -11.55735269269492, 843.3100027995519),
new THREE.Vector3(125.44573300578595, -64.95811252917446, 1087.520327532037),
new THREE.Vector3(-229.4300492080865, -204.31919716633735, 1592.4021728239306),
new THREE.Vector3(-44.315196675292505, -352.2930021292791, 2000.2246994065724)]

BIN
src/swirl.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

0
dist/.DS_Store → src/vortex/.DS_Store vendored
View File

BIN
src/vortex/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

8
src/vortex/links/Addlime - Shatter.js.webloc Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>URL</key>
<string>https://www.addlime.com/posts/14/shatter-js/</string>
</dict>
</plist>

8
src/vortex/links/GitHub - malik-tillman:Fluid-JS- A JavaScript library that allows for easy deployment of WebGL rendered fluid simulations..webloc Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>URL</key>
<string>https://github.com/malik-tillman/Fluid-JS</string>
</dict>
</plist>

8
src/vortex/links/GitHub - pixijs:filters- Collection of community-authored custom display filters for PixiJS.webloc Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>URL</key>
<string>https://github.com/pixijs/filters?tab=readme-ov-file</string>
</dict>
</plist>

8
src/vortex/links/Shattering Images On Click – CodeMyUI.webloc Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>URL</key>
<string>https://codemyui.com/shattering-images/</string>
</dict>
</plist>

8
src/vortex/links/Vortex.webloc Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>URL</key>
<string>https://codepen.io/Avinash2009/pen/ExXyjeR</string>
</dict>
</plist>

8
src/vortex/links/Waterwave & Distortion liquid effect Using on image using Curtains.js | Ripple effect tutorial - YouTube.webloc Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>URL</key>
<string>https://www.youtube.com/watch?v=jHw1QFcF-d0</string>
</dict>
</plist>

8
src/vortex/links/WebGL Fluid Simulation.webloc Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>URL</key>
<string>https://paveldogreat.github.io/WebGL-Fluid-Simulation/</string>
</dict>
</plist>

91
src/vortex/test1.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vortex Effect</title>
<style>
body {
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
}
canvas {
border: 2px solid #fff;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const center = { x: width / 2, y: height / 2 };
const image = new Image();
let displacementScale = 0;
image.onload = function () {
ctx.drawImage(image, 0, 0, width, height);
function drawVortex() {
ctx.clearRect(0, 0, width, height);
// Draw the original image
ctx.drawImage(image, 0, 0, width, height);
// Get image data
const imageData = ctx.getImageData(0, 0, width, height);
const data = imageData.data;
// Apply vortex effect to each pixel
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const dx = x - center.x;
const dy = y - center.y;
const distanceToCenter = Math.sqrt(dx * dx + dy * dy);
// Calculate displacement based on distance from center
const displacement = displacementScale * Math.exp(-0.01 * distanceToCenter);
// Calculate new coordinates after displacement
const newX = center.x + dx * displacement / distanceToCenter;
const newY = center.y + dy * displacement / distanceToCenter;
// Copy pixel data to new position
const newIndex = (Math.floor(newY) * width + Math.floor(newX)) * 4;
const oldIndex = (y * width + x) * 4;
data[newIndex] = data[oldIndex];
data[newIndex + 1] = data[oldIndex + 1];
data[newIndex + 2] = data[oldIndex + 2];
data[newIndex + 3] = data[oldIndex + 3];
}
}
// Put modified image data back onto the canvas
ctx.putImageData(imageData, 0, 0);
// Update displacement scale for animation
displacementScale += 0.01;
// Loop the effect
requestAnimationFrame(drawVortex);
}
drawVortex();
};
// Set the image source
image.src = 'image.png';
</script>
</body>
</html>