ベジェ曲線 JavaScriptによって、3点の曲線を動的に線画します。線画の様子を眺めるだけのゲームです。線画については、以下の通りです。まず、ベクトル方程式は以下の式です。 P = (1−t)2P1 + 2(1−t)tP2 + t2P3 これを座標ごとに書き直し、x1, y1, x2, y2, x3, y3 の代わりに、3つの制御点の座標を入れた方程式が、以下の通りです x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –t2 + 2t このtに0から1の数字を代入し、結果を線がしてください。なお、tに代入する数字は、0→1と徐々に増えていくものとし、1に達した場合、今度は1→0に徐々に減少して行くものとします。0に達した場合、再び0→1に増加します。's game

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

No:4247

2108

←

Prev Next

→

ベジェ曲線 JavaScriptによって、3点の曲線を動的に線画します。線画の様子を眺めるだけのゲ..ALL
Developer もちきなこ｜Date and time 23/6/27 15:48:00
Build time 18.059 sec｜Game capacity 1.568KB｜

Script

下記はベジェ曲線のアニメーションを実装したHTMLファイルです。JavaScriptを使い、3つの制御点の座標を動的に変更して、ベジェ曲線の線画を生成します。スマホでも操作でき、絵文字を使っています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>ベジェ曲線アニメーション</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		canvas {
			display: block;
			margin: auto;
			background-color: #f1f1f1;
		}
	</style>
</head>
<body>

// 初期設定
		var points = [
			{x: 50, y: 250},
			{x: 150, y: 50},
			{x: 250, y: 250}
		];
		var t = 0;
		var dt = 0.005;

// 制御点の操作
		canvas.addEventListener('touchmove', function(e) {
			points[1].x = e.touches[0].clientX - canvas.offsetLeft;
			points[1].y = e.touches[0].clientY - canvas.offsetTop;
		});

// ベジェ曲線の描画
		function drawCurve() {
			ctx.fillStyle = '#000';
			ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.strokeStyle = '#fff';
			ctx.lineWidth = 4;

ctx.beginPath();
			ctx.moveTo(points[0].x, points[0].y);
			ctx.bezierCurveTo(points[1].x, points[1].y, points[2].x, points[2].y, points[0].x, points[0].y);
			ctx.stroke();

// アニメーション
			t += dt;
			if (t >= 1 || t <= 0) {
				dt = -dt;
			}

requestAnimationFrame(drawCurve);
		}

drawCurve();
	</script>

</body>
</html>