desk2/client/webgl.js

document.addEventListener('DOMContentLoaded', main);

const vertex_shader_source = `
    attribute vec2 pos;

    uniform vec2 u_scale;
    uniform vec2 u_res;
    uniform vec2 u_translation;
    uniform int u_layer;

    void main() {
        vec2 screen01 = (pos * u_scale + u_translation) / u_res;
        vec2 screen02 = screen01 * 2.0;
        screen02.y = 2.0 - screen02.y;
        vec2 screen11 = screen02 - 1.0;
        gl_Position = vec4(screen11, u_layer, 1);
    }
`;

const fragment_shader_source = `
    precision mediump float;

    uniform vec3 u_color;

    void main() {
        gl_FragColor = vec4(u_color, 1);
    }
`;

function create_shader(gl, type, source) {
    const shader = gl.createShader(type);
    
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    
    if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        return shader;
    }
     
    console.error(type, ':', gl.getShaderInfoLog(shader));

    gl.deleteShader(shader);
}

function create_program(gl, vs, fs) {
    const program = gl.createProgram();

    gl.attachShader(program, vs);
    gl.attachShader(program, fs);
    gl.linkProgram(program);

    if (gl.getProgramParameter(program, gl.LINK_STATUS)) {
        return program;
    }
    
    console.error('link:', gl.getProgramInfoLog(program));

    gl.deleteProgram(program);
}

function perpendicular(ax, ay, bx, by, width) {
    // Place points at (stroke_width / 2) distance from the line
    // The direction is an average of perpenducalars to the previous and next points
    // if (i === 0) {
    const dirx = bx - ax;
    const diry = by - ay;
    
    let pdirx = diry;
    let pdiry = -dirx;

    const pdir_norm = Math.sqrt(pdirx * pdirx + pdiry * pdiry);

    pdirx /= pdir_norm;
    pdiry /= pdir_norm;

    return {
        'p1': {
            'x': ax + pdirx * width / 2,
            'y': ay + pdiry * width / 2,
        },

        'p2': {
            'x': ax - pdirx * width / 2,
            'y': ay - pdiry * width / 2,
        }
    };
}

const canvas_offset = { 'x': 0, 'y': 0 };
let moving = false;
let spacedown = false;
let drawing = false;
let canvas_zoom = 1.0;
let current_stroke = [];

function push_stroke_positions(stroke, stroke_width, positions) {
    let last_x1;
    let last_y1;
    let last_x2;
    let last_y2;

    const points = stroke.points;

    for (let i = 0; i < points.length; ++i) {
        const px = points[i].x;
        const py = points[i].y;

        // These might be undefined
        let nextpx;
        let nextpy;

        if (i < points.length - 1) {
            nextpx = points[i + 1].x;
            nextpy = points[i + 1].y;
        }

        if (i === 0) {
            const pps = perpendicular(px, py, nextpx, nextpy, stroke_width);
            last_x1 = pps.p1.x;
            last_y1 = pps.p1.y;
            last_x2 = pps.p2.x;
            last_y2 = pps.p2.y;
            continue;
        }

        // Place points at (stroke_width / 2) distance from the line
        const prevpx = points[i - 1].x;
        const prevpy = points[i - 1].y;

        let x1;
        let y1;
        let x2;
        let y2;

        if (i < points.length - 1) {
            const pps1 = perpendicular(px, py, nextpx, nextpy, stroke_width);
            const pps2 = perpendicular(px, py, prevpx, prevpy, stroke_width);

            const dp1x = (pps1.p2.x - pps1.p1.x);
            const dp1y = (pps1.p2.y - pps1.p1.y);

            const dp2x = (pps2.p2.x - pps2.p1.x);
            const dp2y = (pps2.p2.y - pps2.p1.y);

            if (dp1x * dp2x + dp1y * dp2y < 0) {
                x1 = (pps1.p1.x + pps2.p2.x) / 2.0;
                y1 = (pps1.p1.y + pps2.p2.y) / 2.0;

                x2 = (pps1.p2.x + pps2.p1.x) / 2.0;
                y2 = (pps1.p2.y + pps2.p1.y) / 2.0;
            } else {
                x1 = (pps1.p1.x + pps2.p1.x) / 2.0;
                y1 = (pps1.p1.y + pps2.p1.y) / 2.0;

                x2 = (pps1.p2.x + pps2.p2.x) / 2.0;
                y2 = (pps1.p2.y + pps2.p2.y) / 2.0;
            }
        } else {
            const pps = perpendicular(px, py, prevpx, prevpy, stroke_width);

            x1 = pps.p2.x;
            y1 = pps.p2.y;
            x2 = pps.p1.x;
            y2 = pps.p1.y;
        }

        positions.push(last_x1, last_y1);
        positions.push(x2, y2);
        positions.push(last_x2, last_y2);

        positions.push(last_x1, last_y1);
        positions.push(x1, y1);
        positions.push(x2, y2);

        last_x1 = x1;
        last_y1 = y1;
        last_x2 = x2;
        last_y2 = y2;
    }
}

