リサージュ曲線 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:3154

7127

←

Prev Next

→

リサージュ曲線 JavaScriptによって線画されたリサージュ曲線を表示してください。な..ALL
Developer もちきなこ｜Date and time 23/6/24 0:17:32
Build time 18.897 sec｜Game capacity 1.698KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>リサージュ曲線</title>
    <style>
        canvas {
            border: 1px solid #666;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

let a = 5, b = 4, t = 0, dt = 0.03;
        let x, y;
        let color = '#FF0000';

function draw() {
            t += dt;

let f1 = f(a, b, t);
            let f2 = f(a, b, -t);

x = canvas.width / 2 + f1.x * 50;
            y = canvas.height / 2 + f2.y * 50;

ctx.strokeStyle = color;
            ctx.beginPath();
            ctx.moveTo(x, y);

for(let i = 0; i < 400; i++) {
                let f1 = f(a, b, t);
                let f2 = f(a, b, -t);

x = canvas.width / 2 + f1.x * 50;
                y = canvas.height / 2 + f2.y * 50;

ctx.lineTo(x, y);

t += dt;
                color = getRandomColor();
                ctx.strokeStyle = color;
            }

ctx.stroke();

requestAnimationFrame(draw);
        }

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;
        }

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