// kitchen.jsx — Illustrated kitchen interior + human figure + overwhelming
// piles of plastic packaging. Everything is stroked in ink on paper,
// matching the line-weight and corner radius of packaging.jsx.
const K_INK = '#0a0a0a';
const K_MUTE = '#8a867e';
const K_SOFT = 'rgba(10,10,10,0.35)';
// ─── Kitchen background drawing ──────────────────────────────────────
// A thoughtfully detailed apartment kitchen. Back wall w/ window + curtain,
// upper cabinets with molding, a counter w/ sink + cutting board + fruit
// bowl, a gas range w/ kettle, a fridge with magnets, pendant light,
// skirting + floor tiles, a rug. Helvetica-clean line work.
function KitchenRoom() {
return (
{/* ── Wall panels & subtle background ── */}
{/* Floor seam */}
{/* Skirting */}
{/* Floor tile hints (faint) */}
{Array.from({ length: 10 }, (_, i) => (
))}
{/* ── Upper cabinetry run — crown molding above ── */}
{/* Left cabinet bank */}
{/* Inner panel lines */}
{/* Center — open shelving above window */}
{/* small jars/canisters on shelf */}
{/* Window */}
{/* mullions */}
{/* window frame inner border */}
{/* simple horizon line inside */}
{/* curtain tieback ghost */}
{/* Pendant light over counter */}
{/* Right cabinet bank */}
{/* ── Countertop ── */}
{/* counter front face, tiled skirt below */}
{/* Cabinet doors under counter */}
{/* Sink on counter */}
{/* Faucet */}
{/* cutting board */}
{/* fruit bowl */}
{/* ── Stove (built-in, right-of-sink) ── */}
{/* stove is embedded in counter; show the cooktop outline + back panel */}
{/* kettle */}
{/* ── Apron/rug under human ── */}
{/* Baseboard outlet (charm) */}
{/* A framed picture on the right wall segment */}
);
}
// Small decorative jars on the open shelf
function Jars() {
const jars = [
{ x: 440, w: 22, h: 30 },
{ x: 470, w: 18, h: 34 },
{ x: 500, w: 24, h: 28 },
{ x: 536, w: 16, h: 36 },
{ x: 564, w: 22, h: 30 },
{ x: 596, w: 20, h: 32 },
{ x: 626, w: 24, h: 30 },
{ x: 660, w: 18, h: 34 },
{ x: 690, w: 22, h: 28 },
{ x: 724, w: 20, h: 32 },
{ x: 756, w: 24, h: 30 },
{ x: 790, w: 16, h: 36 },
{ x: 820, w: 22, h: 28 },
];
return (
{jars.map((j, i) => (
))}
);
}
// ─── Human figure — stroked silhouette, stands facing forward ─────────
// Anchor (x, y) is the FEET baseline center. Height ≈ 220px.
function Human({ x = 260, y = 660, scale = 1 }) {
return (
{/* clothing fill (soft) */}
{/* head */}
{/* subtle hair line */}
{/* neck */}
{/* shoulders/collar */}
{/* torso */}
{/* belt line */}
{/* left arm holding grocery bag */}
{/* right arm relaxed */}
{/* legs */}
{/* shoes */}
{/* Grocery t-shirt bag hanging from left hand */}
{/* bag crinkle */}
);
}
// ─── Item expansion ──────────────────────────────────────────────────
function expandItems(counts, weeks) {
const items = [];
const order = ['bag', 'produce', 'clamshell', 'mesh', 'bottle', 'tub', 'chip', 'film', 'tray', 'tie'];
for (let w = 0; w < weeks; w++) {
for (const k of order) {
const n = Math.round(Number(counts[k]) || 0);
for (let i = 0; i < n; i++) {
items.push({ kind: k, weekIdx: w, itemIdx: i });
}
}
}
return items;
}
function hash(i) {
let x = (i + 1) * 2654435761 >>> 0;
x = ((x >>> 16) ^ x) * 0x85ebca6b >>> 0;
x = ((x >>> 13) ^ x) * 0xc2b2ae35 >>> 0;
x = (x >>> 16) ^ x;
return (x >>> 0) / 4294967295;
}
const KIND_SIZE = {
bag: 36, produce: 28, clamshell: 30, mesh: 28,
bottle: 32, tub: 26, chip: 28, film: 22, tray: 28, tie: 16,
};
// ─── Overwhelming pile layout ────────────────────────────────────────
// Strategy: fill the kitchen from the floor up with packaging, like a
// hoarding tide rising around the human.
//
// - Zone A (floor between human and right wall): a dense tumbled pile
// that rises as items accumulate. Width ~[360..1220]. Starts low,
// bulges as counts grow, eventually overflows onto the counter.
// - Zone B (left of human, narrow): smaller stack, rises from floor.
// - Zone C (on the counter): once A is full, items spread along
// the counter top (y ~400) and climb up into the cabinets.
// - Zone D (against upper cabinets / floating high): final wave,
// fills upper space so that at many years the human is engulfed.
//
// The human pivot is ~x=260, y=660. We pile AROUND him so his head stays
// visible at moderate counts but becomes buried at year 5+.
function PackagingPile({ counts, weeks, maxRender = 1200 }) {
const items = React.useMemo(() => expandItems(counts, weeks), [JSON.stringify(counts), weeks]);
const N = Math.min(items.length, maxRender);
const glyphs = [];
// We split N items into proportional buckets that "rise" as N grows.
// Each zone has a target capacity before the next zone starts
// receiving more aggressively — but all zones keep accepting items
// proportionally so growth is continuous.
//
// We assign item i to zone by its fractional position.
for (let i = 0; i < N; i++) {
const it = items[i];
const size = KIND_SIZE[it.kind] || 24;
const frac = i / Math.max(N, 1);
let pos;
// Human is at x≈260. We pile in 4 concentric "waves" around him.
// Wave sizes grow so that as N increases the pile rises & widens
// overwhelming the figure.
//
// Use a spiral-fill from the floor center-right outward and upward.
//
// Parameterize: each item gets (col, row) in an outward fill.
// cols fan across [70, 1210] (the full floor) but avoid the human's
// feet area [220, 310] at the lowest rows to keep him visible early.
pos = placeSpiralBury(i, it, size, N);
const rot = (hash(i * 3 + 7) - 0.5) * 46;
glyphs.push(
);
}
return {glyphs};
}
// Spiral fill that buries the human.
//
// Floor row 0: y=655, items tumbled across [70, 1210] (skip 190..330
// for the first few rows so feet show).
// Each subsequent row rises by ROW_H.
// After ~12 rows we reach counter height (~400); rows beyond that fill
// upward onto the counter surface and against the upper cabinets.
// Extra items go into the ceiling band and floating stacks.
function placeSpiralBury(i, item, size, N) {
const ROW_H = 30;
const COL_W = 40;
const FLOOR_Y = 660;
// Compute row and column using a snake-fill left-to-right / right-to-left.
// We reserve the left-of-human column band for Zone B.
//
// Available horizontal bands per row — rows near the floor skip the
// human; rows above counter height can cover everything.
// 1) First figure out which "row" this item is in by simulating snake fill
// through a list of per-row capacities.
//
// Row capacities (how many glyphs per row, wider as we rise).
// We precompute cumulative capacity until we find the row containing i.
const rows = [];
// Floor rows (y=660 down to y=420)
for (let r = 0; r < 9; r++) {
const y = FLOOR_Y - r * ROW_H;
// First 4 rows skip human feet area
const skipHuman = r < 4;
rows.push({ y, xs: skipHuman ? [[60, 210], [340, 1220]] : [[60, 1220]] });
}
// Counter-top rows (items sitting on counter y~390, stacking up)
for (let r = 0; r < 6; r++) {
const y = 400 - r * ROW_H;
rows.push({ y, xs: [[60, 460], [680, 1220]] });
}
// Human upper-body burial rows (right at the figure, x 150..360)
for (let r = 0; r < 8; r++) {
const y = 560 - r * ROW_H;
rows.push({ y, xs: [[140, 380]] });
}
// Ceiling-level / high-back rows — only once we have tons of items
for (let r = 0; r < 8; r++) {
const y = 300 - r * ROW_H;
rows.push({ y, xs: [[60, 1220]] });
}
// Build capacities
let cum = 0;
for (let r = 0; r < rows.length; r++) {
const row = rows[r];
const span = row.xs.reduce((s, [a, b]) => s + (b - a), 0);
const cap = Math.max(2, Math.floor(span / COL_W));
row.cap = cap;
row.start = cum;
cum += cap;
row.end = cum;
}
const totalCap = cum;
// If i is within totalCap, use the row fill. Otherwise wrap (second pass
// layers on top with jitter for density).
const idx = i % totalCap;
const pass = Math.floor(i / totalCap);
let row = rows[0], posInRow = idx;
for (const r of rows) {
if (idx < r.end) { row = r; posInRow = idx - r.start; break; }
}
// Map posInRow to x within the row's allowed spans (snake direction by row)
const reversed = (rows.indexOf(row) % 2) === 1;
const span = row.xs.reduce((s, [a, b]) => s + (b - a), 0);
const step = span / row.cap;
let t = (posInRow + 0.5) * step;
if (reversed) t = span - t;
// Find x in the concatenated allowed bands
let x = 0;
for (const [a, b] of row.xs) {
const w = b - a;
if (t <= w) { x = a + t; break; }
t -= w;
}
// Jitter
const jx = (hash(i * 7 + 1) - 0.5) * 16;
const jy = (hash(i * 7 + 2) - 0.5) * 10;
// Stack higher on subsequent passes (densify before rising)
const passLift = pass * 6;
return {
x: x + jx,
y: row.y + jy - passLift,
opacity: pass === 0 ? 1 : 0.95,
};
}
function OverflowBadge({ total, rendered }) {
if (total <= rendered) return null;
const extra = total - rendered;
return (
+ {extra.toLocaleString()} more beyond the frame
);
}
Object.assign(window, {
KitchenRoom, Human, PackagingPile, OverflowBadge, expandItems, KIND_SIZE,
});