frame = () => {
return regl.frame(({ tick }) => {
setupField(() => {
regl.draw();
let triangle = triangles[tick % triangles.length];
updateField({ triangle });
statsMonitor.update();
});
});
}
triangles = {
const rnd = d3.randomUniform();
return Array(5)
.fill(0)
.map((d) => [rnd(), rnd(), 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
}
updateField = regl({
frag: `
${customGlsl.precision}
${myREGL}
varying vec2 uv;
uniform mat4 triangle;
uniform sampler2D prevState;
void main() {
gl_FragColor = vec4(uv, 1.0, 1.0);
float d = dist(uv, triangle[0].xy);
d = pow(d, 0.7);
float e = texture2D(prevState, uv).x;
gl_FragColor = vec4(vec3(min(e, d)), 1.0);
}`,
depth: false,
uniforms: {
triangle: regl.prop("triangle")
},
framebuffer: ({ tick }) => state[(tick + 1) % 2]
})
setupField = regl({
vert: `
${customGlsl.precision}
attribute vec2 position;
varying vec2 uv;
void main() {
// Convert (-1, 1) to (0, 1)
uv = 0.5 * position + 0.5;
gl_Position = vec4(position, 0.0, 1.0);
}`,
frag: `
${customGlsl.precision}
varying vec2 uv;
uniform sampler2D prevState;
void main() {
vec4 color = texture2D(prevState, uv);
gl_FragColor = vec4(color.xyz, 1.0);
}`,
attributes: {
position: [-4, -4, 4, -4, 0, 4]
},
count: 3,
depth: false,
uniforms: {
prevState: ({ tick }) => state[tick % 2],
tick: ({ tick }) => tick
}
})
paintBackground = () => {
regl.clear({ color: [0, 0.1, 0.26, 1] });
}
state = {
const { width, height } = canvas,
data = Array(width * height * 4)
.fill(0)
.map(() => initValue);
return Array(2)
.fill(0)
.map((d) => {
let texture = regl.texture({
type: "float",
width,
height,
data
});
return regl.framebuffer({ color: texture, depthStencil: false });
});
}
blend = ({
enable: true,
func: {
srcRGB: "src alpha",
srcAlpha: 1,
dstRGB: "one minus src alpha",
dstAlpha: 1
},
equation: {
rgb: "add",
alpha: "add"
}
})
customGlsl = ({
useStandardDerivatives: `
#extension GL_OES_standard_derivatives : enable
`,
precision: `
precision lowp float;
`
})
noiseGen.noise3D(1, 2, performance.now())
noiseGen = new simplexNoise(performance.now())
simplexNoise = require("simplex-noise@2.4.0")
d3 = require("d3")
regl = (await import("https://cdn.skypack.dev/regl@2")).default({
canvas,
pixelRatio: 2.0,
extensions: ["oes_standard_derivatives", "oes_texture_float"],
attributes: { antialias: true }
})
wrapREGL = require("regl")
import { glsl, glslify } from "@listenzcc/glslify"
statsMonitor = {
const stats = new Stats(),
{ dom } = stats;
dom.style.position = "relative";
return stats;
}
Stats = require("https://cdn.jsdelivr.net/npm/stats-js@1.0.1/build/stats.min.js")
colorMapNames = [
"jet",
"hsv",
"hot",
"cool",
"spring",
"summer",
"autumn",
"winter",
"bone",
"copper",
"greys",
"yignbu",
"greens",
"yiorrd",
"bluered",
"rdbu",
"picnic",
"rainbow",
"portland",
"blackbody",
"earth",
"electric",
"alpha",
"viridis",
"inferno",
"magma",
"plasma",
"warm",
"rainbow-soft",
"bathymetry",
"cdom",
"chlorophyll",
"density",
"freesurface-blue",
"freesurface-red",
"oxygen",
"par",
"phase",
"salinity",
"temperature",
"turbidity",
"velocity-blue",
"velocity-green",
"cubehelix"
]
myREGL = `
float norm2(vec2 src, vec2 dst) {
return dot(src-dst, src-dst);
}
float dist(vec2 src, vec2 dst) {
return sqrt(norm2(src, dst));
}
`
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.
