);
}
/* ==========================================================================
Golden Gate sign-off — a little San Francisco signature
========================================================================== */
function GoldenGateSignoff() {
// SVG illustration of the Golden Gate Bridge seen from the water, with
// the Marin headlands on the left, San Francisco on the right, fog
// rolling under the deck, a pelican overhead, and a small sailboat.
// International Orange line-art over cream.
const W = 900;
const H = 380;
const orange = "#C2410C"; // International Orange tuned to cream paper
const ink = "var(--ink-soft)";
// Bridge geometry — proportions closer to the real thing.
// Real GGB: towers 227m, center span 1280m → roughly 1 : 5.6.
const leftAnchor = 90;
const rightAnchor = W - 90;
const leftTowerX = 260;
const rightTowerX = W - 260;
const towerTopY = 70;
const deckY = 220;
const midX = W / 2;
// Cable anchor height — well below the deck so the side-span "legs" sweep
// visibly down from each tower top, past the deck, to a shore anchorage.
const anchorY = deckY + 40;
// Control-point Y for the side-span Bezier — close to deck level so the
// cable plunges sharply near the anchor and rises fast to the tower top.
const sideCtrlY = deckY - 10;
// Main-span catenary: real GGB cable low-point sits ~17m above the deck
// (deck-to-tower = 152m, sag = 135m). So cable low-point visually sits
// ~10% of the way from deck to tower top — nearly touching the roadway.
const cableSagLowY = deckY - 8; // visual low-point of the main cable
// Q control-Y that makes the quadratic Bezier bottom out at cableSagLowY
// (Bezier midpoint y = 0.5*(startY + endY)/2... see derivation in comment).
// For symmetric Q curve with endpoints at towerTopY+6 and desired midpoint
// at cableSagLowY: ctrlY = 2*midY - endY.
const cableCtrlY = 2 * cableSagLowY - (towerTopY + 6);
// Water, shore, and fog levels — pushed down to give clear vertical
// space between the deck/anchor and the water.
const waterTopY = deckY + 90;
const fogTopY = deckY + 55;
// Tower renderer — slim tapered Art Deco tower that rises from the water
// surface, through the deck, all the way up to the Art Deco cap. Real GGB
// towers taper inward going up, and flare slightly outward at the base
// where they rest on concrete foundations in the water.
const tower = (cx) => {
const baseHalfW = 9; // outer half-width at deck
const topHalfW = 6; // outer half-width at tower top (narrowest)
const waterHalfW = 11; // outer half-width at water base (slight flare)
const baseInnerHalf = 3;
const topInnerHalf = 2;
const waterInnerHalf = 4;
const topY = towerTopY + 6; // where the legs begin (just under the caps)
const taperOuter = (t) => topHalfW + (baseHalfW - topHalfW) * t;
return (
{/* Upper tower: tower top → deck, tapered inward */}
{/* Upper horizontal struts */}
{[0.15, 0.35, 0.60, 0.82].map((t, i) => {
const y = topY + (deckY - topY) * t;
const hw = taperOuter(t);
return ;
})}
{/* Deck-level strut — wider shoulder, this is the roadway crossbeam */}
{/* Lower tower: deck → water, flared outward */}
{/* Lower horizontal struts — 2 struts below the deck */}
{[0.35, 0.70].map((t, i) => {
const y = deckY + (waterTopY - deckY) * t;
const hw = baseHalfW + (waterHalfW - baseHalfW) * t;
return ;
})}
{/* Foundation base at water surface — broad horizontal cap */}
{/* Stepped Art Deco cap */}
{/* Spire */}
);
};
// Suspenders between towers — vertical ropes dropping from the cable to
// the deck. Use the actual quadratic Bezier so suspenders perfectly
// match the visible cable curve.
const mainSuspenders = [];
const span = rightTowerX - leftTowerX;
const towerTopPlus = towerTopY + 6;
const n = 38;
for (let i = 1; i < n; i++) {
const t = i / n;
// Quadratic Bezier y: (1-t)^2 * y0 + 2(1-t)t * yc + t^2 * y2
const cableY = (1 - t) * (1 - t) * towerTopPlus + 2 * (1 - t) * t * cableCtrlY + t * t * towerTopPlus;
const x = leftTowerX + span * t;
// Only draw if cable is above deck (near midpoint it can nearly touch)
if (cableY < deckY - 2) {
mainSuspenders.push(
);
}
}
// Suspenders on the side spans — use the EXACT same Bezier as the main
// cable path so the suspender tops land precisely on the visible cable.
// Cable goes from (anchorX_cable, anchorY) via control (midpoint X,
// sideCtrlY) to (towerX_cable, towerTopY+6). Since the control X is the
// midpoint of the two endpoints, x(t) is linear in t, so we can invert
// x → t trivially. (towerTopPlus declared above for mainSuspenders.)
const sideSuspenders = (anchorX_cable, towerX_cable) => {
const arr = [];
const nn = 18;
const dir = towerX_cable > anchorX_cable ? 1 : -1;
// Inset the suspenders slightly so they don't touch the anchor or tower
const xStart = anchorX_cable + 8 * dir;
const xEnd = towerX_cable - 12 * dir;
for (let i = 0; i < nn; i++) {
const tPlace = i / (nn - 1);
const x = xStart + (xEnd - xStart) * tPlace;
// Invert x → t on the cable Bezier (linear since control X = midpoint)
const t = (x - anchorX_cable) / (towerX_cable - anchorX_cable);
// Bezier y at that t — identical formula to the main cable path
const y = (1 - t) * (1 - t) * anchorY + 2 * (1 - t) * t * sideCtrlY + t * t * towerTopPlus;
// Only draw where cable is above deck; below deck the cable is plunging
// to the shore anchor and there's no roadway to suspend from
if (y < deckY - 4) {
arr.push();
}
}
return arr;
};
// Deck camber — slight arch
const deckPath = `M ${leftAnchor - 20} ${deckY}
Q ${midX} ${deckY - 8} ${rightAnchor + 20} ${deckY}`;
return (
{/* Handwritten sign-off */}
From our window, with care.
▲ Fig. — The Golden Gate, from our office window
);
}
/* ==========================================================================
Barcode footer — barcode + QR both link to barlowandhughan.com
========================================================================== */
function BarcodeFooter() {
const url = "https://www.barlowandhughan.com";
const cap = {
fontFamily: "var(--mono)",
fontSize: "var(--t-cap)",
color: "var(--ink-muted)",
letterSpacing: "0.14em",
textTransform: "uppercase",
marginTop: 6,
textAlign: "center",
display: "block",
};
return (
);
}
/* ==========================================================================
Tweaks panel
========================================================================== */
function Tweaks({ open, fidelity, paper, onChange }) {
return (