Public
Edited
Aug 28, 2023
4 forks
21 stars
regl = stack.regl.value
configureAxes = createAxisConfiguration(regl)
{
regl.poll();
const { r, g, b, opacity } = d3.color(lineColor);
configureAxes(stack.plot.scale("x"), stack.plot.scale("y"), () => {
drawFunction({
contourCount,
colorscale,
zRange,
lineWidth,
lineColor: [r / 255, g / 255, b / 255, opacity]
});
});
}
drawFunction = regl({
vert: `
precision highp float;
attribute vec2 uv;
uniform mat4 viewInverse;
varying vec2 xy;
void main () {
xy = (viewInverse * vec4(uv, 0, 1)).xy;
gl_Position = vec4(uv, 0, 1);
}
`,
frag: `
#extension GL_OES_standard_derivatives : enable
precision highp float;
float linearstep(float a, float b, float x) {
return clamp((x - a) / (b - a), 0.0, 1.0);
}
float contourFunction (float parameter, float lineWidth, float lineFeather) {
float w1 = lineWidth - lineFeather * 0.5;
float d = length(vec2(dFdx(parameter), dFdy(parameter)));
float looped = 0.5 - abs(mod(parameter, 1.0) - 0.5);
return linearstep(d * (w1 + lineFeather), d * w1, looped);
}
${computeValueGLSL}
varying vec2 xy;
uniform vec2 zRange;
uniform float contourCount, lineWidth;
uniform sampler2D colorscale;
uniform vec4 lineColor;
void main () {
// Compute the function value
float fxy = f(xy.x, xy.y);
float scaledValue = (fxy - zRange.x) / (zRange.y - zRange.x);
vec4 color = texture2D(colorscale, vec2(scaledValue, 0.5));
float contour = contourFunction(scaledValue * contourCount, lineWidth, 1.0);
// The output color
gl_FragColor = vec4(mix(color.rgb, lineColor.rgb, contour * lineColor.a), 1);
}
`,
attributes: {
uv: [-4, -4, 0, 4, 4, -4]
},
uniforms: {
lineWidth: ({ pixelRatio }, { lineWidth }) => 0.5 * pixelRatio * lineWidth,
lineColor: regl.prop("lineColor"),
contourCount: regl.prop("contourCount"),
colorscale: regl.prop("colorscale.texture"),
zRange: regl.prop("zRange")
},
primitive: "triangles",
count: 3
})
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.
