サイト制作に関するメモ書き

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

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

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

noStroke() ストロークの描画を無効にする。
background(color) canvasの背景色を指定。
push() 描画スタイルや座標の設定を一時的に保存する。
pop()で元に戻る。
pop() push()で設定した描画スタイルや座標の設定を元に戻す。
translate(x, y) canvasの座標を移動。
width canvasの幅を返す。
height canvasの高さを返す。
sin(angle) 角度の正弦を計算して返す。
cos(angle) 角度の余弦を計算して返す。
radians(degrees) degreesをラジアン単位に変換して返す。

 

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

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

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

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP