Rotation Without Translation POC

Back to Gaming Concepts

A single square rotates in place with left/right input to prove angular control readability without any movement.

Code for Above

<div style="max-width:1500px;margin:0 auto;">
<iframe
  title="POC — Rotation Without Translation"
  scrolling="no"
  style="width:1500px;height:1500px;border:0;display:block;background:#111;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);"
  sandbox="allow-scripts allow-same-origin"
  srcdoc='
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>POC — Rotation Without Translation</title>
<style>
  html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#111; }
  canvas { display:block; }
  .hint { position:absolute; left:12px; bottom:12px; color:#aaa; font:14px system-ui; }
</style>
</head>
<body>
<canvas id="c" width="1500" height="1500"></canvas>
<div class="hint">Left/Right: rotate • Up: quick spin</div>

<script>
const c = document.getElementById("c");
const x = c.getContext("2d");

const W = 1500, H = 1500;

// STATE
const obj = { x: W/2, y: H/2, angle: 0, angVel: 0 };

// TUNABLES
const ROT_ACCEL = 0.0025;  // angular acceleration
const ANG_DRAG  = 0.92;    // angular inertia
const ANG_MAX   = 0.08;    // max angular velocity
const SIZE      = 60;

// INPUT
const k = {};
addEventListener("keydown", e => k[e.key] = true);
addEventListener("keyup",   e => k[e.key] = false);

function update(){
  if (k["ArrowLeft"])  obj.angVel -= ROT_ACCEL;
  if (k["ArrowRight"]) obj.angVel += ROT_ACCEL;

  // optional quick-spin impulse test
  if (k["ArrowUp"]) obj.angVel *= 1.05;

  obj.angVel *= ANG_DRAG;

  // clamp
  if (obj.angVel >  ANG_MAX) obj.angVel =  ANG_MAX;
  if (obj.angVel < -ANG_MAX) obj.angVel = -ANG_MAX;

  obj.angle += obj.angVel;
}

function draw(){
  x.clearRect(0,0,W,H);

  // center crosshair for reference
  x.strokeStyle = "rgba(255,255,255,0.12)";
  x.beginPath();
  x.moveTo(W/2, H/2 - 30); x.lineTo(W/2, H/2 + 30);
  x.moveTo(W/2 - 30, H/2); x.lineTo(W/2 + 30, H/2);
  x.stroke();

  // rotating square
  x.save();
  x.translate(obj.x, obj.y);
  x.rotate(obj.angle);
  x.fillStyle = "#fff";
  x.fillRect(-SIZE/2, -SIZE/2, SIZE, SIZE);

  // orientation tick
  x.fillStyle = "rgba(0,0,0,0.6)";
  x.fillRect(SIZE/2 - 8, -4, 12, 8);
  x.restore();
}

(function loop(){
  update();
  draw();
  requestAnimationFrame(loop);
})();
</script>
</body>
</html>
'></iframe>
</div>