CHAP 5. 수학과 물리학을 적용한 애니메이션 -- 미완성

♣ 목표
- 어떻게 하면 사용자의 기대대로 움직이게 할까?
- 수학 알고리즘과 물리학적인 상호작용을 알아야 한다.
javascript:; - 점과 벡터를 바탕으로 일직선상의 움직임, 벽을 맞고 튀는 객체와 추가로 마찰력을 적용한 객체를 만들어보자.
- 직선운동 외에 원, 나선, 베지어 곡선의 움직임도 알아보자.
- 중력이 움직임에 미치는 영향도 보자.
- 가속도에 대해 알아보자.

5.1 일직선상으로 움직이기

5.1.1 두 점 사이의 거리
- 피타고라스의 정의(A2 + B2 = C2) 이용
- [공식5-1] 두 점간 거리 공식

▼ [예제 5-2] 직선 이동(full source)

<!doctype html>
<html lang="ko">
<head><meta charset="UTF-8">
<title>CH5EX2: Moving On A Simple Line</title>
<script src="http://www.modernizr.com/downloads/modernizr-latest.js">
</script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {	canvasApp();}

function canvasSupport () {
  	return Modernizr.canvas;
}

function canvasApp() {
	if (!canvasSupport()) {	return;  }

 	function  drawScreen () {
		// Background
		context.fillStyle = '#EEEEEE';
		context.fillRect(0, 0, theCanvas.width, theCanvas.height);
		context.strokeStyle = '#000000';
 		context.strokeRect(1,  1, theCanvas.width-2, theCanvas.height-2);	

		// Create ball
		if (moves > 0 ) {
			moves--;
			ball.x += xunits;
			ball.y += yunits;
		}

		// 이동한 점들 표시
		points.push({x:ball.x,y:ball.y});
		for (var i= 0; i< points.length; i++) {
			context.fillStyle = "black";
			context.beginPath();
			context.arc(points[i].x ,points[i].y, .5,0,Math.PI*2,true);
			context.closePath();
			context.fill();
		}

		// 공 그리기
		context.fillStyle = "#000000";
		context.beginPath();
		context.arc(ball.x, ball.y, 15, 0, Math.PI*2, true);
		context.closePath();
		context.fill();
	}

	var speed = 5; // 프레임당 이동량
	var p1 = {x:20,y:250};
	var p2 = {x:480,y:250};
	var dx = p2.x - p1.x;
	var dy = p2.y - p1.y;
	var distance = Math.sqrt(dx*dx + dy*dy);
	var moves = distance/speed;
	var xunits = (p2.x - p1.x)/moves; // 프레임당 x축 이동 픽셀 수
	var yunits = (p2.y - p1.y)/moves; // 프레임당 y축 이동 픽셀 수
	var ball = {x:p1.x, y:p1.y};
	var points = new Array();

	theCanvas = document.getElementById('canvasOne');
	context = theCanvas.getContext('2d');
	setInterval(drawScreen, 33);
}</script>
</head><body>



</body>
</html>

5.1.2 벡터에 따른 움직임
- 시작점, 끝점 대신 시작점, 벡터(= 속도,방향(angle))을 알 경우
▼ 삼각함수: http://ko.wikipedia.org/wiki/삼각함수

[그림 5-2] 캔버스 상의 각도

var angle = 45;
var radians = angle * Math.PI/180;
var xunits = Math.cos(radians) * speed;
var yunits = Math.sin(radians) * speed;

5.2 튀는 공 구현하기
▼ 반사각의 법칙: 법선을 중심으로 입사각과 반사각은 같다. (법선=닿는 면에 직각인 선)

[그림 5-4] 입시각과 반사각

function drawScreen() {
	...	
	if (ball.x > theCanvas.width || ball.x < 0) {
		angle = 180 - angle;
		updateBall();
	} else if (ball.y > 0 theCanvas.height || ball.y < 0) {
		angle = 360 - angle;
		updateBall();
	}

	function updateBall() {
		radians = angle * Math.PI/ 180;
		xunits = Math.cos(radians) * speed;
		yunits = Math.sin(radians) * speed;
	}
	...
}

5.2.2 벽에 맞고 튀는 여러 개의 공
▼ 각 공마다 x, y, radius, speed, angle, xunits, yunits 값이 필요
▼ 전역변수 추가

var numBalls = 100; // 공 개수


var maxSize = 8;  // 공의 최소 반지름
 var minSize  = 5;  // 공의 최소 반지름
var maxSpeed = maxSize + 5; // 최대속도
var balls = new Array();  // 공들의 정보를 담을 저장소

var tempBall;
var tempX, tempY;
var tempSpeed;
var tempAngle;
var tempRadius;
var tempRadians;
var tempXunits, tempYunits;

- 각 공의 초기 위치가 사각형프레임 안쪽에 들도록 유의한다.(tempRadius*2)
- 각 공의 속도는 크기에 반비례하도록 한다.(tempSpeed = maxSpeed - tempRadius)

▼ 공 생성

