lines

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<canvas></canvas>
<script>

const vertexShader = `#version 300 es
uniform vec2 screen;
in vec2 position;
in vec3 color;
out vec3 pcolor;

void main() {
  gl_Position = vec4(position / screen, 0, 1);
  pcolor = color;
}
`

const fragmentShader = `#version 300 es
precision mediump float;
in vec3 pcolor;
out vec4 color;
 
void main() {
  color = vec4(pcolor, 1);
}
`
const scale = 4
const canvas = document.querySelector('canvas')
let gl = canvas.getContext('webgl2', { antialias:false });

// shader setup
let program = createProgram(vertexShader, fragmentShader);
gl.useProgram(program);

var positionBuffer = gl.createBuffer();
var positionData = new Float32Array(80000)

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positionData, gl.STATIC_DRAW);
var positionAttribute = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(positionAttribute);
gl.vertexAttribPointer(positionAttribute, 2, gl.FLOAT, false, 0, 0);

var colorBuffer = gl.createBuffer();
var colorData = new Float32Array(80000)

gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, colorData, gl.STATIC_DRAW);
var colorAttribute = gl.getAttribLocation(program, "color");
gl.enableVertexAttribArray(colorAttribute);
gl.vertexAttribPointer(colorAttribute, 3, gl.FLOAT, false, 0, 0);

function api() {
    let index = 0

    function clear(r, g, b) {
        gl.clearColor(r, g, b, 1);
    }
    
    function line(x1, y1, x2, y2, r1=1, g1=1, b1=1, r2=r1, g2=g1, b2=b1) {
        positionData[index*2+0] = x1
        positionData[index*2+1] = y1
        positionData[index*2+2] = x2
        positionData[index*2+3] = y2
        colorData[index*3+0] = r1
        colorData[index*3+1] = g1
        colorData[index*3+2] = b1
        colorData[index*3+3] = r2
        colorData[index*3+4] = g2
        colorData[index*3+5] = b2
        index += 2
    }

    function draw() {
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, positionData, gl.STATIC_DRAW, 0, index * positionData.BYTES_PER_ELEMENT);
        gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, colorData, gl.STATIC_DRAW, 0, index * colorData.BYTES_PER_ELEMENT);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.LINES, 0, index);
    }

    function reset() {
        index = 0
    }

    return { clear, draw, reset, line }
}

const liney = api()

liney.clear(0.1, 0.2, 0.3)

window.onresize = function () {
    const w = window.innerWidth / scale
    const h = window.innerHeight / scale
    canvas.width = w
    canvas.height = h
    canvas.style.imageRendering = "crisp-edges"
    canvas.style.imageRendering = "pixelated"
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
    gl.uniform2f(gl.getUniformLocation(program, "screen"), canvas.width, canvas.height);
    gl.viewport(0, 0, w, h);
}
window.onresize()

let t = 0

function render() {
    t += 0.005
    requestAnimationFrame(render)
    liney.reset()
    let x = 0
    let y = 0
    let r = 2
    for (let i = 0; i < 500; i+=0.1) {
        let xx = Math.cos(i + t) * r
        let yy = Math.sin(i + t) * r
        liney.line(x, y, xx, yy, i * 2 % 1, i % 1, 1)
        x = xx
        y = yy
        r += 0.1
    }

    liney.draw()
}
render()

function createShader(source, type) {
    let shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
        throw new Error(gl.getShaderInfoLog(shader));
    return shader;
}

function createProgram(vertex, fragment) {
    let program = gl.createProgram();
    gl.attachShader(program, createShader(vertex, gl.VERTEX_SHADER));
    gl.attachShader(program, createShader(fragment, gl.FRAGMENT_SHADER));
    gl.linkProgram(program);

    return program;
}

</script>