glslshaderwebglfragment-shader

GLSL fragment shader Sine wave change the direction and color

I have glsl Fragment shader code need to change the line color, background color and, direction of the sine wave

eprecision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

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

     float e = 0.0;
     for (float i=3.0;i<=15.0;i+=1.0) {
          e += 0.007/abs( (i/15.) +sin((u_time/2.0) + 0.15*i*(uv.x) *( cos(i/4.0 + 
           (u_time / 2.0) + uv.x*2.2) ) ) + 2.5*uv.y);
     gl_FragColor = vec4( vec3(e/1.6, e/11.6, e/1.6), 1.0); 
     }
}

Lines are now in blue, background is black and direction is x axis, I need a help to change the line color to be black, background white and direction y axis (vertical).

And im looking for something like this, it would be greatly appreciated if you guys could help me. enter image description here

Solution

  • I was playing a little bit, with your task...

    I need a help to change the line color to be black, background white and direction... And im looking for something like this...

    It seems to me that the general idea of ​​your example from the image has been retained. I didn't have enough time to perfectly recreate the shape, because my knowledge in mathematics comes down to adding two and two... However, using the base of my shader you will have no trouble creating what you want, either by adding a third set of curves or by modifying the existing one. My original idea was to create a separate set of curves for each gap in the curves in your example. But I didn't have time to elaborate it.

    <script type="importmap">
  {
"imports": {
  "three": "https://unpkg.com/three@0.166.0/build/three.module.js",
  "three/addons/": "https://unpkg.com/three@0.166.0/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>

    ...and about your task from title - changing BG, curves, degree and sine.

    <script type="importmap">
      {
    "imports": {
      "three": "https://unpkg.com/three@0.166.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.166.0/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>