リサージュ曲線 JavaScriptによってリサージュ曲線を線画してください。リサージュ曲線は関数によって定義されており、xとyは可変的に動的に代入されます。よって、リアルタイムで徐々にリサージュ曲線が変化していきます。また、リサージュ曲線の色は様々な色にゆっくり変わります。初めの色は赤色です。's game

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

No:3153

3356

←

Prev Next

→

リサージュ曲線 JavaScriptによってリサージュ曲線を線画してください。リサージュ曲線は..ALL
Developer もちきなこ｜Date and time 23/6/24 0:12:42
Build time 25.321 sec｜Game capacity 2KB｜

Script

上記のコードは、HTMLファイル内にJavaScriptを含ませたリサージュ曲線の線画を実装しています。スマホでも遊びやすく、リサージュ曲線の色を徐々に変化させることで、見ている人を飽きさせずに楽しめるようにしました。リサージュ曲線は、関数によって定義されており、xとyは可変的に動的に代入されるため、リアルタイムで曲線が変化します。初期の色は赤色で、徐々に色相を変化させることで、美しいグラデーションを作り出しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>リサージュ曲線</title>
    <style>
      canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

// リサージュ曲線の関数
      function lissajousCurve(x, y, a, b, delta) {
        return {
          x: 200 * Math.sin(a * x + delta),
          y: 200 * Math.sin(b * y),
        };
      }

// 初期設定
      let x = 0;
      let y = 0;
      let a = 4;
      let b = 3;
      let delta = 0;
      let hue = 0;

// ループ処理
      function loop() {
        const point = lissajousCurve(x, y, a, b, delta);

ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
        ctx.moveTo(canvas.width / 2 + point.x, canvas.height / 2 + point.y);
        x += 0.01;
        y += 0.01;
        delta += 0.01;
        hue += 1;
        if (hue >= 360) {
          hue = 0;
        }

const nextPoint = lissajousCurve(x, y, a, b, delta);
        ctx.lineTo(canvas.width / 2 + nextPoint.x, canvas.height / 2 + nextPoint.y);
        ctx.stroke();

requestAnimationFrame(loop);
      }

// 実行
      loop();
    </script>
  </body>
</html>