anotherTunnelMessToWorkWith

2024-02-23 11:28:00 +01:00
parent 8d8f7aacf6
commit 26fd76c2a1
57 changed files with 1320 additions and 112 deletions
@@ -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":{}}}
@@ -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":{}}}
@@ -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":{}}}
@@ -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":{}}}
@@ -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":{}}}
@@ -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":{}}
@@ -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":{}}}
@@ -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":{}}}
@@ -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":{}}}
@@ -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":{}}}
@@ -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":{}}}
@@ -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":{}}}
@@ -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":{}}}
@@ -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":{}}}
@@ -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":{}}}
@@ -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":{}}}
@@ -1 +1,2 @@
 /node_modules/
+/dist
@@ -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>
@@ -1,14 +1,25 @@
-// inspiration from Etienne Jacob
-// https://www.thisiscolossal.com/wp-content/uploads/2018/12/agifcolossaltd2opt.gif
-
+// Import styles
 import "./styles.css";
+
+// Import THREE library
 import * as THREE from "three";
-// import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+
+// Import vertex shader
 import vertex from "./shaders/vertex.glsl";
+
+// Import fragment shader
 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 mouseIsDown = false;
+
 export default class Sketch {
  constructor(options) {
    this.clock = new THREE.Clock();
@@ -16,50 +27,81 @@ export default class Sketch {
    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 = 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.controls = new OrbitControls(this.camera, 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() {
-    const texture = new THREE.TextureLoader().load(txt, (texture) => {
+    var texture1 = new THREE.TextureLoader().load(txt1, (texture) => {
      texture.minFilter = 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,
-      // transparent:true,
-      // wireframe: true,
+      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: 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,
-      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;
      }

@@ -67,22 +109,211 @@ export default class Sketch {
        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 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)]
+    // ]
+
+    // 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'

-    this.geometry = new THREE.TubeGeometry(path, 200, 0.5, 20, false);
-    this.mesh = new THREE.Mesh(this.geometry, this.material);
-    this.scene.add(this.mesh);
      }
+    }
+
+    // // 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() {
    this.time = timer;
-
-    // https://threejs.org/examples/webgl_geometry_extrude_splines.html
    let looptime = 10 * 1000;
    let t = (this.time % looptime) / looptime;
    let pos = this.geometry.parameters.path.getPointAt(t);
@@ -90,35 +321,18 @@ export default class Sketch {
    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]);
-
+    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
-    );
-
+    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.material.uniforms.time.value = this.clock.getElapsedTime();
+    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);
  }

@@ -136,26 +350,16 @@ export default class Sketch {
 }

 new Sketch({
-  domElement: document.getElementById("container")
+  domElement: document.getElementById("container"),
 });

-window.addEventListener("mousedown", function (e) {
-  mouseIsDown = true;
-});
-window.addEventListener("mouseup", function (e) {
-  mouseIsDown = false;
-});
+window.speed = 1;

-window.addEventListener("mousemove", function (e) {
-  if (mouseIsDown) {
-    timer += ((e.clientY / window.innerHeight) * 2 - 1) * 10;
-  }
+function render() {
+  requestAnimationFrame(() => {
+    timer += window.speed;
+    render();
+  });
+}

-  if (timer <= 0) {
-    timer = 0;
-  }
-});
-
-setInterval(() => {
-  timer += 1
-}, 10)
+render();
@@ -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();
@@ -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();
@@ -1,36 +1,106 @@
+// Input varying representing the texture coordinates
 varying vec2 vUv;
-uniform float time;
-uniform sampler2D u_texture;

-// https://www.shadertoy.com/view/4djSRW
-float hash12(vec2 p){
-  vec3 p3  = fract(vec3(p.xyx) * .1031);
+// Time variable for animation
+uniform float time;
+
+
+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);
  return fract((p3.x + p3.y) * p3.z);
 }

 void main() {
+  // Get the texture coordinates
  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;
-  cell = floor(cell);
+  // Apply color offset to UV coordinates
+  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;
-  uv = fract(uv * repeat);
-  uv.x = fract(uv.x + offset);
+  // Encourage wrapping by using the fract function on the UV coordinates
+  uv = fract(uv);

-  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);
-  gl_FragColor = color;
+  // Multiply texture colors by their respective transparencies (opacities)
+  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;
 }
@@ -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;
+}
@@ -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);
+}
@@ -0,0 +1,7 @@
+varying vec2 vUv;
+uniform sampler2D u_texture;
+
+void main() {
+  vec4 color = texture2D(u_texture, vUv);
+  gl_FragColor = color;
+}
@@ -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;
+}
@@ -1,9 +1,16 @@
+// vertex.glsl
+
 varying vec2 vUv;
 uniform float time;
-
+uniform float distortionFactorX;
+uniform float distortionFactorY;  // Added uniform for Y-axis distortion

 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);
 }
@@ -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)]
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
				`@@ -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":{}}}
				`@@ -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":{}}}`
				`@@ -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":{}}}`
				`@@ -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":{}}}`
				`@@ -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":{}}}`
				`@@ -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":{}}`
				`@@ -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":{}}}`
				`@@ -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":{}}}
				`@@ -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":{}}}
				`@@ -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":{}}}`