frame = () => {
return regl.frame(({ tick }) => {
drawField({ sun: mkSun() }, () => {
regl.draw();
let triangle = triangles[tick % triangles.length];
updateField({ triangle });
// triangles.map((triangle) => {
// updateField({ triangle });
// });
statsMonitor.update();
});
});
}
noiseGen.noise3D(1, 2, performance.now())
mkSun()
mkSun = () => {
let t = (performance.now() / 1000) * 0.1,
x = noiseGen.noise2D(10, t) * 0.5 + 0.5,
y = noiseGen.noise2D(20, t) * 0.5 + 0.5;
return [x, y, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
}
triangles = {
button;
const rnd = d3.randomUniform(),
rndSize = d3.randomUniform(-0.05, 0.05);
let x, y;
return Array(numTriangles)
.fill(0)
.map((d) => {
x = rnd();
y = rnd();
return [
x + rndSize(),
y + rndSize(),
0,
1,
x + rndSize(),
y + rndSize(),
0,
1,
x + rndSize(),
y + rndSize(),
0,
1,
0,
0,
0,
1
];
});
}
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 = sdf(uv, triangle);
float e = texture2D(prevState, uv).x;
e += 0.0001;
gl_FragColor = vec4(vec3(min(e, d)), 1.0);
}`,
depth: false,
uniforms: {
triangle: regl.prop("triangle")
},
framebuffer: ({ tick }) => state[(tick + 1) % 2]
})
drawField = 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}
${myREGL}
varying vec2 uv;
uniform sampler2D prevState;
uniform mat4 sun;
void main() {
vec4 sdf = texture2D(prevState, uv);
gl_FragColor = vec4(sdf.xyz, 1.0);
vec3 d;
// Draw the ray trace shadow
${
drawShadow
? `
d = dist(prevState, uv, sun[0].xy);
gl_FragColor = vec4(vec3(d.x), 1.0);
`
: ``
}
// Draw the colorful ray trace shadow
${
drawColorfulShadow
? `
d = dist(prevState, uv, sun[0].xy);
gl_FragColor = vec4(vec3(d), 1.0);
`
: ``
}
// Draw the sun in a small red circle
if (dist(uv, sun[0].xy) < 0.01) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
// Draw the contour curves
${
drawContour
? `
gl_FragColor = mix(vec4(vec3(0.8), 1.0), gl_FragColor, wireframe(sdf.x * ${contourDensity.toFixed(
2
)}, 1.0, 10.0));
`
: ``
}
}`,
attributes: {
position: [-4, -4, 4, -4, 0, 4]
},
count: 3,
depth: false,
uniforms: {
prevState: ({ tick }) => state[tick % 2],
tick: ({ tick }) => tick,
sun: regl.prop("sun")
}
})
myREGL = `
#extension GL_OES_standard_derivatives : enable
#define MAXSDF 5.0
/**
* Compute norm2 between src and dst.
**/
float norm2(vec2 src, vec2 dst) {
return dot(src-dst, src-dst);
}
/**
* Compute distance between src and dst.
**/
float dist(vec2 src, vec2 dst) {
return sqrt(norm2(src, dst));
}
/**
* Compute the dist value among the signed distance field
**/
vec3 dist(sampler2D sdf, vec2 src, vec2 dst) {
float minsdf = MAXSDF;
float d0 = dist(src, dst), d, remain;
for (int i=0; i<1000; ++i) {
d = texture2D(sdf, src).x;
// Record the min sdf value during the trace
minsdf = min(minsdf, d);
// It is blocked, thus it will not reach dst
if (d <= 0.000001) {
return vec3(sqrt(abs(d)*20.0), 0.3, 0.3);
}
// It sees the dst directly, without being blocked at all
remain = dist(src, dst);
if (remain < d) {
return vec3(1.0-d0, 0.5, 0.0);
}
src = mix(src, dst, d/remain);
}
return vec3(minsdf, 0.0, 0.0);
}
/**
* Compute sdf from p to v.
* p is the given point;
* v is the edge of the triangle;
* c is the bary center of the triangle.
* Return sdf value in float.
**/
float sdf(vec2 p, vec2 v, vec2 c) {
vec2 u = vec2(v.y, -v.x);
if (dot(c, u) * dot(p, u) >= 0.0) {
return -abs(dot(p, u) / sqrt(dot(u, u)));
}
float vv = dot(v, v);
float pv = dot(p, v);
if (pv < 0.0) {
return sqrt(dot(p, p));
}
if (pv > vv) {
return sqrt(dot(p-v, p-v));
}
return abs(dot(p, u) / sqrt(dot(u, u)));
}
/**
* Compute the sdf of the uv against the triangle
* a is the triangle
* [[edge1, 1],
* [edge2, 1],
* [edge3, 1],
* [0, 0, 0, 1]]
**/
float sdf(vec2 uv, mat4 a) {
float d = 0.0;
d = dist(uv, vec2(a[0]));
vec4 center = (a[0] + a[1] + a[2]) / 3.0;
float d1 = sdf(uv-vec2(a[0]), vec2(a[1]-a[0]), vec2(center-a[0]));
float d2 = sdf(uv-vec2(a[1]), vec2(a[2]-a[1]), vec2(center-a[1]));
float d3 = sdf(uv-vec2(a[2]), vec2(a[0]-a[2]), vec2(center-a[2]));
d = max(max(d1, d2), d3);
if (d > 0.0) {
if (d > d1 && d1 > 0.0) {d = d1;}
if (d > d2 && d2 > 0.0) {d = d2;}
if (d > d3 && d3 > 0.0) {d = d3;}
}
return d;
}
float wireframe (float parameter, float width, float feather) {
float w1 = width - feather * 0.5;
float d = fwidth(parameter);
float looped = 0.5 - abs(mod(parameter, 0.1) - 0.5);
return smoothstep(d * w1, d * (w1 + feather), looped);
}
`
paintBackground = () => {
regl.clear({ color: [0, 0.1, 0.26, 1] });
}
state = {
button;
const { width, height } = canvas,
data = Array(width * height * 4)
.fill(0)
.map(() => initValue);
return Array(3)
.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: window.devicePixelRatio,
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"
]
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.
