虹色関数アニメーション JavaScriptによって線画されたリサージュ曲線を表示してください。リサージュ曲線は、以下の関数で定義されています。tは媒介変数です。 let f = (a, b, t) => { let obj = {}; obj.x = Math.sin(a * t); obj.y = Math.sin(b * t); return obj; x、yには数字が動的に代入されます。よって、リアルタイムで徐々にリサージュ曲線が変化していきます。リサージュ曲線は、ゆっくりと線画されます。また、リサージュ曲線の色は様々な色に動的に変更されます。初めの色は赤色です。's game

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

No:4822

5472

←

Prev Next

→

虹色関数アニメーション JavaScriptによって線画されたリサージュ曲線を表示してください。 ..ALL
Developer もちきなこ｜Date and time 23/6/28 22:08:34
Build time 19.078 sec｜Game capacity 1.454KB｜

Script

以下は、要件に基づいたHTMLファイルの例です。JavaScriptのコードが含まれ、リサージュ曲線が描画されています。

このHTMLファイルをブラウザで開くと、リサージュ曲線が描画され、徐々に変化していきます。リサージュ曲線の色も時間とともに変化します。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

以下は、要件に基づいたHTMLファイルの例です。JavaScriptのコードが含まれ、リサージュ曲線が描画されています。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    #canvas {
      width: 100%;
      height: 100%;
      background-color: black;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

const a = 1;
    const b = 2;
    let t = 0;
    let hue = 0;

function draw() {
      let obj = calculatePosition(a, b, t);
      let x = map(obj.x, -1, 1, 0, canvas.width);
      let y = map(obj.y, -1, 1, 0, canvas.height);

ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x + 1, y + 1);
      ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
      ctx.stroke();

t += 0.01;
      hue += 1;

requestAnimationFrame(draw);
    }

function calculatePosition(a, b, t) {
      let obj = {};
      obj.x = Math.sin(a * t);
      obj.y = Math.sin(b * t);
      return obj;
    }

function map(value, min1, max1, min2, max2) {
      return ((value - min1) / (max1 - min1)) * (max2 - min2) + min2;
    }

draw();
  </script>
</body>
</html>
```

このHTMLファイルをブラウザで開くと、リサージュ曲線が描画され、徐々に変化していきます。リサージュ曲線の色も時間とともに変化します。