viewof layers = {
now;
return elementStack(this, {
width: Math.min(width, 600),
height: Math.min(width, 600),
layers: {
regl: ({ current, width, height }) =>
reglCanvas(current, {
width,
height,
pixelRatio: 2.0,
extensions: ["oes_standard_derivatives"]
}),
plot: ({ width, height }) =>
Plot.plot({
width,
style: { backgroundColor: "transparent", maxWidth: "none" },
aspectRatio: 1,
x: { grid: true, domain: [-1, 1] },
y: { grid: true, domain: [-1, 1] },
color: { domain: [-1, 1], range: ["blue", "red"] },
marks: [
Plot.frame(),
Plot.dot(thePnts, {
x: "x",
y: "y",
fill: "white",
stroke: "m",
strokeWidth: 5,
r: 15
}),
Plot.text(thePnts, {
x: "x",
y: "y",
text: (d) => d.m.toFixed(2),
fill: "black",
fontSize: 10
}),
Plot.delaunayLink(thePnts, { x: "x", y: "y", stroke: "white" })
]
})
}
});
}
grids = {
return thePnts.map(() =>
regl.framebuffer({
color: regl.texture({
width: 10,
height: 10
})
})()
);
}
redraw()
/**
* Bind regl with the drawer
*/
redraw = () => {
// now;
const xaxis = layers.plot.scale("x"),
yaxis = layers.plot.scale("y"),
drawer = drawIt;
updatePnts();
thePnts.map((d, i) => {
initFrameBuffer({ a: d.x, b: d.y, c: d.m, dst: grids[i] });
});
regl.poll();
configureAxes(xaxis, yaxis, () => {
drawer({
nPnts,
f1,
ts0: grids[0],
ts1: grids[1],
ts2: grids[2],
ts3: grids[3],
ts4: grids[4]
});
});
}
regl = layers.regl.value
configureAxes = createAxisConfiguration(regl)
initFrameBuffer = regl({
vert: `
#extension GL_OES_standard_derivatives : enable
precision mediump float;
attribute vec2 xy;
varying vec2 uv;
void main () {
uv = xy;
gl_Position = vec4(uv, 0, 1);
}
`,
frag: `
#extension GL_OES_standard_derivatives : enable
precision mediump float;
varying vec2 uv;
uniform float a;
uniform float b;
uniform float c;
void main () {
gl_FragColor = vec4((a+1.0)*0.5, (b+1.0)*0.5, (c+1.0)*0.5, 1);
}
`,
attributes: { xy: [-4, -4, 0, 4, 4, -4] },
uniforms: {
a: regl.prop("a"),
b: regl.prop("b"),
c: regl.prop("c")
},
framebuffer: regl.prop("dst"),
depth: { enable: false },
count: 3
})
drawIt = regl({
vert: `
precision highp float;
attribute vec2 xy;
varying vec2 uv;
uniform mat4 view;
void main () {
uv = xy;
gl_Position = view * vec4(xy, 0, 1);
}`,
frag: `
precision lowp float;
uniform float f1;
uniform int nPnts;
uniform sampler2D ts0;
uniform sampler2D ts1;
uniform sampler2D ts2;
uniform sampler2D ts3;
uniform sampler2D ts4;
varying vec2 uv;
${reglUtil}
void main () {
// gl_FragColor = vec4(uv, 0, 1);
vec2 pnt;
vec4 texture;
float v = 0.0;
texture = texture2D(ts0, vec2(0, 0));
pnt = vec2((texture - 0.5)*2.0);
v += (texture.z-0.5)*2.0 * f1 / dist(uv, pnt);
texture = texture2D(ts1, vec2(0, 0));
pnt = vec2((texture - 0.5)*2.0);
v += (texture.z-0.5)*2.0 * f1 / dist(uv, pnt);
texture = texture2D(ts2, vec2(0, 0));
pnt = vec2((texture - 0.5)*2.0);
v += (texture.z-0.5)*2.0 * f1 / dist(uv, pnt);
texture = texture2D(ts3, vec2(0, 0));
pnt = vec2((texture - 0.5)*2.0);
v += (texture.z-0.5)*2.0 * f1 / dist(uv, pnt);
texture = texture2D(ts4, vec2(0, 0));
pnt = vec2((texture - 0.5)*2.0);
v += (texture.z-0.5)*2.0 * f1 / dist(uv, pnt);
if (abs(v - 0.0) < 0.001) {
gl_FragColor = vec4(0);
}else{
if (v > 0.0) {
gl_FragColor = vec4(v, 0, 0, 0.5);
} else {
gl_FragColor = vec4(0, 0, -v, 0.5);
}
}
// pnt = vec2(apnts[0]);
// // pnt = vec2(apnts[0], apnts[1]);
// // vec4 a = texture2D(pntsBuffer, vec2(0, 0));
// gl_FragColor = vec4(vec3(f1/dist(uv, pnt)), 1);
}`,
attributes: {
xy: [-1, -1, 0, 1, 1, -1].map((d) => d * 5)
},
uniforms: {
nPnts: regl.prop("nPnts"),
f1: regl.prop("f1"),
ts0: regl.prop("ts0"),
ts1: regl.prop("ts1"),
ts2: regl.prop("ts2"),
ts3: regl.prop("ts3"),
ts4: regl.prop("ts4")
},
count: 3,
depth: { enable: false }
})
updatePnts = () => {
thePnts.map((d) => {
d.x += d.vx;
d.y += d.vy;
if (d.x > 1 || d.x < -1) {
d.x -= d.vx;
d.vx *= -1;
}
if (d.y > 1 || d.y < -1) {
d.y -= d.vy;
d.vy *= -1;
}
});
}
mutable thePnts = mkPnts()
thePnts
Type Table, then Shift-Enter. Ctrl-space for more options.
mkPnts = () => {
button;
const n = nPnts;
const rnd = d3.randomUniform(-1, 1);
return [...new Array(n)].map((d, i) => {
return {
x: rnd(),
y: rnd(),
m: rnd(),
vx: rnd() / 100,
vy: rnd() / 100,
i
};
});
}
reglUtil = `
float norm2(vec2 src, vec2 dst) {
vec2 d2 = pow(src - dst, vec2(2));
return d2.x + d2.y;
}
float dist(vec2 src, vec2 dst) {
return pow(norm2(src, dst), 0.5);
}
`
drawTriangle = regl({
vert: `
precision highp float;
attribute vec2 xy;
attribute vec3 color;
uniform mat4 view;
varying vec3 vColor;
void main () {
vColor = color;
gl_Position = view * vec4(xy, 0, 1);
}`,
frag: `
precision lowp float;
varying vec3 vColor;
void main () {
gl_FragColor = vec4(pow(vColor, vec3(1.0 / 2.2)), 1);
}`,
attributes: {
xy: [-1, -1, 0, 1, 1, -1].map((d) => d * 5),
color: [
[1, 0, 0],
[0, 1, 0],
[0, 0, 1]
]
},
// primitive: "lines",
count: 3,
depth: { enable: false }
})
function elementStack(
currentStack,
{ width = null, height = null, layers = {}, onResize = null } = {}
) {
const container = currentStack || document.createElement("figure");
container.style.position = "relative";
if (!currentStack && onResize) {
const observer = new ResizeObserver(([{ contentRect }]) => {
onResize({ layers: container.value, rect: contentRect });
container.dispatchEvent(new CustomEvent("input"));
});
observer.observe(container);
}
const stack = {};
let defaultZindex = 0;
for (const [label, props] of Object.entries(layers)) {
const layer = typeof props === "function" ? props : props.layer;
const id = `element-stack-layer-${label}`;
const current = container.querySelector(`#${id}`);
const newEl = layer({ current, width, height });
newEl.setAttribute("id", id);
if (!newEl.style.position) newEl.style.position = "absolute";
stack[label] = newEl;
if (current) {
current.replaceWith(newEl);
} else {
container.appendChild(newEl);
}
}
if (width) container.style.width = `${width}px`;
if (height) container.style.height = `${height}px`;
container.value = stack;
return container;
}
import { mat4create, mat4ortho, mat4invert } from "@rreusser/gl-mat4"
function createAxisConfiguration(regl) {
const configureAxes = regl({
uniforms: {
view: regl.prop("view"),
viewInverse: regl.prop("viewInverse")
},
context: {
view: regl.prop("view"),
viewInverse: regl.prop("viewInverse")
},
scissor: {
enable: true,
box: {
x: ({ pixelRatio }, { xRange: [xmin, xmax] }) => xmin * pixelRatio,
y: ({ pixelRatio, framebufferHeight }, { yRange: [ymax, ymin] }) =>
framebufferHeight - ymax * pixelRatio,
width: ({ pixelRatio }, { xRange: [xmin, xmax] }) =>
(xmax - xmin) * pixelRatio,
height: ({ pixelRatio }, { yRange: [ymax, ymin] }) =>
(ymax - ymin) * pixelRatio
}
},
viewport: {
x: ({ pixelRatio }, { xRange: [xmin, xmax] }) => xmin * pixelRatio,
y: ({ pixelRatio, framebufferHeight }, { yRange: [ymax, ymin] }) =>
framebufferHeight - ymax * pixelRatio,
width: ({ pixelRatio }, { xRange: [xmin, xmax] }) =>
(xmax - xmin) * pixelRatio,
height: ({ pixelRatio }, { yRange: [ymax, ymin] }) =>
(ymax - ymin) * pixelRatio
}
});
const view = mat4create();
const viewInverse = mat4create();
return function (xScale, yScale, callback) {
mat4ortho(view, ...xScale.domain, ...yScale.domain, -1, 1);
mat4invert(viewInverse, view);
configureAxes(
{ view, viewInverse, xRange: xScale.range, yRange: yScale.range },
callback
);
};
}
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.
