example.js

import { Renderer, Shader } from 'picasso';

const canvas = document.getElementById('canvas');

const fragment = new Shader('fragment', `
    precision mediump float;

    out vec4 color;

    void main () {
        color = vec4(1.0, 0.0, 0.5, 1.0);
    }
`);

const vertex = new Shader('vertex', `
    in vec2 position;
    uniform vec2 resolution;

    void main () {
        vec2 one = position / resolution;
        vec2 two = one * 2.0;
        vec2 clip = two - 1.0;

        gl_Position = vec4(clip * vec2(1, -1), 0, 1);
    }
`);

const renderer = new Renderer(canvas);

renderer.initialize('default', [ fragment, vertex ]);

renderer.setAttribute('position', [
    32, 32,
    64, 32,
    32, 64,
    32, 64,
    64, 32,
    64, 64,
]);

renderer.setUniform('resolution', [ canvas.width, canvas.height ]);

renderer.draw(6);