お花を咲かせる関数 JavaScriptによって線画された正葉関数を表示しています。正葉曲線は、以下の関数で定義されています。 r=sin(nθ/k) nとkは、1以上の整数です。プレイヤーは、nとkそれぞれに自由な数字を代入することが出来ます。代入した数字によって、正葉曲線が変化します。 nとkに代入する数字は、バーによって直感的に決定(代入)出来るものとします。また、曲線の線の色も選択が可能です。's game

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

No:4840

4128

←

Prev Next

→

お花を咲かせる関数 JavaScriptによって線画された正葉関数を表示しています。正葉曲線は、以..ALL
Developer もちきなこ｜Date and time 23/6/28 22:34:51
Build time 25.176 sec｜Game capacity 2.358KB｜

Script

以下が、要件に従って実装したHTMLファイルの例です。このプログラムでは、プレイヤーが自由にnとkの値を設定できます。また、曲線の線の色も選択できます。

Color:

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

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```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>
```