createRegl = require("regl")
canvas = html`<canvas width="400px" height="200px"/>`
regl = createRegl(canvas)
fragShaderStr = `#ifdef GL_ES
precision mediump float;
#endif
#define PI 3.14159265359
uniform vec2 u_resolution;
float plot(vec2 st, float pct){
return smoothstep( pct-0.02, pct, st.y) -
smoothstep( pct, pct+0.02, st.y);
}
void main() {
vec2 st = gl_FragCoord.xy/u_resolution;
// Smooth interpolation between 0.1 and 0.9
// float y = smoothstep(0.1,0.9,st.x);
float y = sqrt(1.0 - pow((st.x *2.0) - 1.0, 2.0));
vec3 color = vec3(y);
float pct = plot(st,y);
color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);
gl_FragColor = vec4(color,1.0);
}
`
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: fragShaderStr,
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: {
// regl.buffer creates a new array buffer object
position: regl.buffer([
[-1, -1], // no need to flatten nested arrays, regl automatically
[1, -1], // unrolls them into a typedarray (default Float32)
[1, 1],
[1, 1],
[-1, 1],
[-1, -1]
])
// regl automatically infers sane defaults for the vertex attribute pointers
},
uniforms: {
// This defines the color of the triangle to be a dynamic variable
u_resolution: regl.prop('u_resolution')
},
// This tells regl the number of vertices to draw in this command
count: 6
})
{
let beginAt = Date.now()
while(true) {
let time = Date.now() - beginAt
// clear contents of the drawing buffer
regl.clear({
color: [0, 0, 0, 0],
depth: 1
})
// draw a triangle using the command defined above
drawTriangle({
u_resolution: [400, 200]
})
yield canvas
}
}
// regl.frame() wraps requestAnimationFrame and also handles viewport changes
//regl.frame(({time}) => {
//})
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.