function draw(gl, program, locations, buffers, strokes) {
    const width = window.innerWidth;
    const height = window.innerHeight;

    if (gl.canvas.width !== width || gl.canvas.height !== height) {
        gl.canvas.width = width;
        gl.canvas.height = height;
        gl.viewport(0, 0, width, height);
    }

    gl.clearColor(0, 0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.useProgram(program);
    gl.enableVertexAttribArray(locations['pos']);

    gl.uniform2f(locations['u_res'], width, height);
    gl.uniform2f(locations['u_scale'], canvas_zoom, canvas_zoom);
    gl.uniform2f(locations['u_translation'], canvas_offset.x, canvas_offset.y);

    const positions = [];
    const stroke_width = 4;

    for (const stroke of strokes) {
        push_stroke_positions(stroke, stroke_width, positions);
    }

    if (current_stroke.length > 0) {
        push_stroke_positions({'points': current_stroke}, stroke_width, positions);
    }

    gl.bindBuffer(gl.ARRAY_BUFFER, buffers['pos']);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
     
    {
        // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
        const size = 2;          // 2 components per iteration
        const type = gl.FLOAT;   // the data is 32bit floats
        const normalize = false; // don't normalize the data
        const stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
        const offset = 0;        // start at the beginning of the buffer
        gl.vertexAttribPointer(locations['pos'], size, type, normalize, stride, offset);
    }

    {
        const offset = 0;
        const count = positions.length / 2;
        gl.uniform3f(locations['u_color'], 0.2, 0.2, 0.2);
        gl.uniform1i(locations['u_layer'], 0);
        gl.drawArrays(gl.TRIANGLES, offset, count);

        gl.uniform3f(locations['u_color'], 1, 0, 0);
        gl.uniform1i(locations['u_layer'], 1);
        gl.drawArrays(gl.POINTS, offset, count);
    }

    window.requestAnimationFrame(() => draw(gl, program, locations, buffers, strokes));
}

function main() {
    const canvas = document.querySelector('#c');
    const gl = canvas.getContext('webgl');

    if (!gl) {
        console.error('FUCK!')
        return;
    }

    const vertex_shader = create_shader(gl, gl.VERTEX_SHADER, vertex_shader_source);
    const fragment_shader = create_shader(gl, gl.FRAGMENT_SHADER, fragment_shader_source);
    const program = create_program(gl, vertex_shader, fragment_shader)

    const locations = {};
    const buffers = {};

    locations['pos'] = gl.getAttribLocation(program, 'pos');
    locations['u_res'] = gl.getUniformLocation(program, 'u_res');
    locations['u_scale'] = gl.getUniformLocation(program, 'u_scale');
    locations['u_translation'] = gl.getUniformLocation(program, 'u_translation');
    locations['u_color'] = gl.getUniformLocation(program, 'u_color');
    locations['u_layer'] = gl.getUniformLocation(program, 'u_layer');

    buffers['pos'] = gl.createBuffer();

    const strokes = [
        {
            'points': [
                {'x': 100, 'y': 100},
                {'x': 200, 'y': 200},
                {'x': 300, 'y': 100},
            ]
        }
    ]

    window.addEventListener('keydown', (e) => {
        if (e.code === 'Space') {
            spacedown = true;
        }
    });

    window.addEventListener('keyup', (e) => {
        if (e.code === 'Space') {
            spacedown = false;
            moving = false;
        }
    });

    canvas.addEventListener('mousedown', (e) => {
        if (spacedown) {
            moving = true;
            return;
        }

        const x = cursor_x = (e.clientX - canvas_offset.x) / canvas_zoom;
        const y = cursor_y = (e.clientY - canvas_offset.y) / canvas_zoom;
        
        current_stroke.length = 0;
        current_stroke.push({'x': x, 'y': y});
        drawing = true;
    });

    canvas.addEventListener('mousemove', (e) => {
        if (moving) {
            canvas_offset.x += e.movementX;
            canvas_offset.y += e.movementY;
            return;
        }

        if (drawing) {
            const x = cursor_x = (e.clientX - canvas_offset.x) / canvas_zoom;
            const y = cursor_y = (e.clientY - canvas_offset.y) / canvas_zoom;

            current_stroke.push({'x': x, 'y': y});
        }
    });

    canvas.addEventListener('mouseup', (e) => {
        if (spacedown) {
            moving = false;
            return;
        }

        if (drawing) {
            strokes.push({'points': process_stroke(current_stroke)});
            current_stroke.length = 0;
            drawing = false;
            return;
        }
    });

    canvas.addEventListener('wheel', (e) => {
        const x = Math.round((e.clientX - canvas_offset.x) / canvas_zoom);
        const y = Math.round((e.clientY - canvas_offset.y) / canvas_zoom);

        const dz = (e.deltaY < 0 ? 0.1 : -0.1);
        const old_zoom = canvas_zoom;

        canvas_zoom *= (1.0 + dz);

        if (canvas_zoom > 10.0) {
            canvas_zoom = old_zoom;
            return;
        }

        if (canvas_zoom < 0.2) {
            canvas_zoom = old_zoom;
            return;
        }

        const zoom_offset_x = Math.round((dz * old_zoom) * x);
        const zoom_offset_y = Math.round((dz * old_zoom) * y);

        canvas_offset.x -= zoom_offset_x;
        canvas_offset.y -= zoom_offset_y;
    });

    window.requestAnimationFrame(() => draw(gl, program, locations, buffers, strokes));
}