【事前学習】ベーシックは４章、エキスパートは５章を学んできてください。

アニメーション
Animation

専門用語

専門用語の意味は、英単語の意味から理解すると理解が深まります。

morphing	変化する	p.112
inverse kinematics	逆運動学（リンク機構）	p.
bounding box	境界	p.
path animation	通り道	p.
motion capture		p.119
match move	cgと実写の位置（動き）合わせ	p.129
flock	群衆	p.123
physics simulation		p.124
ease-in ease-out	動きの前後をゆっくりにする	p.111-112
剛体	弾性体でない、変形しない	p.
ばね質点モデル		p.125
warping	モーフィングを変形アニメーションに応用	p.113
		p.
		p.

（公式問題集の補足解説）
エキスパート練習問題１第６問 p.24

10フレームで $2\pi$ なので1フレームはその10分の1。
このようなことが起きるのはかなりレア。20フレームで2周して$(5,0,0)$に正八面体が戻ってくるところに同じく20フレームかけてトーラスが到達することに気付く。ちなみにトーラスの回転は無関係なことにも気付く。
正八面体の中心が$(5,0,0)$、トーラスの中心が$(-2.5,0,0)$、立方体の中心が$(0,0,0)$より、正八面体、トーラス、立方体がこの順に一直線に並んでいるウまたはエ。トーラスの面が鉛直に立っている、立方体は45°に傾いている、３立体の中心が一直線上にあるのはウ。
15フレームなのでトーラスの中心は$(2.5,0,0)$、正八面体の中心は$(-5,0,0)$、立方体の中心が$(0,0,0)$より、これも正八面体、トーラス、立方体がこの順に一直線に並んでいる。立方体が真ん中で、立方体から正八面体が遠いのは？

エキスパート練習問題２第６問 p.49

左肩、左肘$t=0$で$-60$、$t=1$で-30、$t=2$で$0$、$t=3$で$30$、$t=4$で$60$となるのは？ちなみに右肩、右肘は$15t$なのでイは誤答だとわかる。
この場合は左肩、左肘が(1)と同じなのでそれだけでエだとわかる。念のため他も合っているか確認すると確証が得られる。
上肢が0と60を交互に繰り返すのでアまたはイ、下肢からイまたはエ
右肩からアウエ、右肘からアウ、左肩からアウエ、左肘からア、下肢からは少なくともアエのタイプ。具体的なtの値を代入して絞っていくのがコツ。

エキスパート練習問題３第６問 p.76

$x$は$-1$から$1$まで$0.5$ずつ増え、$y$は$-1$と$1$を交互に変化する。$t=0$のとき$x=-1,y=1$だから、、、
正五角形の2頂点ずつ進む。$t=0$のとき$(1,0)$
$t=0$のとき$(-1,-1)$、$t=1$のとき$(0.5,-0.5)$
$t=0$のとき$(1.732/2,-0.5)$、$t=1$のとき$(-1.732/2,0.5)$

ベーシック練習問題１第８問 p.102

１周するのに２秒なので、0.5秒で4分の1周、1.5秒だと4分の3周進んでいる。
Rチャネル、Bチャネルは0→255、Gチャネルは255→0と変化するが、2秒後はちょうど真ん中なのですべて127になる。
3秒で24フレーム。画像では2周のうちの１周半、つまり全体の4分の3進んでいるので最初の位置から18フレーム進んでいる。最初は1フレームで、そこから18フレーム進むと？
1周進むには4フレームの4倍で16フレーム、2周では32フレーム進む。最初は1フレームで、そこから32フレーム進むと？

ベーシック練習問題２第８問 p.124

１秒間に12フレーム再生するため、毎秒60°回転する。１回転（360°）するのに6秒かかる。
10秒で1回転させるのに10(フレーム/秒)×10(秒)＝100フレーム必要になる。360°を100フレームで割れば、1フレームごとの角度がわかる。
12秒で360°回転するので1秒で30°、8秒では240°回転する。例えば真上にあるピンクはどこまで回転するか？
例えば真上にある赤は右横まで来ているので、図２は図１から90°回転している。１フレームで6°回転するため、90°回転するには90÷6＝15フレーム進んでいる。最初は1フレームで、そこから15フレーム進むと？

ベーシック練習問題３第８問 p.146

用語を問う問題なので、わからないときは教科書やウェブで調べましょう。誤答の語句の意味も一緒に調べると知識が格段に増えて効果的です。

平成15年度後期３級問題第23問

p5.js Web Editor で実行してみましょう。

function setup() {
	const canvas=createCanvas(400, 400, WEBGL);
	canvas.parent('canvas');
	frameRate(30);
}

let T=0;
p5.Vector.prototype.vertex=function(){vertex(this.x,this.y);}
p5.Vector.prototype.ellipse=function(){ellipse(this.x,this.y, 0.1, 0.1);}

function draw() {
	ortho(-1, 4, 1, -4);
	background(234);
	
	stroke(127);
	noFill();
	for(let i=0; i<4; i++){
		line(0, i, 3, i);
		line(i, 0, i, 3);
	}

	const a=new p5.Vector(1,1);

	const b=Array(4).fill(null).map(bi=>new p5.Vector());
	b[0].set(1,2);
	b[1].set(2,3);
	b[2].set(3,2);
	b[3].set(2,2);

	const i=Math.floor(T/4);//T÷4の商
	const t=(T-i*4)/4;
	const bt=p5.Vector.lerp(b[i], b[(i+1)%4], t);

	stroke(0);
	beginShape();
	a.vertex();
	bt.vertex();
	endShape();
	fill(0);
	a.ellipse();
	bt.ellipse();
	
	T=T>15.9?0:T+0.033; 	
}

