doodler/main.ts

/// <reference types="./global.d.ts" />

import { GIFAnimation } from "./animation/gif.ts";
import { SpriteAnimation } from "./animation/sprite.ts";
import { initializeDoodler, Vector } from "./mod.ts";
import { handleGIF } from "./processing/gif.ts";
import { ZoomableDoodler } from "./zoomableCanvas.ts";
import { axisAlignedCollision, axisAlignedContains } from "./collision/aa.ts";
import { circularCollision } from "./collision/circular.ts";
import { satCollisionSpline } from "./collision/sat.ts";
import { Polygon } from "./geometry/polygon.ts";
import { SplineSegment } from "./geometry/spline.ts";
// import { ZoomableDoodler } from "./zoomableCanvas.ts";

initializeDoodler(
  {
    // width: 2400,
    fillScreen: true,
    // height: 1200,
    bg: "#333",
  },
  true,
  (ctx) => {
    ctx.imageSmoothingEnabled = false;
    // ctx.translate(1200, 600);
  },
);

// const movingVector = new Vector(100, 300);
// let angleMultiplier = 0;
// const v = new Vector(30, 30);
// doodler.registerDraggable(v, 20);
const img = new Image();
img.src = "./pixel fire.gif";

const p = new Vector();
const gif = new GIFAnimation("./fire-joypixels.gif", p, .5);

const spline = new SplineSegment([
  new Vector({ x: -25, y: -25 }).mult(10).add(p),
  new Vector({ x: 25, y: -25 }).mult(10).add(p),
  new Vector({ x: -25, y: -25 }).mult(10).add(p),
  new Vector({ x: -25, y: 25 }).mult(10).add(p),
]);
// poly.center = p.copy();

const poly2 = Polygon.createPolygon(4);

poly2.center = p.copy().add(100, 100);
// poly.center.add(p);

doodler.createLayer((c, i, t) => {
  gif.draw(t);
  // c.translate(1200, 600);
  for (let i = 0; i < c.canvas.width; i += 50) {
    for (let j = 0; j < c.canvas.height; j += 50) {
      doodler.drawSquare(new Vector(i, j), 50, { color: "#00000010" });
    }
  }
  const cir = poly2.circularHitbox;
  // const t = spline.getPointsWithinRadius(
  //   new Vector(cir.center),
  //   cir.radius,
  // ).map((t) => t[0]);
  const intersects = satCollisionSpline(poly2, spline);
  const color = intersects ? "red" : "aqua";

  // const point = spline.getPointAtT(t || 0);
  // point.drawDot("pink");

  // console.log(satCollision(
  // ));

  // for (let i = 0; i < 10; i++) {
  // for (const i of t) {
  //   // const tan = spline.tangent(i / 10);
  //   const point = spline.getPointAtT(i);
  //   point.drawDot();
  // }

  spline.draw(color);

  poly2.draw(color);

  // poly2.center.add(Vector.random2D());
  const [gamepad] = navigator.getGamepads();
  const deadzone = 0.05;
  if (gamepad) {
    const leftX = gamepad.axes[0];
    const leftY = gamepad.axes[1];
    const rightX = gamepad.axes[2];
    const rightY = gamepad.axes[3];

    // if (axisAlignedContains(poly2.aaHitbox, poly.aaHitbox)) {
    //   poly.center.add(
    //     new Vector(
    //       Math.min(Math.max(rightX - deadzone, 0), rightX + deadzone),
    //       Math.min(Math.max(rightY - deadzone, 0), rightY + deadzone),
    //     ).mult(10),
    //   );
    //   poly2.center.add(
    //     new Vector(
    //       Math.min(Math.max(leftX - deadzone, 0), leftX + deadzone),
    //       Math.min(Math.max(leftY - deadzone, 0), leftY + deadzone),
    //     ).mult(10),
    //   );
    // }

    // poly.center.add(
    //   new Vector(
    //     Math.min(Math.max(leftX - deadzone, 0), leftX + deadzone),
    //     Math.min(Math.max(leftY - deadzone, 0), leftY + deadzone),
    //   ).mult(10),
    // );
    let mMulti = 10;
    const mod = new Vector(
      Math.min(Math.max(rightX - deadzone, 0), rightX + deadzone),
      Math.min(Math.max(rightY - deadzone, 0), rightY + deadzone),
    );
    // let future = new Vector(cir.center).add(mod.copy().mult(mMulti--));
    // while (spline.intersectsCircle(future, cir.radius)) {
    //   // if (mMulti === 0) {
    //   //   mMulti = 1;
    //   //   break;
    //   // }
    //   future = new Vector(cir.center).add(mod.copy().mult(mMulti--));
    // }
    poly2.center.add(
      mod.mult(mMulti),
    );

    // (doodler as ZoomableDoodler).moveOrigin({ x: -rigthX * 5, y: -rigthY * 5 });

    // if (gamepad.buttons[7].value) {
    //   (doodler as ZoomableDoodler).scaleAt(
    //     { x: 200, y: 200 },
    //     1 + (gamepad.buttons[7].value / 5),
    //   );
    // }
    // if (gamepad.buttons[6].value) {
    //   (doodler as ZoomableDoodler).scaleAt(
    //     { x: 200, y: 200 },
    //     1 - (gamepad.buttons[6].value / 5),
    //   );
    // }
  }
  // doodler.drawImageWithOutline(img, p);
  // doodler.line(new Vector(100, 100), new Vector(200, 200))
  // doodler.dot(new Vector(300, 300))
  // doodler.fillCircle(movingVector, 6, { color: 'red' });
  // doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
  // doodler.fillRect(new Vector(200, 250), 30, 10)

  // doodler.drawCenteredSquare(new Vector(200, 200), 40, { color: 'purple', weight: 5 })
  // doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250))

  // let rotatedOrigin = new Vector(200, 200)
  // doodler.drawRotated(rotatedOrigin, Math.PI * angleMultiplier, () => {
  //   doodler.drawCenteredSquare(rotatedOrigin, 30)
  //   doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20)
  // })

  // movingVector.set((movingVector.x + 1) % 400, movingVector.y);
  // angleMultiplier += .001;

  // doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20)

  // doodler.drawScaled(1.5, () => {
  //   doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), {
  //     color: "grey",
  //     weight: 2,
  //   });
  //   doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), {
  //     color: "grey",
  //     weight: 2,
  //   });
  //   doodler.line(p, p.copy().add(0, 12), { color: "brown", weight: 4 });
  //   doodler.line(p, p.copy().add(0, -12), { color: "brown", weight: 4 });
  // });
});

// document.addEventListener("keyup", (e) => {
//   e.preventDefault();
//   if (e.key === " ") {
//     doodler.unregisterDraggable(v);
//   }
// });