Skip to content
Deasy Corporation
Logos
Theos
Work
Deasy Corporation
2026 AD
Games
Starfield Drift POC
Back to Gaming Concepts
A simple drifting starfield on a 1500×1500 canvas to validate background motion and visual density.
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>POC — Starfield Drift</title> <style> html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#000; } canvas { display:block; width:1500px; height:1500px; } </style> </head> <body> <canvas id="c" width="1500" height="1500"></canvas> <script> const c = document.getElementById("c"); const x = c.getContext("2d"); // POC: drifting starfield (no camera, no player) const W = 1500, H = 1500; const STAR_COUNT = 600; const stars = Array.from({length: STAR_COUNT}, () => ({ x: Math.random() * W, y: Math.random() * H, r: Math.random() * 1.5 + 0.5, v: Math.random() * 0.4 + 0.1 })); function loop(){ x.clearRect(0, 0, W, H); x.fillStyle = "white"; for (const s of stars) { s.y += s.v; if (s.y > H) s.y = 0; x.beginPath(); x.arc(s.x, s.y, s.r, 0, Math.PI * 2); x.fill(); } 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>