{#if doc.image && geom && fit && !degenerate}
+ {#if axes}
+
+ {/if}
{TITLES[kind]}
{#each chips as chip}{chip}{/each}
@@ -226,11 +361,43 @@
overflow: hidden;
background: #000;
}
+ .pannable .viewport { cursor: grab; touch-action: none; }
+ .pannable .viewport:active { cursor: grabbing; }
canvas {
position: absolute;
display: block;
image-rendering: auto;
}
+ .axes {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ overflow: visible;
+ /* Dark halo so the amber axes read over any image region. */
+ filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.95));
+ }
+ .axes .axis { stroke: rgba(255, 209, 138, 0.98); stroke-width: 2; }
+ .axes .grid { stroke: rgba(255, 209, 138, 0.32); stroke-width: 1; }
+ .axes .period { stroke: rgba(255, 209, 138, 0.98); stroke-width: 1.6; }
+ .axes .orig {
+ stroke: rgba(150, 205, 255, 0.85);
+ stroke-width: 1.4;
+ stroke-dasharray: 5 4;
+ }
+ .axes .arrowhead { fill: rgba(255, 217, 160, 0.95); }
+ .axes .axtext {
+ fill: #fff;
+ font-family: var(--font-mono);
+ font-size: 11px;
+ paint-order: stroke;
+ stroke: rgba(0, 0, 0, 0.7);
+ stroke-width: 3px;
+ stroke-linejoin: round;
+ }
+ .axes .axtext.small { font-size: 10px; }
+ .axes .orig-label { fill: rgba(190, 224, 255, 0.95); }
.label {
position: absolute;
left: 8px;
diff --git a/src/lib/render/pipeline-gl.frag.glsl b/src/lib/render/pipeline-gl.frag.glsl
index 9394cba..586b357 100644
--- a/src/lib/render/pipeline-gl.frag.glsl
+++ b/src/lib/render/pipeline-gl.frag.glsl
@@ -36,6 +36,11 @@ uniform float u_uRef; // log-radius anchored at the canvas centre
uniform float u_scale; // canvas-px per working-px
uniform float u_lnR0; // log of the orientation radius R0
+// experiment params (defaults keep canonical behaviour)
+uniform float u_rot; // rotated-log rotation angle (canonical: atan(logS/2π))
+uniform float u_kTwist; // tententoon twist k (canonical: logS/2π = tan(u_rot))
+uniform vec2 u_pan; // log-space pan (δu, δv) applied to all panels
+
out vec4 fragColor;
const float TWO_PI = 6.283185307179586;
@@ -43,39 +48,38 @@ const float TWO_PI = 6.283185307179586;
void main() {
// y-down pixel coords (origin top-left, like the source image).
vec2 pxd = vec2(gl_FragCoord.x, u_canvas.y - gl_FragCoord.y);
- float k = u_logS / TWO_PI;
vec2 src;
float footA; // footprint = footA · exp(n·logS); set per mode.
if (u_mode == 2) {
- // --- tententoon still ---
+ // --- tententoon still --- twist k and a log-space pan (zoom δu, rotate δv).
+ float k = u_kTwist;
vec2 work = pxd / u_scale;
vec2 d = work - u_c;
float R2 = dot(d, d);
if (R2 < 1e-12) { fragColor = vec4(0.0); return; }
float lnR = 0.5 * log(R2);
float Phi = atan(d.y, d.x);
- float bLnR = lnR + k * Phi;
- float nPhi = Phi - k * (lnR - u_lnR0);
+ float bLnR = lnR + k * Phi + u_pan.x;
+ float nPhi = Phi - k * (lnR - u_lnR0) + u_pan.y;
float r = exp(bLnR);
src = u_c + r * vec2(cos(nPhi), sin(nPhi));
- footA = sqrt(1.0 + k * k) * exp(k * Phi) / u_scale;
+ footA = sqrt(1.0 + k * k) * exp(k * Phi + u_pan.x) / u_scale;
} else {
// --- log / rotated log: fill the cell, centred anchor ---
float cu = (pxd.x - u_canvas.x * 0.5) / u_pxPerUnit;
float cv = (pxd.y - u_canvas.y * 0.5) / u_pxPerUnit;
float u, v;
if (u_mode == 1) {
- // Un-rotate by −β: (u, v) = R(−β)·(u', v'). cos/sin β from logS, 2π.
- float L = sqrt(u_logS * u_logS + TWO_PI * TWO_PI);
- float cosB = TWO_PI / L; // cos(atan(logS/2π))
- float sinB = u_logS / L; // sin(atan(logS/2π))
- u = cu * cosB + cv * sinB + u_uRef;
- v = -cu * sinB + cv * cosB;
+ // Un-rotate by −u_rot: (u, v) = R(−rot)·(u', v').
+ float cosB = cos(u_rot);
+ float sinB = sin(u_rot);
+ u = cu * cosB + cv * sinB + u_uRef + u_pan.x;
+ v = -cu * sinB + cv * cosB + u_pan.y;
} else {
- u = cu + u_uRef;
- v = cv;
+ u = cu + u_uRef + u_pan.x;
+ v = cv + u_pan.y;
}
// Wrap u into the outermost Droste ring (uRef − logS, uRef]. Log space
// repeats with period logS, so this samples identical content (Droste
diff --git a/src/lib/render/pipeline-gl.ts b/src/lib/render/pipeline-gl.ts
index 5a7a7c2..f3d87c5 100644
--- a/src/lib/render/pipeline-gl.ts
+++ b/src/lib/render/pipeline-gl.ts
@@ -37,6 +37,14 @@ export type PipelineGLInput = {
/** escher: canvas px per working px, and log of the orientation radius. */
scale?: number;
lnR0?: number;
+ /** Experiment overrides (default to canonical when omitted):
+ * rot — rotated-log rotation angle (canonical atan(logS/2π)).
+ * kTwist— tententoon twist k (canonical logS/2π).
+ * panU/panV — log-space pan applied to every panel. */
+ rot?: number;
+ kTwist?: number;
+ panU?: number;
+ panV?: number;
};
export class PipelinePanelGLRenderer {
@@ -100,7 +108,10 @@ export class PipelinePanelGLRenderer {
u_pxPerUnit: input.pxPerUnit ?? 1,
u_uRef: input.uRef ?? 0,
u_scale: input.scale ?? 1,
- u_lnR0: input.lnR0 ?? 0
+ u_lnR0: input.lnR0 ?? 0,
+ u_rot: input.rot ?? Math.atan2(droste.logS, 2 * Math.PI),
+ u_kTwist: input.kTwist ?? droste.logS / (2 * Math.PI),
+ u_pan: [input.panU ?? 0, input.panV ?? 0]
});
twgl.drawBufferInfo(gl, quad, gl.TRIANGLE_STRIP);
}
diff --git a/src/lib/ui1/pipeline-experiments.svelte.ts b/src/lib/ui1/pipeline-experiments.svelte.ts
new file mode 100644
index 0000000..3233c59
--- /dev/null
+++ b/src/lib/ui1/pipeline-experiments.svelte.ts
@@ -0,0 +1,34 @@
+/**
+ * Shared, experimental controls for the pipeline view (geometry lab).
+ *
+ * angleDeg — override the rotated-log rotation / tententoon twist. null uses
+ * the canonical β = atan(logS/2π); any other angle shows that the
+ * spiral only "closes up" with the Droste scale at β.
+ * panU/panV— a pan in log space, applied to every panel. Dragging the
+ * rotated-log panel writes here, so you can watch the same shift
+ * zoom (u) and rotate (v) the tententoon.
+ *
+ * Pure UI state; the render functions read it via the component. Reset when
+ * leaving/entering the view so a stashed pan doesn't surprise later.
+ */
+
+export const experiment = $state<{
+ angleDeg: number | null;
+ panU: number;
+ panV: number;
+}>({
+ angleDeg: null,
+ panU: 0,
+ panV: 0
+});
+
+export function resetExperiment(): void {
+ experiment.angleDeg = null;
+ experiment.panU = 0;
+ experiment.panV = 0;
+}
+
+/** True when any experiment control is off its canonical default. */
+export function experimentActive(): boolean {
+ return experiment.angleDeg !== null || experiment.panU !== 0 || experiment.panV !== 0;
+}
diff --git a/src/lib/ui1/pipeline-panels.ts b/src/lib/ui1/pipeline-panels.ts
index 3a19370..d670ca9 100644
--- a/src/lib/ui1/pipeline-panels.ts
+++ b/src/lib/ui1/pipeline-panels.ts
@@ -101,6 +101,20 @@ function asImageData(img: PanelImage): ImageData {
return img as unknown as ImageData;
}
+/**
+ * Optional transform overrides shared by the panels (the "geometry lab").
+ * Omitted → canonical behaviour, so existing callers and tests are unchanged.
+ * panU/panV — pan in log space (δu, δv): δu zooms, δv rotates.
+ * rot — rotated-log rotation angle (canonical atan(logS/2π)).
+ * kTwist — tententoon twist k (canonical logS/2π = tan rot).
+ */
+export type PanelOpts = {
+ panU?: number;
+ panV?: number;
+ rot?: number;
+ kTwist?: number;
+};
+
export type PanelGeometry = {
/** Droste sampling context (limit point, logS, rMax, crop offset, …). */
ctx: DrosteCtx;
@@ -157,15 +171,18 @@ export function renderLogPanel(
pxPerUnit: number,
uRef: number,
W: number,
- H: number
+ H: number,
+ opts: PanelOpts = {}
): PanelImage {
const out = blankImage(W, H);
const w = out.width;
const h = out.height;
const inv = 1 / pxPerUnit;
+ const panU = opts.panU ?? 0;
+ const panV = opts.panV ?? 0;
renderMappedDroste(asImageData(out), pixels, ctx, (px, py, s) => {
- const u = wrapToTopRing((px - w / 2) * inv + uRef, uRef, ctx.logS);
- const v = (py - h / 2) * inv;
+ const u = wrapToTopRing((px - w / 2) * inv + uRef + panU, uRef, ctx.logS);
+ const v = (py - h / 2) * inv + panV;
const r = Math.exp(u);
s.x = ctx.cx + r * Math.cos(v);
s.y = ctx.cy + r * Math.sin(v);
@@ -189,20 +206,23 @@ export function renderRotatedLogPanel(
pxPerUnit: number,
uRef: number,
W: number,
- H: number
+ H: number,
+ opts: PanelOpts = {}
): PanelImage {
const out = blankImage(W, H);
const w = out.width;
const h = out.height;
const inv = 1 / pxPerUnit;
- const L = Math.hypot(ctx.logS, TWO_PI);
- const cosB = TWO_PI / L; // cos(atan(logS / 2π))
- const sinB = ctx.logS / L; // sin(atan(logS / 2π))
+ const rot = opts.rot ?? Math.atan2(ctx.logS, TWO_PI);
+ const cosB = Math.cos(rot);
+ const sinB = Math.sin(rot);
+ const panU = opts.panU ?? 0;
+ const panV = opts.panV ?? 0;
renderMappedDroste(asImageData(out), pixels, ctx, (px, py, s) => {
const cu = (px - w / 2) * inv;
const cv = (py - h / 2) * inv;
- const u = wrapToTopRing(cu * cosB + cv * sinB + uRef, uRef, ctx.logS);
- const v = -cu * sinB + cv * cosB;
+ const u = wrapToTopRing(cu * cosB + cv * sinB + uRef + panU, uRef, ctx.logS);
+ const v = -cu * sinB + cv * cosB + panV;
const r = Math.exp(u);
s.x = ctx.cx + r * Math.cos(v);
s.y = ctx.cy + r * Math.sin(v);
@@ -228,20 +248,24 @@ export function renderEscherStill(
R0: number,
scale: number,
W: number,
- H: number
+ H: number,
+ opts: PanelOpts = {}
): PanelImage {
const out = blankImage(W, H);
const w = out.width;
const h = out.height;
const data = out.data;
const { cx, cy, logS, rMax } = ctx;
- const k = logS / TWO_PI;
+ const k = opts.kTwist ?? logS / TWO_PI;
+ const panU = opts.panU ?? 0;
+ const panV = opts.panV ?? 0;
const lnR0 = Math.log(Math.max(R0, 1e-9));
const lnRmax = Math.log(rMax);
const alphaMag = Math.sqrt(1 + k * k);
const rgba: [number, number, number, number] = [0, 0, 0, 0];
- // Inverse Lenstra map for one (sub)sample at canvas offset (ox, oy).
+ // Inverse Lenstra map for one (sub)sample at canvas offset (ox, oy). The
+ // log-space pan shifts the twisted radius (panU = zoom) and angle (panV).
const sampleAt = (px: number, py: number, ox: number, oy: number): boolean => {
const x = (px + ox) / scale;
const y = (py + oy) / scale;
@@ -251,8 +275,8 @@ export function renderEscherStill(
if (R2 < 1e-12) return false;
const lnR = 0.5 * Math.log(R2);
const Phi = Math.atan2(dy, dx);
- const newPhi = Phi - k * (lnR - lnR0);
- const r = Math.exp(lnR + k * Phi); // t = 0
+ const newPhi = Phi - k * (lnR - lnR0) + panV;
+ const r = Math.exp(lnR + k * Phi + panU); // t = 0
const sx = cx + r * Math.cos(newPhi);
const sy = cy + r * Math.sin(newPhi);
return sampleDroste(pixels, ctx, sx, sy, rgba);
@@ -268,9 +292,9 @@ export function renderEscherStill(
// Footprint = source-pixels per output-pixel; picks the SS tier.
const lnR = 0.5 * Math.log(R2);
const Phi = Math.atan2(dy, dx);
- const baseLnR = lnR + k * Phi;
+ const baseLnR = lnR + k * Phi + panU;
const n = Math.max(0, Math.floor((lnRmax - baseLnR) / logS));
- const footprint = (alphaMag * Math.exp(k * Phi + n * logS)) / scale;
+ const footprint = (alphaMag * Math.exp(k * Phi + panU + n * logS)) / scale;
const offsets = ssOffsetsForFootprint(footprint);
if (!offsets) {
if (sampleAt(px, py, 0, 0)) {
diff --git a/src/lib/ui1/state.svelte.ts b/src/lib/ui1/state.svelte.ts
index 2998126..619bbf0 100644
--- a/src/lib/ui1/state.svelte.ts
+++ b/src/lib/ui1/state.svelte.ts
@@ -12,6 +12,7 @@
*/
import { fitCropToNest, ensureNestInside, type Rect as DrosteRect } from '../math/droste';
+import { resetExperiment } from './pipeline-experiments.svelte';
export type Tool = 'select' | 'rect' | 'pan';
export type Direction = 'in' | 'out';
@@ -100,6 +101,9 @@ export function setImage(image: ImageBitmap | null, name = ''): void {
doc.crop = null;
playback.playing = false;
playback.t = 0;
+ // A new image has fresh geometry; clear any stashed geometry-lab pan/angle
+ // so the pipeline view doesn't open with a surprising transform.
+ resetExperiment();
}
// --- Rect/crop commit helpers ------------------------------------------
diff --git a/src/lib/ui1/test-patterns.ts b/src/lib/ui1/test-patterns.ts
new file mode 100644
index 0000000..5468ec5
--- /dev/null
+++ b/src/lib/ui1/test-patterns.ts
@@ -0,0 +1,126 @@
+/**
+ * Generated test patterns for understanding the Droste → Escher geometry.
+ *
+ * The pipeline maps an image around the limit point c. Two patterns make the
+ * map legible when c sits at the image centre (use a centred square nest):
+ *
+ * polar — concentric circles + radial spokes. In the log panel a circle
+ * (r = const → u = const) is a VERTICAL line and a spoke
+ * (θ = const → v = const) is a HORIZONTAL line, so the whole
+ * pattern becomes a clean cartesian grid. The tententoon turns it
+ * into the spiral grid.
+ * grid — a cartesian grid. Straight lines warp into the log-polar shape,
+ * showing how the transform bends space.
+ *
+ * Drawn to a square canvas and returned as an ImageBitmap (same type as a
+ * loaded photo), so the rest of the pipeline is unchanged.
+ */
+
+export type PatternKind = 'polar' | 'grid';
+
+export const PATTERN_SIZE = 1024;
+
+/** A centred square nest whose limit point lands exactly at the image
+ * centre (centred nest on a square image → c = centre), so the polar
+ * pattern maps to an axis-aligned grid in the log panel. S ≈ 2.4. */
+export function patternNest(size = PATTERN_SIZE) {
+ const w = Math.round(size * 0.42);
+ const o = Math.round((size - w) / 2);
+ return { x: o, y: o, w, h: w };
+}
+
+const BG = '#f3efe6';
+const INK = '#2b3a42';
+
+export async function makeTestPattern(kind: PatternKind, size = PATTERN_SIZE): Promise {
+ const c = document.createElement('canvas');
+ c.width = size;
+ c.height = size;
+ const ctx = c.getContext('2d');
+ if (!ctx) throw new Error('2d context unavailable');
+ ctx.fillStyle = BG;
+ ctx.fillRect(0, 0, size, size);
+ if (kind === 'polar') drawPolar(ctx, size);
+ else drawGrid(ctx, size);
+ return createImageBitmap(c);
+}
+
+function drawGrid(ctx: CanvasRenderingContext2D, size: number): void {
+ const step = size / 16;
+ ctx.lineWidth = 2;
+ ctx.strokeStyle = 'rgba(43,58,66,0.35)';
+ for (let i = 1; i < 16; i++) {
+ const p = Math.round(i * step) + 0.5;
+ line(ctx, p, 0, p, size);
+ line(ctx, 0, p, size, p);
+ }
+ // Bold coloured centre axes so orientation is trackable through the warp.
+ const mid = size / 2;
+ ctx.lineWidth = 5;
+ ctx.strokeStyle = '#d1495b';
+ line(ctx, 0, mid, size, mid); // horizontal (x) axis — red
+ ctx.strokeStyle = '#2e86ab';
+ line(ctx, mid, 0, mid, size); // vertical (y) axis — blue
+ // A few accent cells near the centre to read scale.
+ ctx.fillStyle = 'rgba(46,134,171,0.18)';
+ ctx.fillRect(mid, mid - step, step, step);
+ ctx.fillStyle = 'rgba(209,73,91,0.18)';
+ ctx.fillRect(mid - step, mid, step, step);
+}
+
+function drawPolar(ctx: CanvasRenderingContext2D, size: number): void {
+ const cx = size / 2;
+ const cy = size / 2;
+ const maxR = size * 0.72; // reach into the corners
+ const rings = 14;
+ const spokes = 24; // every 15°
+
+ // Alternating shaded rings — reads as horizontal bands in the log panel.
+ for (let i = rings; i >= 1; i--) {
+ const r = (i / rings) * maxR;
+ ctx.beginPath();
+ ctx.arc(cx, cy, r, 0, Math.PI * 2);
+ ctx.fillStyle = i % 2 === 0 ? 'rgba(38,109,120,0.10)' : BG;
+ ctx.fill();
+ }
+ // Ring outlines.
+ ctx.lineWidth = 2;
+ ctx.strokeStyle = 'rgba(38,109,120,0.55)';
+ for (let i = 1; i <= rings; i++) {
+ const r = (i / rings) * maxR;
+ ctx.beginPath();
+ ctx.arc(cx, cy, r, 0, Math.PI * 2);
+ ctx.stroke();
+ }
+ // Radial spokes.
+ ctx.lineWidth = 2;
+ ctx.strokeStyle = 'rgba(43,58,66,0.4)';
+ for (let s = 0; s < spokes; s++) {
+ const a = (s / spokes) * Math.PI * 2;
+ line(ctx, cx, cy, cx + Math.cos(a) * maxR, cy + Math.sin(a) * maxR);
+ }
+ // Coloured cardinal spokes — track angle through the rotation.
+ const card: [number, string][] = [
+ [0, '#d1495b'], // +x red (θ = 0)
+ [Math.PI / 2, '#2e86ab'], // +y blue (θ = 90°)
+ [Math.PI, '#e9a23b'], // −x amber
+ [(3 * Math.PI) / 2, '#6a994e'] // −y green
+ ];
+ ctx.lineWidth = 5;
+ for (const [a, col] of card) {
+ ctx.strokeStyle = col;
+ line(ctx, cx, cy, cx + Math.cos(a) * maxR, cy + Math.sin(a) * maxR);
+ }
+ // Centre dot = the limit point when the nest is centred.
+ ctx.fillStyle = INK;
+ ctx.beginPath();
+ ctx.arc(cx, cy, 5, 0, Math.PI * 2);
+ ctx.fill();
+}
+
+function line(ctx: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number): void {
+ ctx.beginPath();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.stroke();
+}
diff --git a/tests/render/pipeline-panels.test.ts b/tests/render/pipeline-panels.test.ts
index b47a401..6ad23f3 100644
--- a/tests/render/pipeline-panels.test.ts
+++ b/tests/render/pipeline-panels.test.ts
@@ -165,6 +165,35 @@ describe('pipeline-panels', () => {
dump('4-log-largenest.jpg', logImg);
});
+ it('escher twist k=0 removes the spiral (identity angle map)', () => {
+ // With k = 0 the Lenstra map has no twist: arg is unchanged and the
+ // radius is just |z−c|, so it reduces to a plain Droste fold. The result
+ // must differ from the canonical twisted spiral.
+ const W = 300;
+ const H = Math.round(W * (crop.h / crop.w));
+ const sc = W / crop.w;
+ const twisted = renderEscherStill(pixels, geom!.ctx, geom!.R0, sc, W, H);
+ const flat = renderEscherStill(pixels, geom!.ctx, geom!.R0, sc, W, H, { kTwist: 0 });
+ let diff = 0;
+ for (let i = 0; i < flat.data.length; i += 4) {
+ diff += Math.abs(flat.data[i] - twisted.data[i]);
+ }
+ expect(diff).toBeGreaterThan(0);
+ expect(opaqueFraction(flat)).toBeGreaterThan(0.5);
+ });
+
+ it('a log-space pan changes the panels (and is bounded/opaque)', () => {
+ const W = 256;
+ const H = 256;
+ const ppu = panelPxPerUnit('log', geom!.ctx.logS, H);
+ const base = renderLogPanel(pixels, geom!.ctx, ppu, uRef, W, H);
+ const panned = renderLogPanel(pixels, geom!.ctx, ppu, uRef, W, H, { panV: 1.0 });
+ let diff = 0;
+ for (let i = 0; i < base.data.length; i += 4) diff += Math.abs(base.data[i] - panned.data[i]);
+ expect(diff).toBeGreaterThan(0); // a v-pan (rotation) visibly shifts content
+ expect(opaqueFraction(panned)).toBeGreaterThan(0.999); // still fills, no black
+ });
+
it('produces tiny but valid output for sub-2px panels (no crash)', () => {
const ppu = panelPxPerUnit('log', geom!.ctx.logS, 1);
const img = renderLogPanel(pixels, geom!.ctx, ppu, uRef, 1, 1);