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}) => {
//})
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.