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 (5.+20.*smoothstep(10.,0.,t))
#define r vec2(${RADIUS})
#define rnd(x) fract(1e5*sin(1e5*x))
#define tex(x) texture2D(prevState, x).xyz
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;
vec3 v=tex(uv);
vec3 d;
vec3 dd;
d=-v/2.+(tex(uv+px*_)+tex(uv+px*_.yx)+tex(uv+px*-_)+tex(uv+px*-_.yx))/8.;
//dd.x = 1. * d.x - v.x * v.y * v.y + .05 * (1. - v.x);
//dd.y = .25 * d.y + v.x * v.y * v.y - v.y * v.z * v.z - (.062 + .05) * v.y;
//dd.z = .25 * d.z + v.y * v.z * v.z - (.02) * v.z;
dd.x = .25 * d.x - v.x * v.y * v.y + v.z * v.x * v.x;
dd.y = .25 * d.y - v.y * v.z * v.z + v.x * v.y * v.y;
dd.z = .25 * d.z - v.z * v.x * v.x + v.y * v.z * v.z;
gl_FragColor=vec4(v+dd,1.);
if(t<.1){
for(int i=0;i<4;i++)
gl_FragColor[i] = rnd(length(uv)+float(i));
};
}`,
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.
