[해피CGI][cgimall] Neuro Noise (GLSL Shader)

신경 흐름을 나타내는 백그라운드 효과 입니다.
마우스 커서에 의해 흐름에 외곡을 줄 수 있습니다.
HTML, CSS, JS를 사용하였습니다.
자세한 내용은 데모사이트 주소에서 확인하실 수 있습니다.


HTML

<div class="content">

    <div class="section">

        <div>

            Neural Noise

        </div>

    </div>

    <div class="section">

        <div>

            GLSL shader based on @zozuar artwork

        </div>

    </div>

    <div class="section">

        <div>

            linkedIn

  codepen

  X (twitter)

        </div>

    </div>

</div>

 

<canvas id="neuro"></canvas>

 

 

<script type="x-shader/x-fragment" id="vertShader">

    precision mediump float;

 

    varying vec2 vUv;

    attribute vec2 a_position;

 

    void main() {

        vUv = .5 * (a_position + 1.);

        gl_Position = vec4(a_position, 0.0, 1.0);

    }

</script>

 

<script type="x-shader/x-fragment" id="fragShader">

    precision mediump float;

 

    varying vec2 vUv;

    uniform float u_time;

    uniform float u_ratio;

    uniform vec2 u_pointer_position;

    uniform float u_scroll_progress;

 

    vec2 rotate(vec2 uv, float th) {

        return mat2(cos(th), sin(th), -sin(th), cos(th)) * uv;

    }

 

    float neuro_shape(vec2 uv, float t, float p) {

        vec2 sine_acc = vec2(0.);

        vec2 res = vec2(0.);

        float scale = 8.;

 

        for (int j = 0; j < 15; j++) {

            uv = rotate(uv, 1.);

            sine_acc = rotate(sine_acc, 1.);

            vec2 layer = uv * scale + float(j) + sine_acc - t;

            sine_acc += sin(layer);

            res += (.5 + .5 * cos(layer)) / scale;

            scale *= (1.2 - .07 * p);

        }

        return res.x + res.y;

    }

 

    void main() {

        vec2 uv = .5 * vUv;

        uv.x *= u_ratio;

 

        vec2 pointer = vUv - u_pointer_position;

        pointer.x *= u_ratio;

        float p = clamp(length(pointer), 0., 1.);

        p = .5 * pow(1. - p, 2.);

 

        float t = .001 * u_time;

        vec3 color = vec3(0.);

 

        float noise = neuro_shape(uv, t, p);

 

        noise = 1.2 * pow(noise, 3.);

        noise += pow(noise, 10.);

        noise = max(.0, noise - .5);

        noise *= (1. - length(vUv - .5));

 

        color = normalize(vec3(.2, .5 + .4 * cos(3. * u_scroll_progress), .5 + .5 * sin(3. * u_scroll_progress)));

 

        color = color * noise;

 

        gl_FragColor = vec4(color, noise);

    }

</script>

   

CSS

body, html {

    margin: 0;

    padding: 0;

    background-color: #151912;

 overflow-x: hidden;

}

 

.content {

    width: 100vw;

    font-family: 'Times New Roman', serif;

}

 

.section {

    width: 100%;

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #FFF6F7;

    text-align: center;

}

 

.section > div {

    width: 90%;

}

 

.section:nth-child(1) {

    font-size: 20vh;

}

 

 

.section:nth-child(2) {

    font-size: 10vh;

}

 

.section:nth-child(3) {

    font-size: 8vh;

}

 

.section:nth-child(2) > div {

    max-width: 800px

}

 

.section:nth-child(3) > div {

    max-width: 900px

}

 

.section:nth-child(3) a {

    padding: 0 .3em;

}

 

canvas#neuro {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    pointer-events: none;

    opacity: .95;

}

 

a {

    display: inline-block;

    text-decoration: none;

    color: inherit;

    font-weight: inherit;

    font-style: inherit;

}

 

a:hover {

    font-weight: inherit;

    text-decoration: none;

    color: rgb(160, 160, 255);

}

 

a:active {

    color: rgb(160, 255, 255);

}

 

body, html {

    margin: 0;

    padding: 0;

    background-color: #151912;

}

 

.content {

    width: 100vw;

    font-family: 'Times New Roman', serif;

}

 

.section {

    width: 100%;

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #FFF6F7;

    text-align: center;

}

 

.section > div {

    width: 90%;

}

 

.section:nth-child(1) {

    font-size: 20vh;

}

 

.section:nth-child(2) {

    font-size: 10vh;

}

 

.section:nth-child(3) {

    font-size: 8vh;

}

 

.section:nth-child(2) > div {

    max-width: 800px

}

 

.section:nth-child(3) > div {

    max-width: 900px

}

 

.section:nth-child(3) a {

    padding: 0 .3em;

}

 

canvas#neuro {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    pointer-events: none;

    opacity: .95;

}

 

a {

    display: inline-block;

    text-decoration: none;

    color: inherit;

    font-weight: inherit;

    font-style: inherit;

}

 

a:hover {

    font-weight: inherit;

    text-decoration: none;

    color: rgb(160, 160, 255);

}

 

a:active {

    color: rgb(160, 255, 255);

}