幾何学計算アニメーションを作ってみよう

第1回 PHPで作る!簡単幾何学アニメ─不思議なプロペラ動画の作り方

この記事を読むのに必要な時間:およそ 4 分

先日,「iPhoneでプロペラの回転を撮影したらとんでもないことになってた」という記事を見かけました。⁠ほしのこえ」に出てくる生命体(タルシアンでしたか)のような不気味なフォルムでしたが,動画を見るとなるほどと納得しますね。

ところで,この説明の動画ですが,どうやって作ったらいいのでしょうか。ただの回転なら動画編集ソフトのエフェクトで十分ですが,今回のものは「回転+ちょっとずつ動かしながら切り出し」です。手ごろなツールが見当たりません。

となるとプログラムの出番ですね。さっそくですが,この特集では,このような説明のための動画を作るテクニックをいくつかご紹介していきます。よろしくお付き合いください。

PHPで作る画像表示プログラムの初歩

プログラムで処理した画像を表示するだけなら,Webブラウザを使うと簡単です。今回も使うPHPには,gdライブラリという拡張機能があり,画像の生成や加工が行えます。これはたいていのレンタルサーバでも利用できます。しかし,動画までは対応していません。

そこで,せっかくのWebブラウザなので,クリックするたびに1コマずつ進むようにしてみました。これなら,静止画を出力するだけなので簡単です。まず,長方形が回転するサンプルです。これは,プロペラの1枚にあたります。

画像 画像 画像

リスト1 クリックで長方形が回転するサンプル(rotate_1.php)

<?php

$frame = @$_GET["frame"] + 0;
if (($frame < 0)||($frame > 100))
	$frame = 0;
switch (@$_GET["mode"]) {
	case	"image":
		break;
	default:
		$nextframe = $frame + 1;
		print <<<EOO
<HTML><HEAD><TITLE>rotate.php</TITLE></HEAD><BODY>
<H1>rotate.php</H1>

<A href="?frame={$nextframe}"><IMG src="?frame={$frame}&mode=image"></A>

<HR>
</BODY></HTML>
EOO;
		die();
}

$width = 400;
$height = 400;
$g = imagecreate($width, $height);
$c0 = imagecolorresolve($g, 255, 255, 255);
$c1 = imagecolorresolve($g, 0, 0, 0);
imagefilledrectangle($g, 0, 0, $width, $height, $c0);

function	drawblade($g, $color, $a)
{
	global	$width, $height;
	
	$cx = $width / 2;
	$cy = $height / 2;
	$list = array(
		array(-20, -180), 
		array(20, -180), 
		array(20, 0), 
		array(-20, 0)
	);
	$points = array();
	$sin = sin($a * 3.14159 / 180);
	$cos = cos($a * 3.14159 / 180);
	foreach ($list as $p) {
		list($x, $y) = $p;
		$points[] = round($cx + $x * $cos - $y * $sin);
		$points[] = round($cy + $x * $sin + $y * $cos);
	}
	imagefilledpolygon($g, $points, count($points) / 2, $color);
}


drawblade($g, $c1, $frame * 10);
header("Content-Type: image/png");
imagepng($g);
imagedestroy($g);
?>

クリックを受け付けるのはHTML部分になりますので,ここからIMGタグで画像を読み込んでいます。リクエストが分割されるので面倒な面もありますが,特別複雑なところはありません(座標の計算方法は次回で取り上げますので,ここではブラックボックスだと思ってください)⁠その上,wgetなどでまとめて画像を得ることもできるため,応用範囲が広くなりました。

画像を扱うプログラムでやっかいなのは,ユーザインターフェースです。その場でパラメータを入力するとすぐさま画像に反映されるようなプログラムは,作るのにとても手間がかかります。今回はWebベースにすることができましたので,この辺はうまく解決することができました。

著者プロフィール

木元峰之(きもとみねゆき)

独立系ソフトハウスに8年間勤務,パッケージソフトの開発や記事執筆などを行う。現在はフリーのコンサルタント。SWESTなどのワークショップで分科会のコーディネータを務める。デジタル回路設計歴30年,プログラミング歴27年。

きもと特急電子設計
URL:http://business.pa-i.org/

コメント

コメントの記入