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;
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.
