D. 작도 애니메이션1

컴퍼스와 눈금없는 자를 활용하여 정사각형을 작도하는 애니메이션 예제입니다.
실행 결과
코드 보기
<html>
  <head>
    <style>
      html, body {
        margin: 0;
        background-color: white;
        font-family: sans-serif;
      }
      #playButton {
        position: absolute;
        top: 10px;
        left: 10px;
      }
    </style>
    <script>
      let globalMathKit;
      let isDrawing = false;

      async function startDrawing() {
        if (isDrawing) return;
        isDrawing = true;

        const compass = globalMathKit.createCompass({ radius: 161, isLegResizeLock: true });

        const compassPositions = [
          [180, 200],
          [341, 200],
        ];

        for (let i = 0; i < compassPositions.length; i++) {
          compass.position = compassPositions[i];
          await compass.draw(0, 360, 1000);
        }

        globalMathKit.deleteKit(compass.id);

        const ruler = globalMathKit.createConstructionRuler({ lineColor: 'red', isLock: true });

        const rulerPositions = [
          [180, 200],
          [-27, -93.5],
          [134, -93.5],
          [180, 39.5],
        ];
        const rulerRotates = [0, 270, 270, 0];

        for (let i = 0; i < rulerPositions.length; i++) {
          ruler.position = rulerPositions[i];
          ruler.rotation = rulerRotates[i];
          const length = 161;

          await ruler.draw(0, length, 500);
        }

        globalMathKit.deleteKit(ruler.id);
        isDrawing = false;
      }

      async function onLoadHelper() {
        await mathcore.helper.load("globalMathKit", {
          key: "TESTKEY"
        });
        globalMathKit = new mathcore.globalMathKit.GlobalMathKit();
        startDrawing();
  
        const button = document.createElement('button');
        button.id = 'playButton';
        button.textContent = '다시 실행';
        button.onclick = () => {
          if (isDrawing) return; 
          startDrawing();
          globalMathKit.clearCanvas();
        };
        document.body.appendChild(button);
      }
    </script>
    <script
      src="https://www.mathcore.co.kr/api/libs/latest/helper.js"
      defer
      onload="onLoadHelper();"
    ></script>
  </head>
  <body></body>
</html>