← back to Crazy News Channel
cartoons/20260924-the-corner-with-its-own-weather.html
166 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Corner With Its Own Weather — P24 Cartoon Desk</title>
<meta name="description" content="An original invented-satire cartoon: a persistent crosswind at one small-town intersection escalates from a windsock to a paid Wind Spotter to an annual Hat-Chasing Festival." />
<link rel="stylesheet" href="../assets/style.css" />
</head>
<body data-mood="weather" class="cartoon-page">
<header>
<div>
<div class="kicker">P24 Cartoon Desk · Invented Satire · Cut Bank, MT</div>
<h1>The Corner With Its Own Weather</h1>
<p class="dek">A stubborn crosswind at one Montana intersection earns a windsock, a paid Wind Spotter, a proposed windbreak, and finally its own festival.</p>
</div>
<div class="header-actions">
<a class="back" href="index.html">← Cartoon Desk</a>
</div>
</header>
<main>
<figure>
<div class="phead"><span>Front & 3rd Wind Advisory, NWS Cut Bank</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 a persistent crosswind at one intersection escalating into a civic wind festival"></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 meteorologists, officials, and hats are invented. No actual intersection was declared a weather system. 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 windsock(svg, cx, cy, s, strain){
const g = el('g', {}, svg);
el('rect', { x: cx-3, y: cy-s*0.9, width: 6, height: s*0.9, fill: 'currentColor', opacity: .5 }, g);
const bend = strain ? s*0.55 : s*0.15;
el('path', { d: `M ${cx} ${cy-s*0.9} L ${cx+bend} ${cy-s*0.78} L ${cx+bend*0.85} ${cy-s*0.62} L ${cx+bend*1.1} ${cy-s*0.5} L ${cx+bend*0.6} ${cy-s*0.4} Z`,
fill: 'var(--accent)', 'fill-opacity': .35, stroke: 'var(--accent)', 'stroke-width': 2 }, g);
return g;
}
function hat(svg, cx, cy, s, color){
const g = el('g', { transform: `rotate(20 ${cx} ${cy})` }, svg);
el('ellipse', { cx, cy, rx: s*0.5, ry: s*0.14, fill: color }, g);
el('path', { d: `M ${cx-s*0.22} ${cy} Q ${cx} ${cy-s*0.5} ${cx+s*0.22} ${cy}`, fill: color }, g);
return g;
}
function pedestrian(svg, cx, cy, s, color){
const g = el('g', {}, svg);
el('circle', { cx, cy: cy - s*0.5, r: s*0.16, fill: color }, g);
el('path', { d: `M ${cx} ${cy-s*0.34} L ${cx} ${cy+s*0.1}`, stroke: color, 'stroke-width': s*0.1, 'stroke-linecap':'round' }, g);
el('path', { d: `M ${cx-s*0.18} ${cy-s*0.12} L ${cx+s*0.24} ${cy-s*0.2}`, stroke: color, 'stroke-width': s*0.08, 'stroke-linecap':'round' }, g);
return g;
}
function sign(svg, cx, y, w, label){
el('rect', { x: cx-w/2, y, width: w, height: 34, rx: 4, fill: 'var(--panel)', stroke: 'var(--accent)', 'stroke-width': 2.6 }, svg);
txt(svg, cx, y+21, 9.5, '700', 'var(--accent)', label);
}
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) {
windsock(svg, 340, 210, 130, true);
pedestrian(svg, 130, 220, 120, '#0f6b52');
hat(svg, 200, 130, 60, '#b5302f');
txt(svg, 200, 100, 10, '400', 'var(--ink-dim)', '(hat, departing)');
txt(svg, 240, 40, 12, '700', 'currentColor', '"A strange little pocket." — Ray Dunmore, NWS');
} else if (stage === 1) {
windsock(svg, 340, 210, 130, true);
sign(svg, 200, 90, 150, 'GUSTS POSSIBLE');
pedestrian(svg, 120, 220, 110, '#6b4fa0');
txt(svg, 240, 40, 11, '700', 'currentColor', 'Three lost hats in one week.');
} else if (stage === 2) {
windsock(svg, 340, 210, 130, true);
official(svg, 150, 170, 30, 'var(--seal)', 'Curt Ambrose, Wind Spotter');
el('rect', { x: 120, y: 220, width: 60, height: 8, fill: 'currentColor', opacity: .4, rx: 2 }, svg);
txt(svg, 240, 40, 11, '700', 'currentColor', '$15/hr · six notable gusts logged daily.');
} else if (stage === 3) {
el('rect', { x: 260, y: 70, width: 160, height: 110, rx: 6, fill: 'none', stroke: 'var(--focus)', 'stroke-width': 3, 'stroke-dasharray':'6 4' }, svg);
txt(svg, 340, 100, 9.5, '700', 'currentColor', 'PROPOSED WINDBREAK');
txt(svg, 340, 116, 9, '400', 'var(--ink-dim)', '$47,000 · council review');
windsock(svg, 150, 210, 120, true);
txt(svg, 240, 40, 11, '700', 'currentColor', '"Oddly specific, but so is the wind."');
} else if (stage === 4) {
el('rect', { x: 260, y: 130, width: 150, height: 90, rx: 6, fill: 'var(--panel)', stroke: 'var(--accent2)', 'stroke-width': 2.6 }, svg);
txt(svg, 335, 158, 10, '700', 'currentColor', 'WIND ZONE');
txt(svg, 335, 174, 8.5, '400', 'var(--ink-dim)', 'viewing platform');
txt(svg, 335, 188, 8.5, '400', 'var(--ink-dim)', 'tethered-hat stand');
windsock(svg, 150, 200, 130, true);
official(svg, 90, 150, 22, 'var(--seal)', 'Mayor Reyes');
txt(svg, 240, 40, 11, '700', 'var(--accent2)', 'Annual Hat-Chasing Festival, ribbon cut sideways.');
}
}
const HEADLINES = ["Cut Bank Weather Service Flags Odd Steady Crosswind At One Intersection", "City Installs Windsock, Warning Sign At Persistently Gusty Intersection", "City Hires Part-Time 'Wind Spotter' To Monitor Intersection During Business Hours", "Council Debates Custom Windbreak Structure Engineered For Single Intersection", "Cut Bank Declares Intersection Official 'Wind Zone,' Opens Viewing Platform"];
const STAMPS = ["FLAGGED", "SIGNAGE UP", "SPOTTER HIRED", "UNDER REVIEW", "WIND ZONE"];
const CONCLUSION_MSG = "The story has concluded. Next year's festival adds a category for hats recovered more than three blocks away.";
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>