cylinderFlow = `
vec2 derivative(vec2 xy, float t) {
float r2 = dot(xy, xy);
//if (r2 < 1.0) return vec2(0);
float theta = atan(xy.y, xy.x);
vec2 er = vec2(cos(theta), sin(theta));
vec2 eth = vec2(-er.y, er.x);
float Vr = (1.0 - 1.0 / r2) * er.x;
float Vtheta = -(1.0 + 1.0 / r2) * er.y;
return 4.0 * (Vr * er + Vtheta * eth);
}`
draw = {
const animate = !!~opts.indexOf("animate");
let loop = regl.frame(({ time }) => {
try {
configureAxes(stack.plot.scale("x"), stack.plot.scale("y"), () => {
if (~opts.indexOf("fill background")) {
drawField({ viewInverse, colorscale });
} else {
regl.clear({
color: colorscale.data[0].map((x) => x / 255)
});
}
drawLines({
dt,
//lineWidth: Math.min(25, Math.max(2, 150.0 / Math.sqrt(N))),
lineWidth,
animate,
texture,
stripes,
fade,
speed: speed / dt,
freq,
position: mutable position,
colorscale,
vertexCount: 1 + N * (M + 1),
vertexAttributes: { xyt },
insertCaps: true,
cap: fade > 0.99 ? "none" : "round",
join: "bevel",
joinResolution: 0,
capResolution: fade > 0.99 ? 0 : width < 3 ? 1 : 8
});
if (!animate) throw new Error("stop");
const _now = +new Date() / 1000;
const frametime = _now - mutable t;
mutable position = time * 150 * dt * speed; // += speed * dt;
mutable t = _now;
});
} catch (e) {
console.error(e);
if (loop) loop.cancel();
loop = null;
}
});
invalidation.then(() => {
if (loop) loop.cancel();
loop = null;
});
}
drawField = regl({
vert: `
precision highp float;
attribute vec2 uv;
varying vec2 xy;
uniform mat4 viewInverse;
void main () {
xy = (viewInverse * vec4(uv, 0, 1)).xy;
gl_Position = vec4(uv, 0, 1);
}`,
frag: `
precision highp float;
uniform sampler2D colorscale;
varying vec2 xy;
${cylinderFlow}
void main () {
float colorBase = 0.3 + 0.07 * length(derivative(xy, 0.0));
if (dot(xy, xy) < 1.0) {
gl_FragColor = vec4(vec3(0.3), 1);
return;
} else {
gl_FragColor = texture2D(colorscale, vec2(colorBase, 0.5));
}
}`,
attributes: {
uv: [-4, -4, 4, -4, 0, 4]
},
uniforms: {
colorscale: regl.prop("colorscale.texture")
},
count: 3,
depth: { enable: false }
})
drawLines = reglLines(regl, {
vert: `
precision highp float;
#pragma lines: attribute vec4 xyt;
#pragma lines: position = getPosition(xyt);
#pragma lines: varying vec2 phase = getPhase(xyt);
uniform float dt0, time;
uniform mat4 viewInverse, view;
${cylinderFlow}
const int n = 10; //10;
vec4 getPosition(vec4 xyt) {
if (xyt.z < -5.0) return vec4(0);
vec2 state = (viewInverse * vec4(xyt.xy, 0, 1)).xy;
if (dot(state, state) < 1.0) return vec4(0);
float dt = dt0 * xyt.z / float(n - 1);
float t0 = 0.0;
for (int i = 0; i < n; i++) {
vec2 deriv = derivative(state.xy, t0);
vec2 xyHalf = state + (dt * 0.5) * normalize(deriv);
deriv = derivative(xyHalf.xy, t0 + dt * 0.5);
state += dt * normalize(deriv);
}
return view * vec4(state, 0, 1);
}
vec2 getPhase(vec4 xyt) {
return vec2(
xyt.z,
xyt.w
);
}
#pragma lines: varying vec3 s = getS(xyt);
vec3 getS(vec4 xyt) {
vec3 state = vec3((viewInverse * vec4(xyt.xy, 0, 1)).xy, 0);
float dt = dt0 * xyt.z / float(n - 1);
float t0 = 0.0;
float v0 = length(derivative(state.xy, t0));
for (int i = 0; i < n; i++) {
vec2 deriv = derivative(state.xy, t0);
vec3 xyHalf = state + (dt * 0.5) * vec3(normalize(deriv), 1.0 / length(deriv));
deriv = derivative(xyHalf.xy, t0 + dt * 0.5);
state += dt * vec3(normalize(deriv), 1.0 / length(deriv));
}
return vec3(state.z, v0, length(derivative(state.xy, t0)));
}
#pragma lines: width = getWidth();
uniform float width;
float getWidth() {
return width;
}`,
frag: `
precision highp float;
uniform float time, fade, speed, position, freq, texture, stripes;
uniform sampler2D colorscale;
varying vec2 phase;
varying vec3 s;
#define PI ${Math.PI}
void main () {
float alpha = 1.0 - fade * phase.x * phase.x;
float norm = ${~opts.indexOf("normalize") ? "s.y" : "1.0"};
float stripe = 0.15 * stripes * sin((2.0 * PI) * (phase.y + freq * (norm * (s.x * 7.0 - position))));
float colorBase = (0.3 + 0.07 * s.z) + (phase.y - 0.5) * texture;
//float colorBase = (0.3 + 0.07 * s.z) + (sin(2.0 * PI * phase.y + 32.0 * time)) * texture;
gl_FragColor = texture2D(colorscale, vec2(colorBase + stripe, 0.5));
gl_FragColor.a *= alpha;
}`,
uniforms: {
alpha: regl.prop("alpha"),
beta: regl.prop("beta"),
gamma: regl.prop("gamma"),
delta: regl.prop("delta"),
colorscale: regl.prop("colorscale.texture"),
width: ({ pixelRatio }, { lineWidth }) => pixelRatio * lineWidth,
time: ({ time }, { animate }) => (animate ? time : 0),
dt0: regl.prop("dt"),
fade: regl.prop("fade"),
texture: regl.prop("texture"),
stripes: regl.prop("stripes"),
speed: regl.prop("speed"),
position: regl.prop("position"),
freq: regl.prop("freq")
},
blend: {
enable: true,
func: {
srcRGB: "src alpha",
srcAlpha: 1,
dstRGB: "one minus src alpha",
dstAlpha: 1
},
equation: {
rgb: "add",
alpha: "add"
}
},
depth: { enable: false }
})
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.
