viewof regl = {
let div = DOM.canvas(256, 256);
let regl = wrapREGL(div);
div.value = regl;
return div;
}
updateLife = regl({
frag: `
precision mediump float;
uniform sampler2D prevState;
varying vec2 uv;
uniform float t;
#define R (1.+20.*smoothstep(10.,0.,t))
#define r vec2(${RADIUS})
#define rnd(x) fract(1e5*sin(1e5*x))
#define tex(x) texture2D(prevState, x).xy
float rand(vec2 n) {
return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
}
float noise(vec2 n) {
const vec2 d = vec2(0.0, 1.0);
vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
}
void main() {
vec2 _=vec2(R+R*rnd(uv.x+.01*uv.y+t),0.)/2.;
vec2 px=1./r;
vec2 v=tex(uv);
vec2 d;
vec2 dd;
d=-v/2.+(tex(uv+px*_)+tex(uv+px*_.yx)+tex(uv+px*-_)+tex(uv+px*-_.yx))/8.;
dd.x=d.x-v.x*v.y*v.y+.05*(1.-v.x);
dd.y=.25*d.y+v.x*v.y*v.y-(.062+.05)*v.y;
gl_FragColor=vec4(v+dd,1.,1.);
if(t<.1)gl_FragColor*=0.,gl_FragColor+=1.-step(.2,length(uv-.5));
}`,
uniforms: {
t: regl.context('time'),
},
framebuffer: ({tick}) => state[(tick + 1) % 2]
})
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.
