Фрагментный шейдер GLSL Синусоидальная волна меняет направление и цвет

<script type = "importmap">
  {
"imports": {
  "three": "https://unpkg.com/[email protected]/build/three.module.js",
  "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
}
  }
</script>

<script type = "module">

// -----------FULL SCREEN O.O---------------


import * as THREE from "three";

const SHADER_WIDTH = 800;
const SHADER_HEIGHT = 750;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.PlaneGeometry(4, 4);

let uniforms = {
    u_resolution: { value: new THREE.Vector2(SHADER_WIDTH, SHADER_HEIGHT) },
    u_time: { value: 0.0 }
};

const material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: `
        void main() {
            gl_Position = vec4(position, 1.0);
        }
    `,
    fragmentShader: `
    precision mediump float;
    uniform vec2 u_resolution;
    uniform float u_time;

    //----------Random calculation - logic-----------

    float random(float seed) {
        return fract(sin(seed * 82.9898) * 43758.5453);
    }

    //----------Noise calculation - logic-----------

    float noise(vec2 p) {
        float total = 0.0;
        float frequency = 1.0;
        float amplitude = 1.0;
        float maxValue = 0.0;

        for (int i = 0; i < 8; i++) {
            total += random(dot(p * frequency, vec2(12.9898, 78.233))) * amplitude;
            maxValue += amplitude;
            frequency *= 2.0;
            amplitude *= 2.5;
        }
        return total / maxValue;
    }

    //----------Mask function - logic-----------

    float curveMask(float y, float curveIndex, float lowerBoundOffset, float upperBoundOffset) {
        float lowerBound = lowerBoundOffset + 0.51 * curveIndex;
        float upperBound = upperBoundOffset + 0.48 * curveIndex;
        return smoothstep(lowerBound, upperBound, y);
    }

    void main() {
        vec2 uv = (gl_FragCoord.xy - u_resolution * 0.6) / max(u_resolution.x, u_resolution.y) * 2.5;

        float extraCurveValue = 0.0;
        float secondCurveValue = 0.0;

        //----------Main set of curves - logic-----------

        for (float i = 7.31; i <= 12.0; i += 0.76) {
            float noiseFactor = noise(vec2(u_time, i) * 0.5) * 0.1;
            float perturbedY = uv.y + noiseFactor * 7.5;
            float lineWidth = 0.0015 + (i - 5.5) * 0.0011;
            float offsetX = 0.07;
            float curveEffect = lineWidth / abs(
                (i / 10.0) + sin((u_time / 2.0) + 0.15 * i * perturbedY * (cos(i / 4.0 + (u_time / 2.0) + uv.y * 8.2))) + 4.0 * (uv.x - offsetX)
            );

            float mask = curveMask(uv.y, i - 7.4, -0.5, -0.9);
            extraCurveValue += curveEffect * mask;
        }

        //----------Second set of curves - logic-----------

        for (float i = 1.4; i <= 5.7; i += 1.25) {
            float noiseFactor = noise(vec2(u_time, i) * 0.5) * 0.01;
            float perturbedY = uv.y + noiseFactor * 7.5;
            float lineWidth = 0.015 + (i - 4.0) * 0.004;
            float offsetX = 0.15;
            float curveEffect = lineWidth / abs(
                (i / 8.0) + sin((u_time / 2.0) + 0.15 * i * perturbedY * (sin(i / 1.0 + (u_time / 2.0) + uv.y * 10.2))) 
                + 4.0 * (uv.x - offsetX)
            );

            float secondMask = curveMask(uv.y, i - 2.95, -0.65, -0.8);
            secondCurveValue += curveEffect * secondMask;
        }

        //----------Fillings "gaps" - gradient-----------

        float combinedValue = max(extraCurveValue, secondCurveValue);
        float gradient = clamp(2.0 - abs(combinedValue) * 5.5, 0.0, 1.0);

        gl_FragColor = vec4(vec3(gradient), 1.0);
    }
    `
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onWindowResize);

</script>

<script type = "importmap">
      {
    "imports": {
      "three": "https://unpkg.com/[email protected]/build/three.module.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
    }
      }
    </script>

    <script type = "module">

import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.PlaneGeometry(4, 4);

let uniforms = {
    u_resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
    u_time: { value: 0.0 }
};

const material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: `
    varying vec2 vUv;
    void main() {
        vUv = uv;
        gl_Position = vec4(position, 1.0);
    }
    `,
    fragmentShader: `
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

varying vec2 vUv;

void main() {
    vec2 uv = vUv * 2.0 - 1.0;

    // Rotate 90 degrees 
    vec2 rotatedUv = vec2(-uv.y, uv.x);

    rotatedUv *= 2.0;
    vec3 color = vec3(1.0);

    float e = 0.0;

    for (float i = 3.0; i <= 15.0; i += 1.0) {
       
        float curve = 0.007 / abs((i / 15.0) + sin((u_time / 2.0) - 0.15 * i * (rotatedUv.x) * cos(i / 4.0 + (u_time / 2.0) + rotatedUv.x * 2.2)) + 2.5 * rotatedUv.y);
        e = max(e, curve);
    }

    color = mix(color, vec3(0.0), e);

    gl_FragColor = vec4(color, 1.0);
}

    `
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

function animate() {
    requestAnimationFrame(animate);
    uniforms.u_time.value += 0.01;
    renderer.render(scene, camera);
}
animate();

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onWindowResize);

    </script>