주제 : 플래시로 구현해보는 가속도 운동과 자유낙하 운동
☐ 주제설정의 취지 및 목적
플래시를 이용해서 가속도 운동과 자유낙하 운동을 표현해 보고자 한다. 우리가 알고 있는 등가속도 운동을 컴퓨터로 표현한다는 것은 생각처럼 쉬운일만은 아닐 것이다. 이 장에서 등가속도 운동을 컴퓨터로 시물레이션 해 봄으로써 컴퓨터로 움직임을 어떻게 표현하고 제어할 수 있는지를 알아 보고자 한다. 그리고 우리가 생각하는 공식을 컴퓨터가 이해하게 만들기 위해서 시간과 거리 표현을 어떤 방법으로 해야 할 것인지도 살펴보고자 한다. 조금 더 깊이 들어가 점화식을 만들어 보고 적용해 봄으로써 컴퓨터로 표현할 수 있는 운동의 개념을 이해하고 응용할 수 있게 될 것이다. 좀 더 자연스러운 움직임을 위해 어떤 것들을 고려해야 하며, 어떤 방법을 취해야 할지 고민해 보고 익혀보자.
☐앞으로 공부할 내용
1. 가속도에 따른 물체의 움직임을 표현할 수 있다.
가. 가속도 공식 유도
나. 컴퓨터를 이용한 속도 운동 시뮬레이션
다. 컴퓨터를 이용한 가속도 운동 시뮬레이션
(점화식과, onEnterFrame 이용)
2. 자유낙하 운동을 컴퓨터로 구현할 수 있다.
가. 자유낙하 운동 공식 이해
나. 자유낙하 운동 표현방법 구상
다. 자유낙하 운동 시뮬레이션
3. 관성효과를 이용한 공의 운동을 표현할 수 있다.
가. 키보드를 이용한 운동효과 구현
나. 마찰력에 따른 운동 감쇠 효과 구현
다. 중력장 안에서 움직이는 우주선의 효과 구현
4. 응용
가. 중력장 안에서 마우스로 공 집어던지기
나. 우주선 착륙 게임 만들기
다. 복잡한 산과의 충돌 구현
학습 활동
가속도에 따른 물체의 움직임 표현
가. 가속도의 운동의 공식 유도
속력이란 단위시간당 이동거리를 말한다. 우리가 화면상에서 물체를 움직이는 것도 엄밀히 말하면 속력을 이용하고 있는 것이다. 가속도 운동이란 시간에 따라 속력이 변하는 운동을 말한다. 시간에 따라 일정하게 속력이 변하는 운동을 등가속도 운동이라고 한다. 속력이 점점 빨라질수도 있고, 느려질수도 있다.
그렇다면 컴퓨터상에서 물체의 속력을 어떻게 표현할 것인가. 우리는 속도를 이용해서 물체의 움직임을 표현해 보고자 한다.
| 속도 = 이동거리/시간=(나중위치-처음위치)/시간 (v = s/t) 이동거리 = 속도 * 시간 (s = v*t) |
플래시의 경우에는 프레임을 기반으로 만들어 졌기 때문에 시간은 불연속적이다. 가장작은 시간은 1프레임동안의 시간이 된다. 따라서 플래시 상에서의 속력은 1프레임당 몇픽셀을 이동했는지가 속도의 정의가 될 것이다. 우리가 살고있는 세상의 경우 매순간마다 시간이 흐르듯이, 플래시의 경우에도 정해진 시간마다 프레임이 하나씩 흘러 간다고 보면 된다. 즉 플래시 무비의 프레임갯수가 1개 뿐이더라도 프레임 단위로 시간이 흘러가고 있는 것이다. 예를 들어 ball 이라는 무비클립이 있고 프레임에 아래와 같은 액션스크립트를 주었다고 하면
| onEnterFrame = function () { ball._x = ball._x +5; } |
매 프레임 마다 ball이라는 무비클립은 x축으로 5만큼식 이동하게 되는 것이다.
위 ball의 속력은 한프레임 당 5픽셀씩 이동하므로 5픽셀/프레임이 될 것이다.
그렇다면 현재의 속력은 어떻게 알아낼 수 있을까? 현재의 속도를 구하기 위해서는 현재위치에서 이전프레임의 위치를 빼면 프레임당 속력이 나올 것이다.
이전프레임의 위치를 변수에 저장해 두었다가 이번프레임의 위치에서 이전프레임의 위치를 뺀다면 한프레임 동안 얼마만큼 이동했는지(속도)을 알 수 있다.
나. 컴퓨터를 이용한 속도 운동 시뮬레이션
우리는 앞시간에 공이 움직이는 것을 배웠다. 그것은 속력을 구한 것이 아니라 속력을 가지고 있는 공의 시간(프레임)에 따른 이동거리를 구해낸 것이다. 그렇다면 이번에는 마우스의 움직임에 따라 속력을 구해보자.
우선 ball이라는 무비클립을 하나 만들자. 그리고 프레임에 아래와 같은 스크립트를 작성해서 이동속력에 따라 ball 의 넓이를 변하게 해보자.
| ball.startDrag(true); //초기위치 prevx = ball._x; prevy = ball._y; onEnterFrame = function () { //현재 볼위치에서 초기위치를 빼면 프레임당 속력이 구해짐 vx = ball._x-prevx; //x축의 속력 vy = ball._y-prevy; //y축의 속력 //속력만큼 볼의 넓이와 높이를 나타나게 한다. ball._width = Math.abs(vx); ball._height = Math.abs(vy); //다시 현재의 위치를 초기위치로 바꾼다. prevx = ball._x; prevy = ball._y; }; |
이처럼 우리는 간접적으로나마 컴퓨터상에서 속력을 구하는 방법을 알아 보았다. 속력의 개념을 정확히 이해한다면, 물체의 움직임을 표현하는데 크게 어렵지는 않을 것이다.
다. 컴퓨터를 이용한 가속도 운동 시뮬레이션
가속도란 단위시간당 변한 속도를 말한다. 예를 들어 5초인 순간 5m/s로 움직이던 자동차가 6초인 순간 7m/s 가 되었다면 이 자동차의 속도는 1초동안 2m/s 만큼 증가했으므로, 가속도는 2m/s2 이 된다. 따라서 가속도의 정의는 다음과 같이 적을 수 있다.
| 가속도 = 속도의 변화량 / 시간의 변화량 =(나중속도-처음속도) / 걸린시간 |
만약 가속도가 0이면, 속도가 일정한 등속도 운동이 되고, 가속도가 양수면 속도가 점점 증가하는 운동, 가속도가 음이면 속도가 점점 감소하는 운동이 될 것이다. 등가속도 운동의 공식은 아래와 같다.
| 1번째 공식 : v=v0+at 2번째 공식 : s=v0t+(1/2)at² v:나중속도(m/s), v0:처음속도(m/s), a:가속도(m/s²) t:걸린시간(s), s:이동거리(m) |
차가 출발할 때처럼 정지해있던 물체의 속력이 점점 빨라지는 운동을 플래시로 표현해 보자. 속력이 빨라지는 등가속도 운동이어야 하므로, 물체가 이동하는 위치는 시간이 지날 수록 처음위치 보다 더 많은 거리를 이동해야 할 것이다. 위 공식중 2번째 공식을 이용하여 작성하면 아래와 같다.
우선 ball이라는 무비클립을 하나 만든 후 프레임 스크립트에 아래와 같이 스크립트를 작성해 보자.
| //초기값 s = 0; //초기위치 a = 1; //가속도 크기 t = 0; //시작 시간 v0 =0; //초기속도를 0이라고 하자. //반복실행 onEnterFrame = function () { //등가속도 운동에서의 이동거리 공식 s = v0*t + 1/2*a*t*t; ball._x = s; //시간증가 t = t+1; } |
<아래 버튼을 눌러 보세요>
<토의>
가속도(a) 값을 바꾸어 가면서 실행시켜 보자.
