canvas_camera_constrained.html

<!-- vim: sw=2 ts=2 expandtab smartindent ft=javascript
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Canvas Demo</title>
    <style> document, body { margin: 0px; padding: 0px; overflow: hidden; } </style>
  </head>

  <body>
    <canvas id="glcanvas"></canvas>
    <div style="position: absolute; top: 0; left: 0; font-family: monospace; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; display:flex; flex-direction: column; gap:0.1rem;">
      <div>
        <label for="phone_orientation" >phone orientation?</input>
        <input  id="phone_orientation" checked="true" type="checkbox"></input>
      </div>

      <div>
        <label for="drag_controls" >drag controls?</input>
        <input  id="drag_controls" type="checkbox"></input>
      </div>
    </div>
    <script>"use strict";

const canvas = document.getElementById("glcanvas");
const ctx = canvas.getContext('2d');
(window.onresize = () => {
   canvas.width = window.innerWidth*window.devicePixelRatio,
   canvas.height = window.innerHeight*window.devicePixelRatio
   canvas.style.width = window.innerWidth + 'px';
   canvas.style.height = window.innerHeight + 'px';
})();

const bounds_size_x = 12*90;
const bounds_size_y =  9*90;
const bounds_min_x = -bounds_size_x*0.5;
const bounds_min_y = -bounds_size_y*0.5;
const bounds_max_x =  bounds_size_x*0.5;
const bounds_max_y =  bounds_size_y*0.5;

let camera_goal_center_x = 0;
let camera_goal_center_y = 0;
let camera_x = camera_goal_center_x;
let camera_y = camera_goal_center_y;
let camera_scale = 1;
let mouse_down = false;
let mouse_down_x = 0;
let mouse_down_y = 0;
const camera_size_x = () => (phone_orientation.checked ?  9 : 16) * 20 * camera_scale;
const camera_size_y = () => (phone_orientation.checked ? 16 :  9) * 20 * camera_scale;

const fit_cam_to_bounds = () => {
  camera_x = camera_goal_center_x;
  camera_y = camera_goal_center_y;

  camera_scale = Math.min(1, camera_size_x() / bounds_size_x) * (bounds_size_x / (camera_size_x() / camera_scale));
  camera_scale = Math.min(1, camera_size_y() / bounds_size_y) * (bounds_size_y / (camera_size_y() / camera_scale));

  let camera_min_x = camera_x - camera_size_x()*0.5;
  let camera_min_y = camera_y - camera_size_y()*0.5;
  let camera_max_x = camera_x + camera_size_x()*0.5;
  let camera_max_y = camera_y + camera_size_y()*0.5;
  {
    camera_x += Math.max(0, bounds_min_x - camera_min_x);
    camera_x += Math.min(0, bounds_max_x - camera_max_x);
    camera_y += Math.max(0, bounds_min_y - camera_min_y);
    camera_y += Math.min(0, bounds_max_y - camera_max_y);
  }

  if (drag_controls.checked) {
    camera_goal_center_x = camera_x;
    camera_goal_center_y = camera_y;
  }
}
phone_orientation.onchange = fit_cam_to_bounds;

window.onwheel = (ev) => {
  camera_scale = Math.max(0.01, camera_scale + 0.001*ev.deltaY);
  fit_cam_to_bounds();
};
window.onmousemove = ev => {
  const mouse_x = window.devicePixelRatio * (ev.offsetX - window.innerWidth *0.5);
  const mouse_y = window.devicePixelRatio * (ev.offsetY - window.innerHeight*0.5);

  if (!drag_controls.checked) {
    camera_goal_center_x = mouse_x;
    camera_goal_center_y = mouse_y;
  }
  if (drag_controls.checked && mouse_down) {
    camera_goal_center_x += mouse_x - mouse_down_x;
    camera_goal_center_y += mouse_y - mouse_down_y;
    mouse_down_x = mouse_x;
    mouse_down_y = mouse_y;
  }

  camera_goal_center_x = Math.min(bounds_max_x, camera_goal_center_x);
  camera_goal_center_y = Math.min(bounds_max_y, camera_goal_center_y);
  camera_goal_center_x = Math.max(bounds_min_x, camera_goal_center_x);
  camera_goal_center_y = Math.max(bounds_min_y, camera_goal_center_y);

  fit_cam_to_bounds();
};
window.onmousedown = ev => {
  mouse_down = true;
  mouse_down_x = window.devicePixelRatio * (ev.offsetX - window.innerWidth *0.5);
  mouse_down_y = window.devicePixelRatio * (ev.offsetY - window.innerHeight*0.5);
};
window.onmouseup = () => {
  mouse_down = false;
};

requestAnimationFrame(function render(now) {
  requestAnimationFrame(render);

  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.save();
  {
    ctx.translate(canvas.width/2, canvas.height/2);

    ctx.strokeStyle = "red";
    ctx.lineWidth = 10;

    ctx.strokeRect(bounds_min_x, bounds_min_y, bounds_size_x, bounds_size_y);

    ctx.lineWidth = 5;
    ctx.strokeStyle = "black";
    const camera_min_x = camera_x - camera_size_x()*0.5;
    const camera_min_y = camera_y - camera_size_y()*0.5;
    ctx.strokeRect(camera_min_x, camera_min_y, camera_size_x(), camera_size_y());

    ctx.lineWidth = 5;

    ctx.strokeStyle = "cyan";
    ctx.strokeRect(camera_x - 10, camera_y - 10, 20, 20);

    ctx.strokeStyle = "magenta";
    ctx.strokeRect(camera_goal_center_x - 15, camera_goal_center_y - 15, 30, 30);
  }
  ctx.restore();
})

function lerp(v0, v1, t) { return (1 - t) * v0 + t * v1; }
function inv_lerp(min, max, p) { return (p - min) / (max - min); }
    </script>
  </body>
</html>