gsFragmentShader = `
precision mediump float;
#define PI 3.14159265358979323846
varying vec2 vUv;
uniform vec2 res;
vec2 rotate2D(vec2 _st, float _angle){
_st -= 0.5;
_st = mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle)) * _st;
_st += 0.5;
return _st;
}
float box(vec2 _st, vec2 _size){
_size = vec2(0.5)-_size * 0.5;
vec2 aa = vec2(0.005);
vec2 uv = smoothstep(_size,_size + aa,_st);
uv *= smoothstep(_size,_size + aa,vec2(1.0) - _st);
return uv.x * uv.y;
}
void main() {
vec2 st = gl_FragCoord.xy / res.xy;
st = fract(st * 15.0);
st = rotate2D(st,PI * sin(vUv.x));
vec2 size = vec2(sin(vUv.y) + 0.15);
vec3 color = vec3(box(st, size));
gl_FragColor = vec4(color, 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.