for (var i = 0 ; i < numBalls ; i++) {
	tempRadius = Math.floor(Math.random()*maxSize)+minSize;
	tempX = tempRadius*2 + (Math.floor(Math.random()*theCanvas.width)-tempRadius*2;
	tempY = tempRadius*2 + (Math.floor(Math.random()*theCanvas.height)-tempRadius*2;
	tempSpeed = maxSpeed-tempRadius;


	tempAngle = Math.floor(Math.random()*360);
	tempRadians = tempAngle * Math.PI/180;
	tempXunits = Math.cos(tempRadians) * tempSpeed;
	tempYunits = Math.sin(tempRadians) * tempSpeed;
	tempBall = {x:tempX, y:tempY, radius:tempRadius, speed:tempSpeed,
 		    angle:tempAngle, xunits:tempXunits, yunits:tempYunits};
	balls.push(tempBall);}

5.2.3 동적으로 크기가 변하는 캔버스 위의 튀는 공들
- 사용자 입력으로 캔버스 크기를 받아 동적으로 캔버스 크기가 변하도록 해보자.
▼ [예제 5-6] 동적으로 크기가 변환되는 캔버스에서 움직이는 공들 - ♠짜보자.

5.2.4 튀는 공과 충돌(Collision) 효과
▼ 물리학에서 공들 간의 상호작용
- 탄성 충돌: 부딪친 후에도 운동 에너지의 합은 변하지 않는다(뉴턴의 제3법칙^c) 운동량 보존의 법칙)
- 두 공의 충돌 - 각도, 질량(mass),
운동량 보존 법칙, 각도, 질량(mass; 관성의 크기)를 기반으로 각 공의 xy축의 속도/방향을 구할 수 있다

[그림 5-8] 다른 각도로 충돌하는 두 공과 충돌선

▼ 두 원 사이의 충돌 검사
: if 두 원의 반지름의 합 >= 두 원의 중심점간의 거리 then 충돌(A²+B² = C²)

function hitTestCircle(ball1,ball2) {
	var retval = false;
	var dx = ball1.nextx - ball2.nextx;
	var dy = ball1.nexty - ball2.nexty;
	var distance = (dx * dx + dy * dy);	
	if (distance <= (ball1.radius + ball2.radius) * (ball1.radius + ball2.radius) ) {
		  retval = true;
	}
	return retval;
}

▼ 기능별 코드 분리
- 반복되는 패턴: 값 갱신 → 충돌체크[] → 공 그리기
- update(): 값 갱신
- testWalls()/collide() : 공-벽 충돌체크/공-공 충돌체크
- render() : 현 상태 그리기
▼ 충돌 [상세히]^d)
- 다음 이동할 위치값 이용: 부딪치기 전에 인지
- 충돌체크를 함에도 불구하고 공이 엉키는 경우: 부딪친 다음 튕겨서 떨어져 나가는 힘이 충분하지 않기 때문
♠ [예제 5-7] 간단한 상호작용을 적용한 공들

5.2.5 튀는 공에 마찰력(Velocity) 적용
- 느려지다가 멈추는 공 ( 크기,질량,속도가 다른 공 )
♠ [예제 5-8] 마찰력이 적용된 공들

5.3 곡선과 회전 이동
- 객체를 원 모양, 나선 모양, 곡선 모양으로 움직이도록 하는 방법

▼ 등속 원운동

x = radius * cosine(angle);
y = radius * sine(angle);

▼ 간단한 나선 모양 움직임
- 나선모양의 구현: 피보나치 수열 - 0부터 시작하며 앞의 두 숫자를 더한 값이 다음 숫자가 되는 수열(1, 2, 3, 5, 8, 13, ..)
- 간단한 나선 모양의 회전: 원의 반지름 증가

▼ 3차 베지어 곡선
1) 4개의 제어점: p0, p1, p2, p3

p0 : 곡선의 시작점.
p3 : 곡선의 끝점
p1,p2 : 제어점. 곡선이 이 점을

6개의 개수

♣ 참고
a) 각도와 라디안 관계 ▶ http://math.rice.edu/~pcmi/sphere/drg_txt.html (english)
b) 삼각함수 ▶ http://ko.wikipedia.org/wiki/삼각함수

c) 뉴턴의 3가지 운동 법칙 ▶ [설명]

제1법칙 - 관성의 법칙
속력이나 방향을 바꾸는 힘을 받지 않는 한, 물체는 등속으로 직선 운동을 계속하거나 가만히 있는다.
제2법칙 - 가속도의 법칙
힘이 가해졌을 때 물체가 얻는 가속도는 가해지는 힘에 비례 하고 물체의 질량에 반비례 한다.
제3법칙 - 작용/반작용의 법칙
모든 힘의 작용에 대한 크기가 같고 방향이 반대인 반작용이 따른다.

d) 두 공의 충돌 참고 자료

제펩립 삼페오, 「플래시 라이트-임베디드 시스템과 편재형 컴퓨팅 랩」의 소스 코드
NOKIA, Calculating ball collision physics in Flash Lite
조브 마칼/벤 위니아칙, 「 Macromedia Flash MX 2004 Game Design Demystified 」, Macromedia Press조브 마칼/벤 위니아칙, 「 Macromedia Flash MX 2004 Game Design Demystified 」, Macromedia Press
케이트 피터스, 「 액션스크립트 애니메이션」

♣ 예제소스 [

ch5.zip ]

저작자표시 비영리

'HTML5 Canvas' 카테고리의 다른 글

CHAR 7. HTML5 캔버스와 오디오 (0)	2012.03.18
CHAR 6. HTML5 캔버스와 비디오 (0)	2012.03.13
CHAR 4. 캔버스에서의 이미지 (0)	2012.03.01
CHAR 3. HTML5 캔버스 문자 API (6)	2012.02.29
HTML5 Canvas 관련 사이트 (0)	2012.02.27

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

D:evelopment MOBI:le + Web ~♥