p5.jsで円周上に沿ってアニメーションする

p5.jsを使って、円周上に沿ってアニメーションする処理を実装してみます。

サンプルコード

JavaScript

var angle = 0; // 角度
var r = 100; // 円周の半径
function setup() { // 最初に実行される関数
	createCanvas(640, 480); // canvasの作成
	noStroke();
}

function draw() { // 毎フレーム実行される関数
	background(255); // canvasの塗りつぶし
	push(); // 座標をcanvasの中心にするため一時的に保存
	translate(width / 2, height / 2);
	fill(127);
	ellipse(0, 0, r * 2, r * 2); // 円周の描画
	x = sin(radians(angle)) * r; // 円周上のX座標の位置
	y = cos(radians(angle)) * r; // 円周上のY座標の位置
	fill(0);
	ellipse(x, y, 20, 20); // アニメーションする円の描画
	pop();
	angle += 1;
}

円周上をアニメーションするデモページ

上記サンプルの応用で、アニメーションする円のスタイルや位置を変更して増やすことで、ローディングのようにすることもできます。

JavaScript

var angle = 0; // 角度
var r = 15; // 円周の半径
function setup() { // 最初に実行される関数
	createCanvas(100, 100); // canvasの作成
	noStroke();
}

function draw() { // 毎フレーム実行される関数
	background(255); // canvasの塗りつぶし
	push(); // 座標をcanvasの中心にするため一時的に保存
	translate(width / 2, height / 2);
	for (var i = 0; i < 8; i++) {
		x = sin(radians(angle - (i * 45))) * r; // 円周上のX座標の位置
		y = cos(radians(angle - (i * 45))) * r; // 円周上のY座標の位置
		fill(35 * i);
		ellipse(x, y, 10 - i, 10 - i); // アニメーションする円の描画
	}
	pop();
	angle += 7;
}

ローディングアニメーションのデモページ
　

【参考サイト】

• p5.js | reference