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

アニメーション
Animation

キーフレームアニメーション
（平成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まで変わる。
$\mathrm{T}$ 秒後の点Bの $x$ 座標は $t=\frac{\mathrm{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後期２級 第８問

1. トーラスの中心と正八面体の中心が一致する瞬間の結果
2. 5フレーム目の結果
3. 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は保存されないので注意！）

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

1. Add/Directional Light で光源を追加（２個追加して２方向から照らすのもよい）
2. 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年度前期２級問題 第６問

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

This site is powered by