Skip to content
Deasy Corporation
Logos
Theos
Work
Deasy Corporation
2026 AD
Games
Ping Wave Reveal POC
Back to Gaming Concepts
Press Space to emit a circular “sonar ping” that expands and briefly reveals objects it touches.
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>POC — Ping Wave Reveal (Fixed Loop)</title> <style> html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#000; } canvas { display:block; outline:none; } .hint { position:absolute; left:12px; bottom:12px; color:#aaa; font:14px system-ui; user-select:none; } </style> </head> <body> <canvas id="c" width="1500" height="1500" tabindex="0"></canvas> <div class="hint">CLICK canvas once • Arrows move • Space pings</div> <script> const c = document.getElementById("c"); const x = c.getContext("2d"); const W = 1500, H = 1500; function focusCanvas(){ try { c.focus(); } catch(_){} } focusCanvas(); c.addEventListener("pointerdown", focusCanvas); // Key state (document inside iframe) const k = Object.create(null); function isBlocked(code, key){ return code === "ArrowUp" || code === "ArrowDown" || code === "ArrowLeft" || code === "ArrowRight" || code === "Space" || key === " "; } document.addEventListener("keydown", (e) => { if (isBlocked(e.code, e.key)) e.preventDefault(); if (e.code.startsWith("Arrow")) k[e.code] = true; // Space = ping on keydown edge if (e.code === "Space" || e.key === " ") { if (!k.__spaceDown) { k.__spaceDown = true; startPing(); } } }, { passive:false }); document.addEventListener("keyup", (e) => { if (isBlocked(e.code, e.key)) e.preventDefault(); if (e.code.startsWith("Arrow")) k[e.code] = false; if (e.code === "Space" || e.key === " ") k.__spaceDown = false; }, { passive:false }); // Player const p = { x: W/2, y: H/2, vx:0, vy:0 }; const ACCEL = 0.55, DRAG = 0.92, MAX = 14; // Dots (hidden until seen) const dots = Array.from({length: 90}, () => ({ x: Math.random()*W, y: Math.random()*H, r: 4 + Math.random()*10, seen: 0 })); // Pings const pings = []; const PING_SPEED = 18; // faster so you SEE it const PING_BAND = 26; // thicker reveal band const SEEN_DECAY = 0.90; // slower fade so it reads function clamp(v,a,b){ return Math.max(a, Math.min(b,v)); } function startPing(){ pings.push({ x:p.x, y:p.y, r:0, life:1 }); } function update(){ // movement if (k.ArrowUp) p.vy -= ACCEL; if (k.ArrowDown) p.vy += ACCEL; if (k.ArrowLeft) p.vx -= ACCEL; if (k.ArrowRight) p.vx += ACCEL; p.vx *= DRAG; p.vy *= DRAG; const sp = Math.hypot(p.vx, p.vy); if (sp > MAX){ p.vx = (p.vx/sp)*MAX; p.vy = (p.vy/sp)*MAX; } p.x = clamp(p.x + p.vx, 0, W); p.y = clamp(p.y + p.vy, 0, H); // expand pings for (const pg of pings){ pg.r += PING_SPEED; pg.life *= 0.985; } // cull for (let i=pings.length-1;i>=0;i--){ if (pings[i].r > 2600 || pings[i].life < 0.05) pings.splice(i,1); } // fade seen for (const d of dots) d.seen *= SEEN_DECAY; // reveal when ring passes dot for (const pg of pings){ for (const d of dots){ const dist = Math.hypot(d.x - pg.x, d.y - pg.y); if (Math.abs(dist - pg.r) <= PING_BAND) d.seen = 1; } } } function draw(){ x.clearRect(0,0,W,H); // grid x.strokeStyle = "rgba(255,255,255,0.05)"; for (let i=0;i<=W;i+=150){ x.beginPath(); x.moveTo(i,0); x.lineTo(i,H); x.stroke(); } for (let j=0;j<=H;j+=150){ x.beginPath(); x.moveTo(0,j); x.lineTo(W,j); x.stroke(); } // dots (only if seen) for (const d of dots){ if (d.seen < 0.02) continue; x.fillStyle = `rgba(255,255,255,${0.10 + d.seen*0.90})`; x.beginPath(); x.arc(d.x, d.y, d.r, 0, Math.PI*2); x.fill(); } // pings (make visible) for (const pg of pings){ x.strokeStyle = `rgba(255,255,255,${0.20 + pg.life*0.35})`; x.lineWidth = 3; x.beginPath(); x.arc(pg.x, pg.y, pg.r, 0, Math.PI*2); x.stroke(); } // player x.fillStyle = "#fff"; x.beginPath(); x.arc(p.x, p.y, 10, 0, Math.PI*2); x.fill(); // HUD const seenCount = dots.reduce((a,d)=>a+(d.seen>0.02?1:0),0); x.fillStyle = "rgba(255,255,255,0.6)"; x.font = "14px system-ui"; x.fillText(`pings=${pings.length} visibleDots=${seenCount}/${dots.length} (click canvas once)`, 12, 24); } function loop(){ update(); draw(); requestAnimationFrame(loop); } loop(); </script> </body> </html> '></iframe> </div> </code></pre> <p></p> </div> </main> <footer id="site-footer" class="site-footer"> <nav class="site-navigation" aria-label="Footer menu"> <ul id="menu-welcome-menu-1" class="menu"><li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-6304"><a href="https://chrisdeasy.com/logos/">Logos</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6307"><a href="https://chrisdeasy.com/theos/">Theos</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6615"><a href="https://chrisdeasy.com/work/">Work</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108825"><a href="https://chrisdeasy.com/deasy-corporation/">Deasy Corporation</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108823"><a href="https://chrisdeasy.com/logos/linea/time/history/historical-events/human-history/contemporary-history/deasy-era/2026-ad/">2026 AD</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-108824"><a href="https://chrisdeasy.com/logos/patterns/games/">Games</a></li> </ul> </nav> </footer> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/hello-elementor/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script src="https://cdn.trustedsite.com/js/1.js" id="trustedsite-badge-js" async data-wp-strategy="async"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://chrisdeasy.com/wp-includes/js/wp-emoji-release.min.js?ver=6.9.4"}} </script> <script type="module"> /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://chrisdeasy.com/wp-includes/js/wp-emoji-loader.min.js </script> <script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]), _trfd.push({'tccl.baseHost':'secureserver.net'}), _trfd.push({'ap':'wpaas_v2'}, {'server':'33e647dff5bf'}, {'pod':'c33-prod-p3-us-west-2'}, {'xid':'4063909'}, {'wp':'6.9.4'}, {'php':'8.1.34.1'}, {'loggedin':'0'}, {'cdn':'1'}, {'builder':'wp-block-editor'}, {'theme':'hello-elementor'}, {'wds':'0'}, {'wp_alloptions_count':'286'}, {'wp_alloptions_bytes':'169527'}, {'gdl_coming_soon_page':'0'} , {'appid':'1063845'} ); var trafficScript = document.createElement('script'); trafficScript.src = 'https://img1.wsimg.com/signals/js/clients/scc-c2/scc-c2.min.js'; window.document.head.appendChild(trafficScript);</script> <script>window.addEventListener('click', function (elem) { var _elem$target, _elem$target$dataset, _window, _window$_trfq; return (elem === null || elem === void 0 ? void 0 : (_elem$target = elem.target) === null || _elem$target === void 0 ? void 0 : (_elem$target$dataset = _elem$target.dataset) === null || _elem$target$dataset === void 0 ? void 0 : _elem$target$dataset.eid) && ((_window = window) === null || _window === void 0 ? void 0 : (_window$_trfq = _window._trfq) === null || _window$_trfq === void 0 ? void 0 : _window$_trfq.push(["cmdLogEvent", "click", elem.target.dataset.eid]));});</script> <script src='https://img1.wsimg.com/traffic-assets/js/tccl-tti.min.js' onload="window.tti.calculateTTI()"></script> </body> </html>