Computer Graphics & Visualization @ufrj.br
bibRegl = require("regl")
canvas = htl.html`<canvas width=400 height=400 style="border:1px solid gray">`
viewof color = Inputs.form({
r: Inputs.range([0, 1], { label: "Red", step: 0.01 }),
g: Inputs.range([0, 1], { label: "Green", step: 0.01 }),
b: Inputs.range([0, 1], { label: "Blue", step: 0.01 })
})
regl = bibRegl(canvas)
drawTriangle = regl({
// Shaders in regl are just strings. You can use glslify or whatever you want
// to define them. No need to manually create shader objects.
frag: `
precision mediump float;
uniform vec4 color;
void main() {
gl_FragColor = color;
}`,
vert: `
precision mediump float;
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0, 1);
}`,
// Here we define the vertex attributes for the above shader
attributes: {
position: regl.buffer([
[-2, -2], // no need to flatten nested arrays, regl automatically
[4, -2], // unrolls them into a typedarray (default Float32)
[4, 4]
])
// regl automatically infers sane defaults for the vertex attribute pointers
},
uniforms: {
// This defines the color of the triangle to be a dynamic variable
color: regl.prop("color")
},
// This tells regl the number of vertices to draw in this command
count: 3
})
{
// Clear frame buffer
regl.clear({
color: [0, 0, 0, 0],
depth: 1
});
// Call drawing function (reactively for color)
drawTriangle({ color: [color.r, color.g, color.b, 1] });
}
viewof gridParams = Inputs.form({
a: Inputs.range([0, 100], { label: "a", step: 1 }),
b: Inputs.range([0, 50], { label: "b", step: 1 })
})
canvas2 = htl.html`<canvas width=500 height=500 style="border:1px solid gray" >`
drawGrid = {
const regl = bibRegl(canvas2);
const draw = regl({
frag: `
precision mediump float;
uniform float a;
uniform float b;
void main() {
if (distance(mod(gl_FragCoord.xy,a), vec2(a/2.))>b) gl_FragColor = vec4(1,1,1,1);
else gl_FragColor = vec4(0,0,0,1);
}`,
vert: `
precision mediump float;
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0, 1);
}`,
uniforms: {
a: regl.prop("a"),
b: regl.prop("b")
},
attributes: {
position: regl.buffer([
[-2, -2],
[-2, 2],
[4, 0]
])
},
count: 3
});
return draw;
}
drawGrid(gridParams)
prog.draw()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
