CodePen Embed - Fragment Shaders II

<div class='container'>
    <div class='canvas-wrapper'>
        <canvas id='canvas'></canvas>
    </div>
</div>


<script id='vertex-shader' type='x-shader/x-vertex'>
    precision mediump float;

    attribute vec2 a_position;

    void main() {
        gl_Position = vec4(a_position, 0, 1);
    }
</script>


<script id='fragment-shader' type='x-shader/x-fragment'>
    precision mediump float;

    uniform sampler2D u_texture;
    uniform vec2 u_mouse_position;
    uniform float u_canvas_size;
    uniform float u_time;

    void main() {
        vec2 texture_coord = gl_FragCoord.xy / u_canvas_size;

        gl_FragColor = texture2D(u_texture, texture_coord);

        float dist = distance(texture_coord, u_mouse_position / u_canvas_size);

        if (dist < 0.3) {
            return;
        }

        float value = sin((texture_coord.y - texture_coord.x) * 200.0);

        if (value > 0.0) {
            gl_FragColor.rgb *= dist;
        } else {
            gl_FragColor.rgb *= dist / 10.0;
        }
    }
</script>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.container {
    position: absolute;
    height: 90vmin;
    width: 90vmin;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
    overflow: hidden;
    border-radius: 5px;
    padding: 15px;
    background: rgba(255, 255, 255, .9);
}

.canvas-wrapper {
    border-radius: 5px;
    overflow: hidden;
}

canvas {
    display: block;
}

body {
    overflow: hidden;


background-color: #00140a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(338,683,336)'%3E%3Cstop offset='0' stop-color='%2300140a'/%3E%3Cstop offset='1' stop-color='%23261212'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='300' height='250' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.02'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
}

View Compiled

const IDs = {
    canvas: 'canvas',
    shaders: {
        vertex: 'vertex-shader',
        fragment: 'fragment-shader'
    }
};


const CANVAS = document.getElementById(IDs.canvas);
const GL = canvas.getContext('webgl');

let PROGRAM;


main();


function main() {
    clearCanvas();
    createPlane();
    createProgram();
    createTexture();
    updateCanvasSize();
    initEventListeners();
    draw();
}


function clearCanvas() {
    GL.clearColor(0.26, 1, 0.93, 1.0);
    GL.clear(GL.COLOR_BUFFER_BIT);
}


function createPlane() {
    GL.bindBuffer(GL.ARRAY_BUFFER, GL.createBuffer());
    GL.bufferData(
        GL.ARRAY_BUFFER,
        new Float32Array([
            -1, -1,
            -1,  1,
             1, -1,
             1,  1
        ]),
        GL.STATIC_DRAW
    );
}


function createProgram() {
    const shaders = getShaders();

    PROGRAM = GL.createProgram();

    GL.attachShader(PROGRAM, shaders.vertex);
    GL.attachShader(PROGRAM, shaders.fragment);
    GL.linkProgram(PROGRAM);
    
    const vertexPositionAttribute = GL.getAttribLocation(PROGRAM, 'a_position');
    
    GL.enableVertexAttribArray(vertexPositionAttribute);
    GL.vertexAttribPointer(vertexPositionAttribute, 2, GL.FLOAT, false, 0, 0);

    GL.useProgram(PROGRAM);
}


function getShaders() {
    return {
        vertex: compileShader(
            GL.VERTEX_SHADER,
            document.getElementById(IDs.shaders.vertex).textContent
        ),
        fragment: compileShader(
            GL.FRAGMENT_SHADER,
            document.getElementById(IDs.shaders.fragment).textContent
        )
    };
}


function compileShader(type, source) {
    const shader = GL.createShader(type);

    GL.shaderSource(shader, source);
    GL.compileShader(shader);
    
    console.log(GL.getShaderInfoLog(shader));

    return shader;
}


function createTexture() {
    const image = new Image();

    image.crossOrigin = 'anonymous';

    image.onload = () => {
        const texture = GL.createTexture();
        
        GL.activeTexture(GL.TEXTURE0);
        GL.bindTexture(GL.TEXTURE_2D, texture);
        GL.pixelStorei(GL.UNPACK_FLIP_Y_WEBGL, true);
        GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGB, GL.RGB, GL.UNSIGNED_BYTE, image);
        GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_S, GL.CLAMP_TO_EDGE);
        GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_T, GL.CLAMP_TO_EDGE);
        GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.LINEAR);

        GL.uniform1i(GL.getUniformLocation(PROGRAM, 'u_texture'), 0);
    };

    // image.src = 'https://78.media.tumblr.com/b3c5e28fb0434e1e3f71f51085e06e54/tumblr_pea2d2SDUl1xujoc5o1_540.jpg';
    // Seems like tumblr has been blocked in Russia, so I changed the image to repair demos in my article.
    image.src = 'https://picsum.photos/id/502/1024/1024';
}




function updateCanvasSize() {
    const size = Math.ceil(Math.min(window.innerHeight, window.innerWidth) * .9) - 30;

    CANVAS.height = size;
    CANVAS.width = size;

    GL.viewport(0, 0, GL.canvas.width, GL.canvas.height);
    GL.uniform1f(GL.getUniformLocation(PROGRAM, 'u_canvas_size'),
            Math.max(CANVAS.height, CANVAS.width));
}


function initEventListeners() {
    window.addEventListener('resize', updateCanvasSize);

    document.addEventListener('mousemove', (e) => {
        let rect = CANVAS.getBoundingClientRect();

        MOUSE_POSITION = [
            e.clientX - rect.left,
            rect.height - (e.clientY - rect.top)
        ];

        GL.uniform2fv(GL.getUniformLocation(PROGRAM, 'u_mouse_position'), MOUSE_POSITION);
    });
}


function draw(timeStamp) {
    GL.uniform1f(GL.getUniformLocation(PROGRAM, 'u_time'), timeStamp / 1000.0);

    
    GL.drawArrays(GL.TRIANGLE_STRIP, 0, 4);

    requestAnimationFrame(draw);
}

View Compiled

This Pen is owned by Ivan Bogachev on CodePen.

See more by @sfi0zy on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.