robinkrens.nl - git repository - xy-pid-controller/blob - src/app.js

   1 import {Vec2, Box, World} from "planck";
   2 import * as MENU from "./menu.js";
   3 import PIDController from "./pid-controller.js";
   4
   5 // Get the canvas element
   6 const canvas = document.getElementById("area");
   7 const ctx = canvas.getContext("2d");
   8
   9 const world = World(Vec2(0, 0));
  10
  11 canvas.width =  window.innerWidth;
  12 canvas.height = window.innerHeight;
  13
  14 const PPM = 30;
  15
  16 var targetX = 10;
  17 const targetY = -2.5;
  18
  19 // Define the box properties
  20 const boxWidth = 1;
  21 const boxHeight = 1;
  22
  23 // Create a dynamic body for the box
  24 const box = world.createDynamicBody(Vec2(1, -2.5));
  25 box.createFixture({
  26         shape: Box(boxWidth, boxHeight),
  27         density: 1.0,
  28         friction: 0.01,
  29 });
  30
  31 const pid = new PIDController();
  32 MENU.initMenu(pid);
  33
  34 canvas.addEventListener("click", function(event) {
  35         targetX = (event.clientX - canvas.getBoundingClientRect().left) / PPM;
  36         console.log("Updated targetX:", targetX);
  37 });
  38
  39 // Render the box on the canvas
  40 function render() {
  41         const position = box.getPosition();
  42         const angle = box.getAngle();
  43
  44         // Clear the canvas
  45         ctx.clearRect(0, 0, canvas.width, canvas.height);
  46         ctx.fillStyle = "white";
  47         ctx.fillRect(targetX * PPM, (-position.y * PPM), 30, 30);
  48
  49         // Draw the box
  50         ctx.save();
  51         //ctx.translate(position.x * PPM, (-position.y * PPM));
  52         ctx.rotate(angle);
  53         ctx.fillStyle = "blue";
  54         ctx.fillRect(position.x * PPM, (-position.y * PPM), boxWidth * PPM, boxHeight * PPM);
  55         ctx.restore();
  56         var r = pid.Update(1/60, position.x, targetX);
  57         //console.log(r);
  58         var force = {x: r, y: 0};
  59         box.applyForce(force, box.getWorldCenter());
  60 }
  61
  62 // Animation loop
  63 function animate() {
  64         world.step(1 / 60);
  65         render();
  66         requestAnimationFrame(animate);
  67 }
  68
  69 animate();