【事前学習】座標変換の単元を復習してきてください。

画像の変形
Transforming Image

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

let Input;

function preload(){
	Input=loadImage('//www.om-lab.org/lecture/pro2/toyota.jpg');
}
function setup(){
	const canvas=createCanvas(400, 320,WEBGL);
	frameRate(30);
}

let position=0;
let angle=0;

function draw(){
	ortho(-500, 500, 400, -400);
	background(255);

	for(let i=-500; i<=500; i+=100){
		i==0?stroke(255,0,0):stroke(255,192,192);
		noFill();
		line(i,-500, i,500); // x-axis
		line(-500,i, 500,i); // y-axis
	}
	//x軸方向に150平行移動した後、画像を中心に反時計回りに45°回転
	translate(position,0);
    angleMode(DEGREES);
	rotate(angle);

	imageMode(CENTER);
	tint(255, 220);
	scale(1,-1);
	image(Input,0,0);
	
	if(angle>45) position=0;
	else if(position<150) position+=5;
	//position=angle<-45?0: (position<150?position+5:position);と略記可

	if(angle>45) angle=0;
	else if(position>=150) angle+=1.5;
	//angle=angle>45?0: (position>=150?angle+1.5:angle);と略記可
}

元画像

※ 右クリックでダウンロードし、p5.js Web Editor の Sketch Files/Upload file でアップロードする。

Lesson

• 以下の座標変換を実現してみましょう。
  1. $y$ 軸方向に200平行移動後、$y$ 軸対称
  2. 原点中心に0.5倍拡大後、$x$ 軸方向に350、$y$ 軸方向に−100平行移動後、画像を中心に反時計回りに45°回転
     ※ 平行移動を先に適用するとよい。
  3. 画像を中心に反時計回りに45°回転後、$x$ 軸対称
     ※ 軸対象を先に適用する必要がある。

※ アニメーションはおまけ機能ですので実現されなくても結構です。
※　translate()などの座標変換は描画する座標系に対して変換が適用されるので工夫が必要です。

【事後学習課題】

• 平成16年度後期２級問題 第９問
1. $x$ 軸方向に−200、$y$ 軸方向に100平行移動
2. 原点を中心に時計回りに30°回転
3. 原点を中心に時計回りに30°回転後、$x$ 軸方向に0.25倍、$y$ 軸方向に0.75倍拡大
4. $x$ 軸方向に0.75倍、$y$ 軸方向に0.25倍拡大後、原点を中心に反時計回りに60°回転後、$x$ 軸方向に200、$y$ 軸方向に200平行移動
• 平成16年度後期３級問題 第７問
• 平成17年度前期３級問題 第10問

【事後学習】画像の変形の問題をプログラムで実装できるようになってください。

This site is powered by