md`# regl Triangle`
createREGL = require('regl')
canvas = html`<canvas width="960" height="400">`
// Calling the regl module with no arguments creates a full screen canvas and
// WebGL context, and then uses this context to initialize a new REGL instance
regl = createREGL({canvas: canvas})
// Calling regl() creates a new partially evaluated draw command
drawTriangle = regl({
// fragment shader
frag: `
precision mediump float;
uniform vec4 color;
void main () {
gl_FragColor = color;
}`,
// vertex shader
vert: `
precision mediump float;
attribute vec2 position;
void main () {
gl_Position = vec4(position, 0, 1);
}`,
// attributes
attributes: {
position: function(context, props) {
return [
[-1 * Math.cos(context.tick / 100), 0],
[Math.sin(context.tick / 100), -1],
[Math.sin(context.tick / 100), 1]
];
}
},
// uniforms
uniforms: {
color: regl.prop('color')
},
// vertex count
count: 3
});
regl.frame(function(context) {
drawTriangle({
color: [0.208, 0.304, 1.0, 1.0]
})
})
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.
