AI makes this whole game for me's game

Click here for free DL of the app version that can save data.

No:52417

173

←

Prev Next

→

AI makes this whole game for me
Developer Winnerweiner2113｜Date and time 24/3/22 7:08:09
Build time 1.518 sec｜Game capacity 2.236KB｜

Script

Flower illusion

Color:

これは、「正葉関数」を描画するプログラムです。プレイヤーがnとkの値を調整すると、描画される曲線が変化します。また、プレイヤーは色も選択することができます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

Click here for free DL of the app version that can save data.

Flower illusion

```html
<!DOCTYPE html>
<html>
<head>
<style>
#canvas {
  width: 100%;
  height: 500px;
}
</style>
</head>
<body>
  <div>
    <label for="n">n: </label>
    <input type="range" id="n" min="1" max="10" value="1" step="1">
  </div>
  
  <div>
    <label for="k">k: </label>
    <input type="range" id="k" min="1" max="10" value="1" step="1">
  </div>
  
  <div>
    <label for="color">Color: </label>
    <input type="color" id="color" value="#000000">
  </div>
  
  <canvas id="canvas"></canvas>
  
  <script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    
    function drawLeafCurve(n, k, color) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.strokeStyle = color;
      
      for (let theta = 0; theta <= 2 * Math.PI; theta += 0.01) {
        const r = Math.sin(n * theta / k);
        const x = canvas.width / 2 + r * Math.cos(theta) * 100;
        const y = canvas.height / 2 + r * Math.sin(theta) * 100;
        
        if (theta === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }
      }
      
      ctx.closePath();
      ctx.stroke();
    }
    
    const nInput = document.getElementById("n");
    const kInput = document.getElementById("k");
    const colorInput = document.getElementById("color");
    
    nInput.addEventListener("input", () => {
      drawLeafCurve(parseInt(nInput.value), parseInt(kInput.value), colorInput.value);
    });
    
    kInput.addEventListener("input", () => {
      drawLeafCurve(parseInt(nInput.value), parseInt(kInput.value), colorInput.value);
    });
    
    colorInput.addEventListener("input", () => {
      drawLeafCurve(parseInt(nInput.value), parseInt(kInput.value), colorInput.value);
    });
    
    drawLeafCurve(parseInt(nInput.value), parseInt(kInput.value), colorInput.value);
  </script>
</body>
</html>
```