🧪 Indie software researcher & developer
👾 React game developer
quad = regl({
frag: `
precision mediump float;
const vec2 size = vec2(${canvas.width}, ${canvas.height});
const vec2 invSize = vec2(
${(1 / canvas.width).toPrecision(5)},
${(1 / canvas.height).toPrecision(5)});
const int radius = ${radius};
const float invRadius = ${(1 / radius).toPrecision(5)};
uniform sampler2D space;
varying vec2 uv;
vec3 getSimplexCellCoords(vec2 coords) {
const float c1 = 0.366025403784439; // 0.5*(sqrt(3.0)-1.0)
const float c2 = 0.211324865405187; // (3.0-sqrt(3.0))/6.0
vec2 doublecellPosition = floor(coords + dot(coords, vec2(c1)) );
vec2 x0 = coords - doublecellPosition + dot(doublecellPosition, vec2(c2));
return vec3(doublecellPosition, x0.x > x0.y ? 1 : -1);
}
void main() {
vec3 simplexCellCoords = getSimplexCellCoords(uv * size);
vec4 doublecell = texture2D(space, simplexCellCoords.xy * invRadius);
float cell = (simplexCellCoords.z <= 0.0) ? doublecell.x : doublecell.y;
gl_FragColor = vec4(cell, 0, 0, 1);
}`,
vert: `
precision mediump float;
attribute vec2 position;
varying vec2 uv;
uniform mat3 zoomMatrix;
void main() {
vec2 zoomedPosition = (zoomMatrix * vec3(position, 1)).xy;
uv = 0.5 * (zoomedPosition + 1.0);
gl_Position = vec4(position, 0, 1);
}`,
uniforms: {
space: (_, { space }) => space,
zoomMatrix: (_, { zoomMatrix }) => zoomMatrix
},
attributes: { position: [-3, -1, 3, -1, 0, 2] },
count: 3,
depth: { enable: false }
})
state = Array(2)
.fill()
.map(() =>
regl.framebuffer({
color: regl.texture({
radius,
data: initialState,
wrap: 'repeat'
}),
depth: false,
depthStencil: false
})
)
initialState = Array(radius * radius * 4)
.fill()
.map((_, i) => (Math.random() > 0.5 ? 255 : 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.
