Output fps

html/images/tanks.svg

@@ -0,0 +1,315 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg viewBox="-200 -150 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    circle, rect {
+      /* fill-opacity: 0.9; */
+    }
+
+    p {
+      border: 1px solid black;
+      box-size: border-box;
+    }
+
+    /* div { */
+    /*   background-color: maroon; */
+    /* } */
+
+    rect#bg {
+      fill: gray;
+    }
+
+    /* .rotate { */
+    /*   transform: rotate(90deg); */
+    /*   animation-duration: 1s; */
+    /*   animation-name: rotate; */
+    /* } */
+
+    .tank rect {
+      fill: green;
+      transform: translate(-7.5px, -5px);
+    }
+
+    #crosshair {
+      opacity: 0.5;
+    }
+
+    /* @keyframes rotate { */
+    /*   from { */
+    /*     transform: rotate(0); */
+    /*   } */
+    /*   to { */
+    /*     transform: rotate(90deg); */
+    /*   } */
+    /* } */
+  </style>
+
+  <g>
+    <!-- <circle id="pointer" cx="0" cy="0" r="5" fill="red" stroke="maroon"/> -->
+    <rect id="bg" x="-200" y="-150" width="400" height="300"/>
+    <g class="hitbox">
+      <g class="tank">
+        <line x1="0" y1="0" x2="0" y2="10" stroke="black"/>
+        <rect width="15" height="10"/>
+      </g>
+    </g>
+    <g id="crosshair">
+      <line x1="-2" y1="0" x2="2" y2="0" stroke="red"/>
+      <line x1="0" y1="-2" x2="0" y2="2" stroke="red"/>
+    </g>
+  </g>
+
+  <foreignObject x="-200" y="-150" width="100%" height="100%">
+    <div id="frames" style="position: absolute; right: 0px;" xmlns="http://www.w3.org/1999/xhtml">
+      <span id="fps" xmlns="http://www.w3.org/1999/xhtml">0</span> fps
+    </div>
+
+    <button id="turn-left" xmlns="http://www.w3.org/1999/xhtml">Left</button>
+    <button id="move-backward" xmlns="http://www.w3.org/1999/xhtml">Reverse</button>
+    <button id="move-forward" xmlns="http://www.w3.org/1999/xhtml">Forward</button>
+    <button id="turn-right" xmlns="http://www.w3.org/1999/xhtml">Right</button>
+  </foreignObject>
+
+  <script type="text/javascript">//<![CDATA[
+    const rules = document.styleSheets[0].cssRules;
+    const tank = document.querySelector(".tank");
+    const hitbox = document.querySelector(".hitbox");
+    const leftTurnButton = document.querySelector("#turn-left");
+    const rightTurnButton = document.querySelector("#turn-right");
+    const reverseMoveButton = document.querySelector("#move-backward");
+    const forwardMoveButton = document.querySelector("#move-forward");
+    const fps = document.querySelector("#fps");
+
+    let zero;
+    let frameCount = 0;
+
+    requestAnimationFrame(firstFrame);
+
+    function firstFrame(timestamp) {
+      zero = timestamp;
+      animate(timestamp);
+    }
+
+    function animate(timestamp) {
+      if (timestamp - zero >= 1000) {
+        fps.innerText = frameCount;
+        zero = timestamp;
+        frameCount = 0;
+      } else {
+        frameCount++;
+      }
+
+      requestAnimationFrame(t => animate(t));
+    }
+
+    function moveTank(el) {
+      const tankMove = el.animate(
+        [
+          { transform: `translate(0, -10px)`},
+          { transform: `translate(0, 10px)`}
+        ], {
+          duration: 1000,
+          fill: 'both'
+        }
+      );
+      tankMove.pause();
+      tankMove.currentTime = tankMove.effect.getComputedTiming().activeDuration / 2;
+
+      return tankMove;
+    }
+
+    function turnTank(el) {
+      const tankTurn = el.animate(
+        [
+          { transform: 'rotate(180deg)' },
+          { transform: 'rotate(-180deg)' }
+        ], {
+          duration: 2000,
+          easint: 'ease-in-out',
+          fill: 'both'
+        }
+      );
+
+      tankTurn.pause();
+      tankTurn.currentTime = tankTurn.effect.getComputedTiming().activeDuration / 2;
+
+      return tankTurn;
+    }
+
+    const tankTurn = turnTank(tank);
+    const tankMove = moveTank(hitbox);
+
+    function degsToRads(degrees) {
+      return degrees * Math.PI / 180;
+    }
+
+    function afterTurn() {
+      const totalDegrees = 180;
+      const current = tankTurn.currentTime;
+      const duration = tankTurn.effect.getComputedTiming().activeDuration / 2;
+      const diff = current - duration;
+      const degrees = diff / duration * totalDegrees;
+      const radians = degsToRads(degrees);
+      // https://stackoverflow.com/a/3644302
+      const y = 10 * +Math.cos(radians).toFixed(15);
+      const x = 10 * +Math.sin(radians).toFixed(15);
+
+      console.log("diff", diff, "current", current, "duration", duration, diff / duration * Math.PI);
+
+      console.log("degrees", degrees, "radians", radians, "x", x == 0, "y", y);
+
+      const regex = /(-?\d*\.{0,1}\d+)px/g;
+      const [past, future] = tankMove.effect.getKeyframes()
+
+      const def = ["0px", "0"];
+      const [[, px], [, py] = def] = [...past.transform.matchAll(regex)];
+      const [[, fx], [, fy] = def] = [...future.transform.matchAll(regex)];
+
+      const position = { x: (+fx + +px) / 2, y: (+fy + +py) / 2 };
+
+      tankMove.effect.setKeyframes(
+        [
+          { transform: `translate(${-x + position.x}px, ${-y + position.y}px)`},
+          { transform: `translate(${x + position.x}px, ${y + position.y}px)`}
+        ], {
+          duration: 5000,
+          fill: 'both'
+        }
+      );
+
+      const [pkf, fkf] = tankMove.effect.getKeyframes();
+      console.log(pkf.transform, fkf.transform);
+    }
+
+    function afterMove() {
+      const totalDistance = 10;
+      const current = tankMove.currentTime;
+      const duration = tankMove.effect.getComputedTiming().activeDuration / 2;
+      const regex = /(-?\d*\.{0,1}\d+)px/g;
+      const [past, future] = tankMove.effect.getKeyframes()
+
+      const totalDegrees = 180;
+      const turnCurrent = tankTurn.currentTime;
+      const turnDuration = tankTurn.effect.getComputedTiming().activeDuration / 2;
+      // const diff = turnDuration - turnCurrent;
+      const diff = turnCurrent - turnDuration;
+      const degrees = diff / turnDuration * totalDegrees;
+      const radians = degsToRads(degrees);
+
+      const def = ["0px", "0"];
+      const [[, px], [, py] = def] = [...past.transform.matchAll(regex)];
+      const [[, fx], [, fy] = def] = [...future.transform.matchAll(regex)];
+
+      const timeSpan = Math.abs(duration - current);
+      // const timeSpan = duration - current;
+      const distanceTraveled = timeSpan / duration * totalDistance;
+      let y = distanceTraveled * +Math.cos(radians).toFixed(15) * tankMove.playbackRate;
+      let x = distanceTraveled * +Math.sin(radians).toFixed(15) * tankMove.playbackRate;
+
+      // console.log("distanceTraveled", distanceTraveled);
+
+      if (degrees > 0 && degrees < 90) {
+        // quadrant 1
+        console.log("quadrant 1");
+        x = -x;
+        y = -y;
+      } else if (degrees > 90 && degrees < 180) {
+        // quadrant 2
+        console.log("quadrant 2");
+        x = -x;
+        y = -y;
+      } else if (degrees < -90 && degrees > -180) {
+        // quadrant 3
+        console.log("quadrant 3");
+        x = -x;
+        y = -y;
+      } else if (degrees < 0 && degrees > -90) {
+        // quadrant 4
+        console.log("quadrant 4");
+        x = -x;
+        y = -y;
+      } else if (degrees === 0) {
+        x = +x;
+        y = -y;
+      } else if (degrees === 90) {
+        x = +x;
+        y = +y;
+      } else if (degrees === -90) {
+        x = -x;
+        y = +y;
+      } else {
+        x = +x;
+        y = -y;
+      }
+
+      const position = { x: (+fx + +px) / 2, y: (+fy + +py) / 2};
+      const [turnPast, turnFuture] = tankTurn.effect.getKeyframes()
+
+      // console.log("playbackRate", tankMove.playbackRate);
+      // console.log("before", past.transform, future.transform);
+      // console.log("position", position, "degrees", degrees, "x", x, "y", y);
+
+      // can get transformation matrix
+      // getComputedStyle(hitbox).transform
+
+      tankMove.effect.setKeyframes(
+        [
+          { transform: `translate(${-x + +px}px, ${-y + +py}px)`},
+          { transform: `translate(${-x + +fx}px, ${-y + +fy}px)`}
+        ], {
+          duration: 5000,
+          fill: 'both'
+        }
+      );
+      tankMove.currentTime = duration;
+
+      const [pkf, fkf] = tankMove.effect.getKeyframes()
+      // console.log("after", pkf.transform, fkf.transform);
+    }
+
+    leftTurnButton.addEventListener("mousedown", function (e) {
+      tankTurn.playbackRate = 1;
+      tankTurn.play();
+    });
+
+    leftTurnButton.addEventListener("mouseup", function (e) {
+      tankTurn.pause();
+      afterTurn();
+    });
+
+    rightTurnButton.addEventListener("mousedown", function (e) {
+      tankTurn.playbackRate = -1;
+      tankTurn.play();
+    });
+
+    rightTurnButton.addEventListener("mouseup", function (e) {
+      tankTurn.pause();
+      afterTurn();
+    });
+
+    reverseMoveButton.addEventListener("mousedown", function (e) {
+      tankMove.playbackRate = -1;
+      tankMove.play();
+    });
+
+    reverseMoveButton.addEventListener("mouseup", function (e) {
+      tankMove.pause();
+      afterMove();
+    });
+
+    forwardMoveButton.addEventListener("mousedown", function (e) {
+      tankMove.playbackRate = 1;
+      tankMove.play();
+    });
+
+    forwardMoveButton.addEventListener("mouseup", function (e) {
+      tankMove.pause();
+      afterMove();
+    });
+
+    // tankTurn.addEventListener("finish", function (e) {
+    //   const duration = tankTurn.effect.getComputedTiming().activeDuration;
+    //   tankTurn.currentTime = tankTurn.currentTime > 0 ? 0 : duration;
+    // });
+  //]]></script>
+</svg>
+