<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;

    #define NUMBER_OF_POINTS 20
    #define NUMBER_OF_TEXTURES 3
    #define EPSILON 0.005

    uniform sampler2D u_textures[NUMBER_OF_TEXTURES];
    uniform float u_canvas_size;
    uniform vec2 u_points[NUMBER_OF_POINTS];


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

        float min_distance = 1.0;
        int area_index = 0;

        for (int i = 0; i < NUMBER_OF_POINTS; i++) {
            float current_distance = distance(texture_coord, u_points[i]);

            if (current_distance < min_distance) {
                min_distance = current_distance;
                area_index = i;
            }
        }

        int texture_index = int(mod(float(area_index), float(NUMBER_OF_TEXTURES)));

        if (texture_index == 0) {
            gl_FragColor = texture2D(u_textures[0], texture_coord);
        } else if (texture_index == 1) {
            gl_FragColor = texture2D(u_textures[1], texture_coord);
        } else if (texture_index == 2) {
            gl_FragColor = texture2D(u_textures[2], texture_coord);
        }

        int number_of_near_points = 0;

        for (int i = 0; i < NUMBER_OF_POINTS; i++) {
            if (distance(texture_coord, u_points[i]) < min_distance + EPSILON) {
                number_of_near_points++;
            }
        }

        if (number_of_near_points > 1) {
            gl_FragColor.rgb = vec3(0.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 URLS = {
    /*
    textures: [
        'https://78.media.tumblr.com/b3c5e28fb0434e1e3f71f51085e06e54/tumblr_pea2d2SDUl1xujoc5o1_540.jpg',
        'https://78.media.tumblr.com/19522bae2a3b9e193a2ad027f2ed4473/tumblr_pea2d2SDUl1xujoc5o3_540.jpg',
        'https://78.media.tumblr.com/5be59761ad1d792b57075eaec9396949/tumblr_pea2d2SDUl1xujoc5o2_540.jpg'
    ]
    */
    
    // Seems like tumblr has been blocked in Russia, so I changed the images to repair demos in my article.
    textures: [
        'https://picsum.photos/id/502/1024/1024',
        'https://picsum.photos/id/559/1024/1024',
        'https://picsum.photos/id/558/1024/1024',
    ]
};


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

let PROGRAM;

const NUMBER_OF_POINTS = 20;
let POINTS = [];


main();


function main() {
    clearCanvas();
    createPlane();
    createProgram();
    createTextures();
    updateCanvasSize();
    initEventListeners();
    createPoints();
    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 createTextures() {
    for (let i = 0; i < URLS.textures.length; i++) {
        createTexture(i);
    }
}


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

    image.crossOrigin = 'anonymous';

    image.onload = () => {
        const texture = GL.createTexture();
        
        GL.activeTexture(GL['TEXTURE' + index]);
        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_textures[' + index + ']'), index);
    };

    image.src = URLS.textures[index];
}



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);
}


function createPoints() {
    for (let i = 0; i < NUMBER_OF_POINTS; i++) {
        POINTS.push([Math.random(), Math.random()]);
    }
}


function movePoints(timeStamp) {
    if (timeStamp) {
        for (let i = 0; i < NUMBER_OF_POINTS; i++) {
            POINTS[i][0] += Math.sin(i * timeStamp / 5000) / 500;
            POINTS[i][1] += Math.cos(i * timeStamp / 5000) / 500;
        }


        for (let i = 0; i < NUMBER_OF_POINTS; i++) {
            for (let j = i; j < NUMBER_OF_POINTS; j++) {
                let deltaX = POINTS[i][0] - POINTS[j][0];
                let deltaY = POINTS[i][1] - POINTS[j][1];
                let distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

                if (distance < 0.1) {
                    POINTS[i][0] += 0.001 * Math.sign(deltaX);
                    POINTS[i][1] += 0.001 * Math.sign(deltaY);
                    POINTS[j][0] -= 0.001 * Math.sign(deltaX);
                    POINTS[j][1] -= 0.001 * Math.sign(deltaY);
                }
            }
        }
    }
}


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

    movePoints(timeStamp);

    for (let i = 0; i < NUMBER_OF_POINTS; i++) {
        GL.uniform2fv(GL.getUniformLocation(PROGRAM, 'u_points[' + i + ']'), POINTS[i]);
    }
    
    GL.drawArrays(GL.TRIANGLE_STRIP, 0, 4);

    requestAnimationFrame(draw);
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.