← back to Crazy News Channel Shadowman
cartoons/20260924-tuber-bank-of-chugwater.html
162 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Tuber Bank of Chugwater — P24 Cartoon Desk</title>
<meta name="description" content="An original invented-satire cartoon: a Wyoming lab's potato-battery pilot escalates from soil sensors to a custom potato cultivar to a wired 'tuber bank' backing the county grid." />
<link rel="stylesheet" href="../assets/style.css" />
</head>
<body data-mood="scitech" class="cartoon-page">
<header>
<div>
<div class="kicker">P24 Cartoon Desk · Invented Satire · Chugwater, WY</div>
<h1>The Tuber Bank of Chugwater</h1>
<p class="dek">A Wyoming lab's potato-powered soil sensors outlast lithium cells, get their own custom-bred spud, and end up wired into the county's emergency power grid.</p>
</div>
<div class="header-actions">
<a class="back" href="index.html">← Cartoon Desk</a>
</div>
</header>
<main>
<figure>
<div class="phead"><span>Potato-Battery Pilot, Chugwater Agricultural Institute</span><span id="stamp"></span></div>
<svg class="art" id="art" viewBox="0 0 480 320" role="img" tabindex="0" aria-label="Editorial cartoon about potato-based batteries escalating from lab sensors to a county power grid"></svg>
<figcaption id="cap"></figcaption>
</figure>
<div class="dock">
<button class="twist" id="twistBtn" type="button">Plot Twist!</button>
<div id="status" role="status" aria-live="polite"></div>
</div>
<p class="hint">Keys: N / → advance the story · Enter/Space on the art also advances</p>
</main>
<footer>All researchers, institutes, and potatoes are invented. No actual tuber was interconnected to a utility grid. Part of PANDEMONIUM-24.</footer>
<script>
(function(){
const NS = 'http://www.w3.org/2000/svg';
function el(tag, attrs, parent){
const n = document.createElementNS(NS, tag);
for (const k in attrs) n.setAttribute(k, attrs[k]);
if (parent) parent.appendChild(n);
return n;
}
function txt(svg, x, y, size, weight, fill, content, anchor){
const t = el('text', { x, y, 'text-anchor': anchor||'middle', 'font-family':'-apple-system,sans-serif', 'font-size':size, 'font-weight':weight||'400', fill: fill||'currentColor' }, svg);
t.textContent = content;
return t;
}
function official(svg, cx, cy, r, color, label){
const g = el('g', {}, svg);
el('circle', { cx, cy, r, fill: color, 'fill-opacity': '0.15', stroke: color, 'stroke-width': 3 }, g);
el('circle', { cx, cy: cy - r*0.35, r: r*0.28, fill: color }, g);
el('path', { d: `M ${cx - r*0.5} ${cy + r*0.5} Q ${cx} ${cy + r*0.1} ${cx + r*0.5} ${cy + r*0.5}`, fill: 'none', stroke: color, 'stroke-width': r*0.22, 'stroke-linecap':'round' }, g);
if (label) txt(svg, cx, cy + r + 16, 11, '400', 'var(--ink-dim)', label);
return g;
}
function potato(svg, cx, cy, s, color){
const g = el('g', {}, svg);
el('ellipse', { cx, cy, rx: s*0.55, ry: s*0.34, fill: color || '#a9764a', stroke: 'var(--rule)', 'stroke-width': 2.4, transform: `rotate(-8 ${cx} ${cy})` }, g);
el('circle', { cx: cx - s*0.15, cy: cy - s*0.05, r: s*0.045, fill: 'var(--rule)', opacity: .5 }, g);
el('circle', { cx: cx + s*0.1, cy: cy + s*0.08, r: s*0.04, fill: 'var(--rule)', opacity: .5 }, g);
return g;
}
function electrode(svg, cx, cy, s, color, label){
el('rect', { x: cx - 3, y: cy - s*0.5, width: 6, height: s*0.5, fill: color }, svg);
el('circle', { cx, cy: cy - s*0.5, r: 5, fill: color }, svg);
if (label) txt(svg, cx, cy - s*0.6, 8, '700', color, label);
}
function sensor(svg, cx, cy, s){
const g = el('g', {}, svg);
el('rect', { x: cx - s*0.22, y: cy - s*0.16, width: s*0.44, height: s*0.32, rx: 4, fill: 'var(--panel)', stroke: 'var(--focus)', 'stroke-width': 2.4 }, g);
el('circle', { cx: cx + s*0.14, cy: cy - s*0.1, r: 3, fill: 'var(--accent2)' }, g);
txt(svg, cx, cy + s*0.05, 7.5, '700', 'currentColor', 'SOIL', 'middle');
return g;
}
function scene(svg, stage){
svg.innerHTML = '';
el('rect', { x: 40, y: 250, width: 400, height: 10, fill: 'currentColor', opacity: .3, rx: 3 }, svg);
if (stage === 0) {
potato(svg, 140, 230, 100);
electrode(svg, 118, 230, 70, '#c9812f', 'Cu');
electrode(svg, 162, 230, 70, '#7a7f86', 'Zn');
el('path', { d: 'M 118 195 L 260 210 M 162 195 L 260 220', stroke: 'currentColor', 'stroke-width': 1.6, 'stroke-dasharray':'3 3' }, svg);
sensor(svg, 300, 220, 90);
txt(svg, 240, 40, 12, '700', 'currentColor', '"Lithium batteries don\'t offer any of that."');
} else if (stage === 1) {
potato(svg, 100, 230, 90, '#8a5a2b');
potato(svg, 200, 230, 90, '#8a5a2b');
sensor(svg, 340, 210, 90);
txt(svg, 240, 40, 12, '700', 'var(--accent2)', 'Field trial: 40% longer runtime than lithium.');
txt(svg, 240, 60, 9.5, '400', 'var(--ink-dim)', 'twelve test plots, six months');
} else if (stage === 2) {
potato(svg, 150, 220, 130, '#c9a227');
txt(svg, 150, 275, 9.5, '700', 'var(--seal)', '"Chugwater Volt" cultivar');
sensor(svg, 340, 210, 90);
txt(svg, 240, 40, 12, '700', 'currentColor', 'Nearly 2× the electrolyte output.');
} else if (stage === 3) {
for (let i=0;i<4;i++) potato(svg, 70 + i*45, 224, 60, '#c9a227');
el('rect', { x: 300, y: 150, width: 130, height: 80, rx: 6, fill: 'var(--panel)', stroke: 'var(--focus)', 'stroke-width': 2.6 }, svg);
txt(svg, 365, 178, 9.5, '700', 'currentColor', 'PLATTE RIVER');
txt(svg, 365, 192, 9.5, '700', 'currentColor', 'POWER CO-OP');
txt(svg, 365, 208, 8, '400', 'var(--ink-dim)', '9 hrs fairgrounds reserve');
txt(svg, 240, 40, 11, '700', 'currentColor', '40-acre potato field, wired to the grid.');
} else if (stage === 4) {
for (let i=0;i<8;i++) potato(svg, 50 + i*24, 220 + (i%2)*14, 40, '#c9a227');
el('rect', { x: 340, y: 150, width: 100, height: 70, rx: 6, fill: 'var(--panel)', stroke: 'var(--accent2)', 'stroke-width': 2.6 }, svg);
txt(svg, 390, 178, 9, '700', 'currentColor', 'TUBER BANK');
txt(svg, 390, 194, 8, '400', 'var(--ink-dim)', '60,000 potatoes');
txt(svg, 390, 206, 8, '400', 'var(--ink-dim)', 'rotated weekly');
txt(svg, 240, 40, 11, '700', 'currentColor', 'Peak-demand reserve, one rotating tuber at a time.');
}
}
const HEADLINES = ["University Lab Tests Potato-Based Batteries for Rural Sensor Networks", "Potato Batteries Outlast Lithium Cells in Six-Month Field Trial", "Institute Begins Growing Custom High-Voltage Potato Variety for Battery Use", "Local Utility Proposes Potato Farm as Backup Power Source for County Grid", "Wyoming County Grid Now Runs Partly on Rotating Reserve of Wired Potatoes"];
const STAMPS = ["PILOT", "OUTPERFORMING", "NEW CULTIVAR", "PROPOSED RESERVE", "TUBER BANK LIVE"];
const CONCLUSION_MSG = "The story has concluded. The county's backup generator is, technically, a very large baked potato.";
const state = { stage: 0 };
function say(kind, msg){ const s = document.getElementById('status'); s.className = kind; s.textContent = msg; }
function paint(){
scene(document.getElementById('art'), state.stage);
document.getElementById('cap').textContent = HEADLINES[state.stage];
document.getElementById('stamp').textContent = STAMPS[state.stage];
const btn = document.getElementById('twistBtn');
if (state.stage >= HEADLINES.length - 1) { btn.textContent = 'Story Concluded'; btn.disabled = true; }
else { btn.textContent = 'Plot Twist!'; btn.disabled = false; }
}
function advance(){
if (state.stage >= HEADLINES.length - 1) { say('info', CONCLUSION_MSG); return; }
state.stage++;
paint();
say('ok', `Stage ${state.stage + 1} of ${HEADLINES.length}.`);
}
document.getElementById('twistBtn').addEventListener('click', advance);
const art = document.getElementById('art');
art.addEventListener('click', advance);
art.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); advance(); } });
document.addEventListener('keydown', (e) => {
if (e.metaKey || e.ctrlKey || e.altKey) return;
const tag = (e.target.tagName || '').toLowerCase();
if (tag === 'input' || tag === 'textarea') return;
const k = e.key.toLowerCase();
if (k === 'n' || e.key === 'ArrowRight') { e.preventDefault(); advance(); }
});
paint();
say('info', 'Case file open. Press N, click the art, or hit Plot Twist to advance the story.');
})();
</script>
</body>
</html>