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

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

No:4942

4367

←

Prev Next

→

関数のお花を咲かせよう🌸 JavaScriptによって線画された正葉関数を表示しています。正葉..ALL
Developer もちきなこ｜Date and time 23/6/29 1:19:55
Build time 33.636 sec｜Game capacity 3.144KB｜

Script

下記は、HTMLファイルに埋め込むJavaScriptコードの例です。

c1:
c2:
n:
k:
線の色:

このコードは、HTMLの `<canvas>` 要素を使用して正葉曲線を描画します。各パラメータはスライダーまたはセレクトボックスを介してユーザーが変更できます。パラメータが変更されると、`updateParams` 関数が呼び出されて新しいパラメータで正葉曲線が再描画されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

下記は、HTMLファイルに埋め込むJavaScriptコードの例です。

```HTML
<!DOCTYPE html>
<html>
<head>
  <title>正葉曲線</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>

// パラメータの設定
    var c1 = 2;  // cの値
    var c2 = 1;  // cの値
    var a = c1 / c2;  // aの値
    var n = 100;  // nの値
    var k = 1;  // kの値
    var lineColor = "red";  // 線の色

// 正葉曲線の描画関数
    function drawFlower() {
      var theta = 0;
      var scale = 100;

context.clearRect(0, 0, canvas.width, canvas.height);
      context.beginPath();
      context.moveTo(
        (a * Math.sin(n * theta) * Math.cos(k * theta) * scale) + (canvas.width / 2),
        (a * Math.sin(n * theta) * Math.sin(k * theta) * scale) + (canvas.height / 2)
      );

for (theta = 0; theta <= (Math.PI * 2); theta += 0.01) {
        context.lineTo(
          (a * Math.sin(n * theta) * Math.cos(k * theta) * scale) + (canvas.width / 2),
          (a * Math.sin(n * theta) * Math.sin(k * theta) * scale) + (canvas.height / 2)
        );
      }

context.strokeStyle = lineColor;
      context.stroke();
    }

// 正葉曲線の初回描画
    drawFlower();

// バーの入力に基づいてパラメータを更新して再描画する関数
    function updateParams() {
      c1 = parseInt(document.getElementById("c1Slider").value);
      c2 = parseInt(document.getElementById("c2Slider").value);
      a = c1 / c2;
      n = parseInt(document.getElementById("nSlider").value);
      k = parseInt(document.getElementById("kSlider").value);
      lineColor = document.getElementById("colorSelect").value;

drawFlower();
    }
  </script>

<div>
    <label for="c1Slider">c1:</label>
    <input type="range" id="c1Slider" min="0" max="10" step="1" value="2" oninput="updateParams()">
    <br>
    <label for="c2Slider">c2:</label>
    <input type="range" id="c2Slider" min="0" max="10" step="1" value="1" oninput="updateParams()">
    <br>
    <label for="nSlider">n:</label>
    <input type="range" id="nSlider" min="0" max="200" step="1" value="100" oninput="updateParams()">
    <br>
    <label for="kSlider">k:</label>
    <input type="range" id="kSlider" min="0" max="10" step="1" value="1" oninput="updateParams()">
    <br>
    <label for="colorSelect">線の色:</label>
    <select id="colorSelect" onchange="updateParams()">
      <option value="red">赤</option>
      <option value="blue">青</option>
      <option value="green">緑</option>
    </select>
  </div>
</body>
</html>
```