Skip to content
Deasy Corporation
Logos
Theos
Work
Deasy Corporation
2026 AD
Games
Multi-Select and Group Move Rigid Formation POC
Back to Gaming Concepts
<html> <head> <meta charset="utf-8"> <title>Multi-Select + Group Move</title> <style> html,body{margin:0;height:100%;background:#000;overflow:hidden;font-family:system-ui} canvas{display:block;width:100%;height:100%;touch-action:none} #banner{ position:absolute;top:12px;left:50%;transform:translateX(-50%); padding:10px 18px;border-radius:999px; background:rgba(0,0,0,.7); border:2px solid rgba(120,220,255,.9); color:#e9f8ff;font-weight:800;letter-spacing:.4px; pointer-events:none } </style> </head> <body> <canvas id="c" width="1200" height="1200"></canvas> <div id="banner">DRAG EMPTY SPACE TO BOX-SELECT • DRAG SELECTED TO MOVE</div> <script> (()=>{ const c=document.getElementById("c"),ctx=c.getContext("2d"); const VW=c.width,VH=c.height,W=4096,H=4096; let camX=W/2,camY=H/2,zoom=.7; let mx=VW/2,my=VH/2,mwx=camX,mwy=camY; const objs=[]; let id=1; const sel=new Set(); let box=false,bx0=0,by0=0,bx1=0,by1=0; let dragging=false,anchorX=0,anchorY=0,offsets=null; function sw(px,py){return{x:camX+(px-VW/2)/zoom,y:camY+(py-VH/2)/zoom}} function ws(wx,wy){return{x:(wx-camX)*zoom+VW/2,y:(wy-camY)*zoom+VH/2}} function clampCam(){ const hw=(VW/2)/zoom,hh=(VH/2)/zoom; camX=Math.max(hw,Math.min(W-hw,camX)); camY=Math.max(hh,Math.min(H-hh,camY)); } function add(wx,wy){ objs.push({id:id++,x:wx-70,y:wy-50,w:140,h:100}); } function hit(wx,wy){ for(let i=objs.length-1;i>=0;i--){ const o=objs[i]; if(wx>=o.x&&wx<=o.x+o.w&&wy>=o.y&&wy<=o.y+o.h) return o.id; } return null; } function startGroup(){ dragging=true; anchorX=mwx; anchorY=mwy; offsets=new Map(); sel.forEach(i=>{ const o=objs.find(o=>o.id===i); offsets.set(i,{dx:o.x-anchorX,dy:o.y-anchorY}); }); } function updateGroup(){ sel.forEach(i=>{ const o=objs.find(o=>o.id===i); const off=offsets.get(i); o.x=mwx+off.dx; o.y=mwy+off.dy; }); } function drawGrid(){ ctx.strokeStyle="rgba(255,255,255,.06)"; ctx.lineWidth=1; ctx.beginPath(); const step=128; for(let x=0;x<=W;x+=step){ const s=ws(x,0).x; ctx.moveTo(s,0); ctx.lineTo(s,VH); } for(let y=0;y<=H;y+=step){ const s=ws(0,y).y; ctx.moveTo(0,s); ctx.lineTo(VW,s); } ctx.stroke(); } function drawObjects(){ objs.forEach(o=>{ const p=ws(o.x,o.y),w=o.w*zoom,h=o.h*zoom; ctx.fillStyle="rgba(255,255,255,.18)"; ctx.strokeStyle=sel.has(o.id)?"rgba(120,220,255,1)":"rgba(255,255,255,.8)"; ctx.lineWidth=sel.has(o.id)?5:2; ctx.fillRect(p.x,p.y,w,h); ctx.strokeRect(p.x,p.y,w,h); ctx.fillStyle="#fff"; ctx.font="14px system-ui"; ctx.fillText(o.id,p.x+8,p.y+18); }); } function drawGroupCenter(){ if(sel.size<2) return; let cx=0,cy=0; sel.forEach(i=>{ const o=objs.find(o=>o.id===i); cx+=o.x+o.w/2; cy+=o.y+o.h/2; }); cx/=sel.size; cy/=sel.size; const p=ws(cx,cy); ctx.strokeStyle="rgba(0,255,255,1)"; ctx.lineWidth=3; ctx.beginPath(); ctx.moveTo(p.x-15,p.y); ctx.lineTo(p.x+15,p.y); ctx.moveTo(p.x,p.y-15); ctx.lineTo(p.x,p.y+15); ctx.stroke(); } function drawBox(){ if(!box) return; const x=Math.min(bx0,bx1),y=Math.min(by0,by1); const w=Math.abs(bx1-bx0),h=Math.abs(by1-by0); ctx.fillStyle="rgba(120,180,255,.25)"; ctx.strokeStyle="rgba(120,220,255,1)"; ctx.lineWidth=3; ctx.fillRect(x,y,w,h); ctx.strokeRect(x,y,w,h); } c.addEventListener("pointerdown",e=>{ const r=c.getBoundingClientRect(); mx=e.clientX-r.left; my=e.clientY-r.top; const w=sw(mx,my); mwx=w.x; mwy=w.y; if(e.button===0){ const h=hit(mwx,mwy); if(h&&sel.has(h)){ startGroup(); }else if(h){ sel.clear(); sel.add(h); startGroup(); }else{ sel.clear(); box=true; bx0=mx; by0=my; bx1=mx; by1=my; } } }); c.addEventListener("pointermove",e=>{ const r=c.getBoundingClientRect(); mx=e.clientX-r.left; my=e.clientY-r.top; const w=sw(mx,my); mwx=w.x; mwy=w.y; if(box){ bx1=mx; by1=my; sel.clear(); const a=sw(Math.min(bx0,bx1),Math.min(by0,by1)); const b=sw(Math.max(bx0,bx1),Math.max(by0,by1)); objs.forEach(o=>{ if(o.x>=a.x&&o.y>=a.y&&o.x+o.w<=b.x&&o.y+o.h<=b.y) sel.add(o.id); }); } if(dragging) updateGroup(); }); c.addEventListener("pointerup",()=>{ box=false; dragging=false; offsets=null; }); c.addEventListener("wheel",e=>{ e.preventDefault(); const before=sw(mx,my); zoom=Math.max(.2,Math.min(3,zoom*(e.deltaY>0?.9:1.1))); const after=sw(mx,my); camX+=before.x-after.x; camY+=before.y-after.y; clampCam(); },{passive:false}); window.addEventListener("keydown",e=>{ if(e.key==="n") add(mwx,mwy); if(e.key==="c"){objs.length=0; sel.clear();} }); add(W/2-200,H/2-120); add(W/2+200,H/2-120); add(W/2-200,H/2+120); add(W/2+200,H/2+120); function loop(){ ctx.clearRect(0,0,VW,VH); drawGrid(); drawObjects(); drawGroupCenter(); drawBox(); 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>