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()
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.