Cage Corner Watch

\n \n Show stats\n \n\n \n\n

CAGECAST 2003

\n \n

\n\n \n \n\n",[136],"0810f0b2-cc51-4cea-bd33-28cf3036f879","cage-face.svg","a8cd66da-6446-11f1-8c5e-1607ee4eb77e",5,["D",1781039006758],"\n",[143],"b1b50b82-4481-43c9-b8f4-681f4c722586","app.js","9a1244ee-6446-11f1-a3f1-1607ee4eb77e",8,["D",1784824788314],"script","const stage = document.getElementById(\"stage\");\nconst face = document.getElementById(\"cageFace\");\nconst confettiCanvas = document.getElementById(\"confetti\");\nconst confettiContext = confettiCanvas.getContext(\"2d\");\nconst stats = document.getElementById(\"stats\");\nconst statsToggle = document.getElementById(\"statsToggle\");\n\nconst nearestDistanceEl = document.getElementById(\"nearestDistance\");\nconst bestDistanceEl = document.getElementById(\"bestDistance\");\nconst cornerHitsEl = document.getElementById(\"cornerHits\");\nconst nearestCornerEl = document.getElementById(\"nearestCorner\");\n\nstatsToggle.addEventListener(\"click\", () => {\n const shouldShow = stats.hidden;\n stats.hidden = !shouldShow;\n statsToggle.setAttribute(\"aria-expanded\", String(shouldShow));\n statsToggle.textContent = shouldShow ? \"Hide stats\" : \"Show stats\";\n});\n\n// All animation state lives here so resize handling, bounce physics, stats, and\n// confetti can stay deterministic inside a single requestAnimationFrame loop.\nconst state = {\n x: 37,\n y: 83,\n vx: 1.4,\n vy: 0.95,\n width: 140,\n height: 140,\n bestDistance: Infinity,\n cornerHits: 0,\n confetti: [],\n};\n\n// Corner coordinates are normalized. x/y values of 1 map to maxX/maxY after\n// accounting for the current rendered size of the face.\nconst corners = [\n { name: \"top left\", x: 0, y: 0 },\n { name: \"top right\", x: 1, y: 0 },\n { name: \"bottom left\", x: 0, y: 1 },\n { name: \"bottom right\", x: 1, y: 1 },\n];\n\nfunction resize() {\n const rect = face.getBoundingClientRect();\n state.width = rect.width || state.width;\n state.height = rect.height || state.height;\n state.x = Math.min(state.x, maxX());\n state.y = Math.min(state.y, maxY());\n\n const pixelRatio = window.devicePixelRatio || 1;\n confettiCanvas.width = Math.floor(stage.clientWidth * pixelRatio);\n confettiCanvas.height = Math.floor(stage.clientHeight * pixelRatio);\n confettiCanvas.style.width = `${stage.clientWidth}px`;\n confettiCanvas.style.height = `${stage.clientHeight}px`;\n confettiContext.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);\n}\n\nfunction maxX() {\n // The face's transform uses the top-left corner, so the furthest valid x\n // position is the viewport width minus the face width.\n return Math.max(0, stage.clientWidth - state.width);\n}\n\nfunction maxY() {\n return Math.max(0, stage.clientHeight - state.height);\n}\n\nfunction stepBounce() {\n let hitX = false;\n let hitY = false;\n\n state.x += state.vx;\n state.y += state.vy;\n\n if (state.x <= 0 || state.x >= maxX()) {\n state.x = Math.max(0, Math.min(maxX(), state.x));\n state.vx *= -1;\n hitX = true;\n }\n\n if (state.y <= 0 || state.y >= maxY()) {\n state.y = Math.max(0, Math.min(maxY(), state.y));\n state.vy *= -1;\n hitY = true;\n }\n\n if (hitX && hitY && isExactlyCorner()) {\n state.cornerHits += 1;\n cornerHitsEl.textContent = String(state.cornerHits);\n rainConfetti();\n }\n}\n\nfunction isExactlyCorner() {\n // Floating point velocity can leave tiny fractions after clamping, so compare\n // rounded pixel positions when deciding whether to celebrate a perfect hit.\n const x = Math.round(state.x);\n const y = Math.round(state.y);\n return (x === 0 || x === Math.round(maxX())) && (y === 0 || y === Math.round(maxY()));\n}\n\nfunction distanceToNearestCorner() {\n const bounds = { maxX: maxX(), maxY: maxY() };\n let nearest = { name: \"\", distance: Infinity };\n\n for (const corner of corners) {\n const targetX = corner.x * bounds.maxX;\n const targetY = corner.y * bounds.maxY;\n // Euclidean distance gives a single \"how close was it?\" value for near\n // misses where both axes are offset from the corner.\n const distance = Math.hypot(state.x - targetX, state.y - targetY);\n\n if (distance < nearest.distance) {\n nearest = { name: corner.name, distance };\n }\n }\n\n return nearest;\n}\n\nfunction updateStats() {\n const nearest = distanceToNearestCorner();\n state.bestDistance = Math.min(state.bestDistance, nearest.distance);\n\n nearestDistanceEl.textContent = `${nearest.distance.toFixed(2)} px`;\n bestDistanceEl.textContent = `${state.bestDistance.toFixed(2)} px`;\n nearestCornerEl.textContent = nearest.name;\n}\n\nfunction rainConfetti() {\n const colors = [\"#ffd166\", \"#ef476f\", \"#06d6a0\", \"#118ab2\", \"#f8f7ff\"];\n\n for (let i = 0; i < 170; i += 1) {\n state.confetti.push({\n x: Math.random() * stage.clientWidth,\n y: -20 - Math.random() * stage.clientHeight * 0.4,\n vx: -2 + Math.random() * 4,\n vy: 3 + Math.random() * 5,\n size: 5 + Math.random() * 8,\n spin: Math.random() * Math.PI,\n rotationSpeed: -0.25 + Math.random() * 0.5,\n color: colors[Math.floor(Math.random() * colors.length)],\n life: 220 + Math.random() * 90,\n });\n }\n}\n\nfunction drawConfetti() {\n confettiContext.clearRect(0, 0, stage.clientWidth, stage.clientHeight);\n\n // Updating and filtering in one pass keeps old particles from accumulating\n // forever on long-running screensaver sessions.\n state.confetti = state.confetti.filter((piece) => {\n piece.x += piece.vx;\n piece.y += piece.vy;\n piece.vy += 0.035;\n piece.spin += piece.rotationSpeed;\n piece.life -= 1;\n\n confettiContext.save();\n confettiContext.translate(piece.x, piece.y);\n confettiContext.rotate(piece.spin);\n confettiContext.fillStyle = piece.color;\n confettiContext.fillRect(-piece.size / 2, -piece.size / 2, piece.size, piece.size * 0.55);\n confettiContext.restore();\n\n return piece.life > 0 && piece.y < stage.clientHeight + 40;\n });\n}\n\nfunction render() {\n stepBounce();\n face.style.transform = `translate3d(${state.x}px, ${state.y}px, 0)`;\n updateStats();\n drawConfetti();\n requestAnimationFrame(render);\n}\n\nface.addEventListener(\"load\", () => {\n resize();\n render();\n});\n\nwindow.addEventListener(\"resize\", resize);\n\nif (face.complete) {\n resize();\n render();\n}\n",[150],"27a1a12c-3383-4bf8-ac7a-911891b47bf0","README.md","b08dfe16-6446-11f1-aa01-1607ee4eb77e",6,["D",1781039019765],"# Cage Corner Watch\n\nA static, single-page DVD-screensaver-style toy: Nicolas Cage's face bounces around the viewport while the page measures how close it gets to landing exactly in a corner.\n\n## Run\n\nThe Val Town deployment is served by `main.ts` using `staticHTTPServer()` from `https://esm.town/v/std/utils/index.ts`.\n\nLocally, open `index.html` directly, or serve the directory with:\n\n```sh\nnpx live-server\n```\n\nThe app has no build step and no runtime dependencies.\n\n## How It Works\n\n- `main.ts` is the Val Town HTTP endpoint.\n- `index.html` defines the stat display, the bouncing face image, and the confetti canvas.\n- `styles.css` creates the 2000s CRT treatment with scanlines, phosphor glow, vignette, and RGB ghosting.\n- `app.js` owns the animation loop, corner-distance math, and confetti particle simulation.\n- `cage-face.svg` is the local face asset, so the page works offline.\n\nThe distance readout is based on the top-left coordinate of the face's bounding box. For each animation frame, the app compares that point to the four valid corner positions: `(0, 0)`, `(maxX, 0)`, `(0, maxY)`, and `(maxX, maxY)`. The nearest Euclidean distance is shown in pixels and the best value is retained.\n\nConfetti triggers when a bounce hits both a horizontal and vertical wall on the same frame and the clamped position is exactly one of those valid corner coordinates.\n",[158],"pulls","branches","forks","envVars",{"_171":42,"_173":42},"connections",{"_171":42,"_172":42},"count","unfilledCount","emptyCount",{"_18":157,"_20":158,"_115":159,"_117":-5,"_118":68,"_119":160,"_120":38,"_22":196,"_65":42,"_123":96,"_124":162,"_126":26,"_127":-5,"_181":197,"_85":198},{"_18":149,"_20":150,"_115":151,"_117":-5,"_118":68,"_119":152,"_120":38,"_22":193,"_65":122,"_123":154,"_124":155,"_126":26,"_127":-5,"_181":194,"_85":195},{"_18":142,"_20":143,"_115":144,"_117":-5,"_118":68,"_119":145,"_120":38,"_22":190,"_65":42,"_123":96,"_124":147,"_126":26,"_127":-5,"_181":191,"_85":192},{"_18":135,"_20":136,"_115":137,"_117":-5,"_118":68,"_119":138,"_120":38,"_22":187,"_65":122,"_123":96,"_124":140,"_126":26,"_127":-5,"_181":188,"_85":189},{"_18":129,"_20":130,"_115":36,"_117":-5,"_118":68,"_119":122,"_120":38,"_22":184,"_65":42,"_123":132,"_124":133,"_126":26,"_127":21,"_181":185,"_85":186},{"_18":113,"_20":114,"_115":116,"_117":-5,"_118":68,"_119":66,"_120":38,"_22":180,"_65":122,"_123":96,"_124":125,"_126":26,"_127":-5,"_181":182,"_85":183},["D",1784824834006],"children",[],[114],["D",1781038895331],[],[130],["D",1784824745401],[],[136],["D",1781039006758],[],[143],["D",1784824788314],[],[150],["D",1781039019765],[],[158],["D",1781038895267],{"_16":17,"_83":79},{"_16":17,"_77":-5,"_78":79,"_33":34,"_80":81,"_82":26},{"_65":66,"_20":67,"_18":68,"_69":19,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":21,"_76":17},"ctx",{"_58":-5,"_104":236,"_237":238,"_239":240,"_241":26,"_242":26,"_243":26,"_244":38,"_245":-5,"_246":-7,"_247":-7,"_248":42,"_249":26,"_250":26,"_251":-5,"_252":26,"_253":26,"_254":26,"_255":-5},"ENV",{"_207":208,"_209":210,"_211":67,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search