Drawing a cycloid curve with circle animation's game

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

No:4239

3059

←

Prev Next

→

Drawing a cycloid curve with circle animation
Developer User1006｜Date and time 23/6/27 15:31:48
Build time 21.787 sec｜Game capacity 1.945KB｜

Script

私はあなたのリクエストによって、サイクロイド曲線を円のアニメーションで描くプログラムを作成しました。以下にプログラムのコードを示します。

このプログラムは、HTMLファイル内でJavaScriptを使用しています。円の描画にはHTML5 Canvasを使用し、requestAnimationFrameを使用して描画をアニメーション化しています。このプログラムを実行すると、ブラウザに円が描画され、円がアニメーションして描画されるため、サイクロイド曲線のアニメーションが表示されます。また、スマホでも操作可能です。以上が、サイクロイド曲線を円のアニメーションで描くプログラムのコードになります。何か不明な点があれば、遠慮なくお知らせください。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>サイクロイド曲線のアニメーション</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

const radius = 50;
        const k = 5;  // 円の半径に対するパラメータ k

let t = 0;
        const dt = 0.01;  // 時間の差分

function draw() {
            const x = (radius * (k - 1) * Math.cos(t) + radius * Math.cos((k - 1) * t)) + canvas.width/2;  // x座標
            const y = (radius * (k - 1) * Math.sin(t) - radius * Math.sin((k - 1) * t)) + canvas.height/2;  // y座標

ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI*2);
            ctx.stroke();

t += dt;

requestAnimationFrame(draw);  // アニメーションの更新
        }

draw();  // アニメーションの開始
    </script>
</body>
</html>

このプログラムは、HTMLファイル内でJavaScriptを使用しています。円の描画にはHTML5 Canvasを使用し、requestAnimationFrameを使用して描画をアニメーション化しています。

このプログラムを実行すると、ブラウザに円が描画され、円がアニメーションして描画されるため、サイクロイド曲線のアニメーションが表示されます。また、スマホでも操作可能です。

以上が、サイクロイド曲線を円のアニメーションで描くプログラムのコードになります。何か不明な点があれば、遠慮なくお知らせください。