リサージュ曲線アニメ 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:4820

7808

←

Prev Next

→

リサージュ曲線アニメ JavaScriptによって線画されたリサージュ曲線を表示してください。 ..ALL
Developer もちきなこ｜Date and time 23/6/28 22:06:26
Build time 21.992 sec｜Game capacity 1.988KB｜

Script

以下はリサージュ曲線を表示するHTMLファイルの例です。

このHTMLファイルをブラウザで開くと、リサージュ曲線がリアルタイムで描画されます。数値aとbは変化させることができるので、リサージュ曲線の形やパターンを変えることができます。また、色もランダムに変化します。初めは赤色ですが、リサージュ曲線が描画されるたびに色が変わります。

←

Prev　Next

→ 　

Back　

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

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

以下はリサージュ曲線を表示するHTMLファイルの例です。

```html
<!DOCTYPE html>
<html>
<head>
    <title>リサージュ曲線アニメ</title>
    <style>
        body {
            overflow: hidden;
        }
        canvas {
            background: black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        let t = 0;
        let a = 1.5; // 変化させたい値
        let b = 2.5; // 変化させたい値
        let color = 'red'; // 初期色

setInterval(draw, 10);

function draw() {
            let point = f(a, b, t);
            ctx.beginPath();
            ctx.arc(point.x * 100 + canvas.width / 2, point.y * 100 + canvas.height / 2, 1, 0, Math.PI * 2, false);
            ctx.fillStyle = color;
            ctx.fill();
            ctx.closePath();

t += 0.01; // ゆっくり描画するためにtの増加量を調整

// 色をランダムに変更
            color = getRandomColor();
        }

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

function getRandomColor() {
            let letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    </script>
</body>
</html>
```