2mo ago
The Sign of Chaos 4: Now With Arrow Keys.

https://en.wikipedia.org/wiki/Symbol_of_Chaos
previously:
https://lemmy.sdf.org/post/44657804
Code:
    
<!doctype html>
<html>
  <head>
    <title>The Sign of Chaos 4: Now With Arrow Keys.</title>
    <script>
      function main() {
          let the_sign_of_chaos_image = new Image();
          the_sign_of_chaos_image.src = "data:image/svg+xml;utf8," + encodeURIComponent(document.getElementById("the_sign_of_chaos").outerHTML);
          
          const ctx = document.getElementById("canvas").getContext("2d");

          let right_press = false;
          let left_press = false;
          
          let rotation_speed = 0;
          
          document.addEventListener("keydown", function(event) {
              console.debug(event);
              if (event.code === "ArrowRight") {
                  rotation_speed += 1;
              } else if (event.code === "ArrowLeft") {
                  rotation_speed -= 1;
              };
          });
          
          function draw() {
              ctx.clearRect(0, 0, 300, 300);

              if (rotation_speed !== 0) {
                  console.debug(rotation_speed);
                  ctx.translate(150, 150);
                  ctx.rotate(rotation_speed / 100);
                  ctx.translate(-150, -150);
              }
              
              ctx.drawImage(the_sign_of_chaos_image, 0, 0, 300, 300);

              window.requestAnimationFrame(draw);
          }

          the_sign_of_chaos_image.addEventListener("load", draw);
      };

      window.addEventListener("load", main);
    </script>
  </head>
  <body>
    <div id="canvas_div">
      <canvas id="canvas" width="300" height="300"></canvas>
    </div>
    <div hidden>
      <svg id="the_sign_of_chaos"
           xmlns="http://www.w3.org/2000/svg"
           width="200"
           height="200"
           viewBox="-15 -15 30 30"
           >
        <circle r="3" />
        <g id="arrow">
          <path d="M 0 0 L 0 11" stroke-width="2" stroke="black" />
          <path d="M 0 13 l -2 -2 l 4 0 Z" stroke-width="1.9" stroke="black" />
        </g>
        <use href="#arrow" transform="rotate(45)" />
        <use href="#arrow" transform="rotate(90)" />
        <use href="#arrow" transform="rotate(135)" />
        <use href="#arrow" transform="rotate(180)" />
        <use href="#arrow" transform="rotate(225)" />
        <use href="#arrow" transform="rotate(270)" />
        <use href="#arrow" transform="rotate(315)" />
      </svg>
    </div>
  </body>  
</html>
The Sign of Chaos 4: Now With Arrow Keys.

Comments

Comments