例：点Bの $x$ 座標が時刻0秒から4秒までの間に、1から2まで変わる。
$T$ 秒後の点Bの $x$ 座標は $t = \frac{T}{4}$ として、1と2を $t ∶ 1 - t$ に内分した値

$b_{x} = (1 - t) \times 1 + t \times 2$

Lesson

問題の残りの部分のアニメーションも作成してみましょう。

B:(1,2)⇒(2,3)⇒(3,2)⇒(2,2)
C:(2,2)⇒(3,2)⇒(3,1)⇒(3,1)
D:(2,1)⇒(2,1)⇒(3,0)⇒(1,0)

Extra Lesson

three.js editor を使って、アニメーションを表示してみましょう。
H21後期２級第８問

トーラスの中心と正八面体の中心が一致する瞬間の結果
5フレーム目の結果
15fpsの時の1.5秒後の結果

ウィンドウ内でのマウスドラッグ、ホイールスクロールで視点を変更できます。

three.js editorの操作方法

視点移動

SCENEタブでSceneをダブルクリックすると原点中心になる
SCENEタブでオブジェクトをダブルクリックするとそのオブジェクトが中心に来て拡大される
左ボタンでマウスドラッグするとビューを画面の中心周りに回転できる
右ボタンでマウスドラッグするとビューを平行移動できる

オブジェクトの生成、変形

Edit/Addでオブジェクト、ライト、カメラを追加できる
SCENEタブで生成、変形したいオブジェクトを選べる
Edit/Cloneで選ばれているオブジェクトを複製できる
Edit/Deleteで選ばれているオブジェクトを消去できる
OBJECTタブで名前Name、中心の位置Position、回転Rotation、拡大縮小Scaleを変更できる
MATERIALタブで色などオブジェクトの材質を変更できる

データの保存

File/Publishで、ウェブコンテンツとしてzipファイルで出力できる
File/Export Sceneでシーン全体をJSON形式で保存、File/ImportでJSON形式のシーンを読み込みできる(SCRIPTは保存されないので注意！）

視点移動機能付の環境構築

Add/Directional Light で光源を追加（２個追加して２方向から照らすのもよい）

Scene に以下のコードをアタッチ

//ベクトルの成分 Lesson 3D 1. 3)
const A=new THREE.Vector3(1, -4, 7);
const B=new THREE.Vector3(7 , 2, 5);
vector(A, B, 0.05);
	
const C=new THREE.Vector3((A.x+B.x*2)/3, (A.y+B.y*2)/3, (A.z+B.z*2)/3);
sphere(C, 0.5, 0xff0000);

const distance=30; //原点からの距離

//以下は変更しないでください
scene.add( new THREE.AxesHelper(100) );//座標軸

function sphere(position, radius, color=0xffffff){
	const sphere = new THREE.Mesh(
		new THREE.SphereGeometry(radius,32,16),
		new THREE.MeshPhongMaterial({
			color:color,
			specular:0x444444,
			shininess:30,
			emissive:color&0x333333
		})
	);
	sphere.position.copy(position);
	scene.add(sphere);
}

function vector(start, end, radius, color=0xffffff){
	const v=(new THREE.Vector3).subVectors(end,start);
	const l=v.length();
	const material = new THREE.MeshPhongMaterial({
		color:color,
		specular:0x444444,
		shininess:30,
		emissive:color&0x333333
	});
	const rotation = new THREE.Euler(
		Math.atan2(v.z,Math.sqrt(v.x*v.x+v.y*v.y)),
		0,
		-Math.atan2(v.x,v.y),
		"ZXY"
	);

	const cone=new THREE.Mesh(
		new THREE.ConeGeometry(radius*2, radius*6, 32),
		material
	);
	cone.position.copy(new THREE.Vector3).addVectors(
		start,
		v.clone().multiplyScalar((l-0.15)/l)
	);
	cone.rotation.copy(rotation);
	scene.add(cone);

	const cylinder=new THREE.Mesh(
		new THREE.CylinderGeometry(radius,radius,l-0.3,32),
		material
	);
	cylinder.position.copy(new THREE.Vector3).addVectors(
		start,
		v.clone().multiplyScalar(0.5*(l-0.3)/l)
	);
	cylinder.rotation.copy(rotation);
	scene.add(cylinder);
}

function line(position1, position2, color=0xfffff){
	const line = [];
	line.push(position1);
	line.push(position2);
	scene.add(new THREE.Line(
		new THREE.BufferGeometry().setFromPoints(line),
		new THREE.LineBasicMaterial({color:color})
	));
}

function pointermove(event){
	const longitude=(event.offsetX/window.innerWidth-0.5)*6.28;
	const latitude=(event.offsetY/window.innerHeight-0.5)*3;
	camera.position.set(
		Math.cos(longitude)*Math.cos(latitude),
		Math.sin(latitude),
		Math.sin(longitude)*Math.cos(latitude)
	).multiplyScalar(distance);
	camera.lookAt( scene.position );
}

three.js editor のマニュアル

【事後学習課題】

平成22年度前期２級問題第６問
平成16年度前期２級問題第31問s
平成17年度前期２級問題第31問
平成23年度前期２級問題第６問

【事後学習】公式問題集のベーシックは各回の第８問、エキスパートは各回の第６問がアニメーションの問題です。これらの問題を全て解けるようになってください。

アニメーションAnimation