Systems and interaction developer
viewof plot6 = createPlot()
drawPlot6(domainColoringParameters)
drawPlot6 = plot6.createDrawFunction(`
const int N = ${steps};
vec2 zeta_complex_replus(vec2 s) { // for s.x >= 0.0
// Direct computation using the alternating series acceleration
float sumRe = 0.0;
float sumIm = 0.0;
float sign = 1.0;
for (int n = 1; n <= N; n++) {
float nFloat = float(n);
float denom = pow(nFloat, s.x);
float angle = -s.y * log(nFloat);
sumRe += sign * cos(angle) / denom;
sumIm += sign * sin(angle) / denom;
sign = -sign; // Alternating sign
}
float factor = 1.0 / (1.0 - pow(2.0, 1.0 - s.x));
return vec2(sumRe, sumIm) * factor;
}
vec2 zeta_complex(vec2 s) {
if (s.x >= 0.0) {
return zeta_complex_replus(s);
} else {
// Use the reflection formula for Re(s) < 0
vec2 s1 = vec2(1.0 - s.x, -s.y);
vec2 zeta_1_s = zeta_complex_replus(s1);
// Compute the correct reflection factor
float pi_s = 0.5 * PI * s.x;
vec2 sin_term = vec2(sin(pi_s), 0.0);
vec2 gamma_factor = cexp(vec2((s.x - 1.0) * log(PI) + s.x * log(2.0), 0.0));
vec2 reflection_factor = cmul(gamma_factor, sin_term);
// Multiply complex numbers (reflection factor * ζ(1-s))
return cmul(reflection_factor, zeta_1_s);
}
}
vec2 f (vec2 z) {
// return cdiv(cmul(csqr(z) - vec2(1, 0), csqr(z - vec2(2, 1))), csqr(z) + vec2(2, 2));
return zeta_complex(z * ${scale} + vec2(${p0[0]}, ${p0[1]}));
}`)
// https://observablehq.observablehq.cloud/framework-example-custom-input-2d/
function Range2D({width = 100, height = 100, value = [0.5, 0.5], scale = [1, 1]} = {}) {
const div = document.createElement("div");
const p = document.createElement("p");
p.style.display = "inline-block";
p.style.marginRight = "8px";
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.style.border = "1px solid black";
canvas.style.display = "block";
const resetbtn = document.createElement("button");
resetbtn.innerText = "Reset";
const originalValue = value;
resetbtn.addEventListener("click", () => {
set(originalValue);
canvas.dispatchEvent(new Event("input", {bubbles: true}));
});
div.appendChild(p);
div.appendChild(resetbtn);
div.appendChild(canvas);
let down = false;
canvas.onpointerup = () => (down = false);
canvas.onpointerdown = (event) => {
down = true;
canvas.setPointerCapture(event.pointerId);
canvas.onpointermove(event);
};
canvas.onpointermove = (event) => {
if (!down) return;
event.preventDefault(); // prevent scrolling and text selection
const ox = Math.max(0, Math.min(event.offsetX, width));
const oy = Math.max(0, Math.min(event.offsetY, height));
set([(ox / width - 0.5) * scale[0], (-oy / height + 0.5) * scale[1]]);
canvas.dispatchEvent(new Event("input", {bubbles: true}));
};
const context = canvas.getContext("2d");
function set([x, y]) {
// x = Math.max(0, Math.min(1, x));
// y = Math.max(0, Math.min(1, y));
context.fillStyle = "white";
context.fillRect(0, 0, width, height);
context.fillStyle = "red";
context.fillRect(Math.floor((x / scale[0] + 0.5) * width), 0, 1, height);
context.fillRect(0, Math.floor((-y / scale[1] + 0.5) * height), width, 1);
value = [x, y];
p.innerText = `center = ${x.toFixed(4)}, ${y.toFixed(4)}`;
}
set(value);
return Object.defineProperty(div, "value", {get: () => value, set});
}
drawPlot3(domainColoringParameters)
drawPlot3 = plot3.createDrawFunction(`vec2 f (vec2 z) {
return cdiv(cmul(csqr(z) - vec2(1, 0), csqr(z - vec2(2, 1))), csqr(z) + vec2(2, 2));
}`)
drawPlot1 = plot1.createDrawFunction(`
vec2 f (vec2 z) {
return z;
}
`)
drawPlot1(domainColoringParameters)
drawPlot2 = plot2.createDrawFunction(`
uniform float n;
vec2 f (vec2 z) {
return cpow(z, n);
}
`)
drawPlot2(Object.assign({n}, domainColoringParameters))
drawPlot4 = plot4.createDrawFunction(`
uniform float t;
vec2 f (vec2 z) {
vec2 fz = C_ONE;
vec2 a0 = cexp(vec2(0.375, -0.125 * t));
fz = cmul(fz, z - cexp(vec2(0.0, t)));
fz = cdiv(fz, z - cexp(vec2(0.5, 0.5 * t)));
fz = cmul(fz, z - cexp(vec2(0.125, -0.625 * t)));
fz = cdiv(fz, z - cexp(vec2(0.25, -0.25 * t)));
fz = cmul(fz, csqr(z - a0));
return fz;
}
`)
drawPlot4(Object.assign({t: 6}, domainColoringParameters))
!paused && drawPlot4(Object.assign({t: (now / 1000) % 1000}, domainColoringParameters))
drawPlot5 = plot5.createDrawFunction(`
vec2 f (vec2 z) {
z /= 16.0;
return csin(cinv(z));
}
`)
drawPlot5(domainColoringParameters)
function createPlot () {
let w = width;
let h = width / 1.6;
let pixelRatio = 2;
let canvas = DOM.canvas(w * pixelRatio, h * pixelRatio);
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
let regl = wrapREGL({
canvas: canvas,
pixelRatio: pixelRatio,
extensions: ['oes_standard_derivatives']
});
canvas.value = {
regl: regl,
createDrawFunction: function createPlotter (f) {
var drawField = regl({
vert: `
precision mediump float;
uniform vec2 aspectRatio;
attribute vec2 xy;
varying vec2 z;
void main () {
z = xy * aspectRatio;
gl_Position = vec4(xy, 0, 1);
}
`,
frag: `
${glsl.useStandardDerivatives}
${glsl.constants}
${glsl.precision}
${glsl.hypot}
${glsl.complex}
${glsl.wireframe}
${glsl.hsv2rgb}
${glsl.cubeHelix}
${glsl.domainColoring}
uniform float rootDarkening, poleLightening;
uniform float rootDarkeningSharpness, poleLighteningSharpness;
uniform float rectangularGridOpacity, polarGridOpacity;
varying vec2 z;
uniform float pixelRatio;
${f}
void main () {
gl_FragColor = vec4(domainColoring(
f(2.0 * z), // The evaluated function!
vec2(0.125, 1.0), // Polar grid spacing
polarGridOpacity, // Polar grid strength
vec2(1.0), // Rectangular grid spacing
rectangularGridOpacity, // Rectangular grid strength
poleLightening, // Pole lightening strength
poleLighteningSharpness, // Pole ligthening sharpness
rootDarkening, // Root darkening strength
rootDarkeningSharpness, // Root darkening sharpness
0.5 * pixelRatio // Line thickness
), 1.0);
}
`,
attributes: {
xy: [-4, -4, 4, -4, 0, 4],
},
uniforms: {
pixelRatio: regl.context('pixelRatio'),
aspectRatio: ctx => [ctx.framebufferWidth / ctx.framebufferHeight, 1],
rootDarkening: regl.prop('rootDarkening'),
poleLightening: regl.prop('poleLightening'),
rootDarkeningSharpness: regl.prop('rootDarkeningSharpness'),
poleLighteningSharpness: regl.prop('poleLighteningSharpness'),
rectangularGridOpacity: regl.prop('rectangularGridOpacity'),
polarGridOpacity: regl.prop('polarGridOpacity'),
n: (ctx, props) => props.n || 0,
t: regl.prop('t'),
},
count: 3
});
return function drawPlot (props) {
regl.poll()
drawField(props || {});
}
}
};
return canvas;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.