Simulation - 공 운동

Introduction

• 애니메이션

- 여러 장의 정지 그림을 일정 시간 간격으로 빠르게 표시

- 일정 시간마다 공의 ‘새로운 위치’를 계산

- 공이 벽에 ‘충돌’하는 시점을 시점을 확인:

⇒ 충돌이 일어나면 수직/수평 이동값을 조정하여 벽에서 튕기도록 함

• 예제 프로그램 3개

- 직선 운동

⇔ c.f., Chap.4: 곡선/포물선 운동

- #1: 2D 상자 안에서 공을 벽에 튀김

#2: 공을 그림(image)으로 표현하고, 상자벽에 그래디언트 효과 주기

#3: 폼 입력값에 대한 유효 검사 기능: 에러인 경우 빨간색으로 표시

e.g., ‘숫자’ 입력값, ‘최대~최소’ 범위값

- Advance program

e.g., http://billmill.org/static/canvastutorial/

사전 준비

- canvas 도형 그리기

- 입출력 form

HTML5, CSS, JavaScript의 기능

• 공

- #1: 원 그리기

#2: 공모양의 그림 사용 (pearl.jpg)

var img = new Image()	// Image 객체 생성

img.src = "pearl.jpg"

ctx.drawImage(img, ballx-ballrad, bally-ballrad, 2*ballrad, 2*ballrad)

// (ballx, bally) 공의 중심

// (ballx-ballrad, bally-ballrad) 상단 왼쪽 모서리 좌표

// 2*ballrad: image width, 2*ballrad: image height

ballrad

e.g., 0MyCodes\JM097.html

Textbook 인터넷 프로그래밍 입문: Chap05

• 상자

- 사각형 그리기

- 전체를 색칠한 사각형 그리기

⇒ 벽의 두께를 공의 반경(ballrad)와 같게 지정함

① 왼쪽 세로벽

ctx.fillRect(boxx, boxy, ballrad, boxheight);

② 오른쪽 세로벽

ctx.fillRect(boxx+boxwidth-ballrad, boxy, ballrad, boxheight);

③ 위쪽 가로벽

ctx.fillRect(boxx, boxy, boxwidth, ballrad);

④ 아래쪽 가로벽

ctx.fillRect(boxx, boxy+boxheight-ballrad, boxwidth, ballrad);

(boxx, boxy)

ballrad

boxwidth

boxheight

①

②

③

④

- 공을 그리는 코드 다음에 상자를 그리는 코드를 작성

⇒ 상자가 위로 와야만 공이 튀기는 효과가 그럴 듯하게 표현됨

- 사각형을 전부 지우고 공을 새로운 위치로 옮긴 후 전체를 다시 그릴 때

ctx.clearRect(boxx, boxy, boxwidth, boxheight);

• 그래디언트 효과

- 선형 그래디언트를 사용: 원형 그래디언트도 가능

var grad;

grad=ctx.createLinearGradient(boxx, boxy, boxx+boxwidth, boxy+boxheight);

// 그래디언트 효과는 사각형 전역에 적용됨

- 색상 배열을 사용하여 fillStyle 지정 (시작색 ~ 끝색, 6가지색상 지정)

var hue =[	[255, 0, 0],	// red,	0~1/6

[255, 255, 0],	// yellow,	1/6~2/6

[0, 255, 0],	// green,	2/6~3/6

[0, 255, 255],	// cyan,	3/6~4/6

[0, 0, 255],	// blue,	4/6~5/6

[255, 0, 255] ];	// magenta,	5/6~6/6

- 0~1사이의 모든 지점에 경계색을 할당함: 1/6씩 그래디언트 색상 지정

for (h=0; h<hue.length; h++){

color='rgb(' + hue[h][0] +', '+hue[h][1] +', '+hue[h][2]  ')';

grad.addColorStop(h*1/hue.length, color);

}

ctx.fillStyle=grad;

• 시간 이벤트 지정

- setInterval()

setInterval(moveball, 100);

setInterval("moveball();", 100);

e.g., 0MyCodes\JM102.html

- setTimeout(): 이벤트를 중단시킴