앱인벤터2 강좌 14: 사인 코사인 곡선 그리기

 많은 사람들이 잘 모르고 있지만 앱인벤터는 수학 계산을 위한 여러가지 함수를 제공하고 있다. 덧셈, 뺄셈을 기본으로 사칙연산은 물론이고 로그, 절대값 심지어 삼각함수에 대한 처리도 지원한다. 우리가 고등수학에서 배웠던 대부분의 함수들을 지원하기 때문에 중고등학생들을 위한 수학앱도 개발할 수 있다. 그래서 이번 시간에는 앱인벤터로 삼각함수에 대한 그래프를 그려보고 학생들을 위한 수학앱을 어떻게 개발할 것인지에 대해 생각해 보도록 하자.

 

 위의 그림이 우리가 중고등학교 수학시간에 배웠던 사인 코사인 그래프이다. 사인함수는 x값이 증가 함에 따라 같이 증가하다가 90˚부터 감소하고 180˚, 270˚, 360˚에서 각각 변곡점을 갖는 위의 그림과 같은 함수이다. 코사인그래프는 사인함수보다 90˚ 느린 함수라고 생각하면 된다. 위와 같은 그래프를 앱인벤터로 표현 하려면 어떻게 해야할까? 앱인벤터에서 사인 코사인 함수를 제공하기 때문에 힘들지 않게 그래프를 그려볼 수 있다. 함수를 불러내어 타이머와 함께 적절히 섞어 쓰면 멋진 사인 코사인 그래프를 그릴 수 있다.

 

 먼저 위와 같이 디자이너 에디터 화면에 캔버스 하나를 배치한다. 캔버스위에 0.01초 간격으로 점을 찍어나가면 몇초후에 멋진 그래프가 그려질 것이다. 바닥부에 HorizontalArrangement를 하나 배치하고 그 안에 버튼을 두개 배치하여 사인 코사인 곡선 그리기란 텍스트를 입력한다. 또 Clock 2개를 배치한다. 하나는 사인곡선의 값을 계산하기 것이고 다른 하나는 코사인곡선의 값을 계산하기 위한 것이다.  0.01초 간격으로 사인과 코사인 값에 해당하는 점을 찍어 나가야 하므로 TimerInterval을 10으로 준다. 앱인벤터는 밀리세컨드로 움직이므로 1000이 1초에 해당한다. 그러므로 TimerInterval을 10으로 주면 0.01초 간격으로 점을 하나씩 출력한다. 만약 좀 긴 시간을 TimerInterval로 설정하면 연속된 선으로 보이지 않고 뚝뚝 떨어진 점으로 보일 것이므로 0.1초가 적당하다.

 

 

이제 블럭 에디터 화면으로 가서 위와  같이 프로그램을 작성한다. 위의 화면은 사인 코사인 곡선을 그리기 위한 초기 설정부이다. x와 y값을 전역변수로 설정하고 0으로 둔다. initializeVariable은 뒤에 사인 코사인 그래프를 그릴때 앞에 그린 그래프를 지우고 새로운 그래프를 그리기 위한 초기화 블럭이다. 또 두개의 클락은 false로 두어 사용자의 입력을 기다리게 만든다.

 

 

 이제 sineCurveButton을 누르면 사인곡선의 그래프를 그리기 시작한다. 버튼을 눌렀을 때 가장먼저 하는 작업은 캔버스 화면에 그려진 이전 화면을 지우고 변수를 다시 0으로 설정하는 작업이다. 화면을  지우지 않으면 여러 화면이 겹쳐서 뭐가 뭔지 알 수 가 없다. 또 변수를 다시 0으로 설정하지 않으면 지난 그래프가 끝난 지점부터 그래프가 그려지므로 점들이 화면을 벗어나서 보이지 않게 된다. 사인버튼을 눌렀으므로 사인곡선타이머는 On 시키고 코사인곡선 타이머는 Off시킨다. 타이머 이벤트의 안을 보면 실제 사인값을 계산하는 루틴이 들어있다.

 

 사인 함수는 Block패널의 Built-in파트 Math콤포넌트 속에 들어있다. 위의 그림과 같이 사인함수를 드래그 해서 전역변수 y속에 끼워 넣으면 된다.

 

 x값은 1씩 증가 할때 y값은 사인함수의 값으로 계산해서 올라간다. 200부터 시작하는 이유는 스마트폰의 화면이 좌측 상단부가 (0, 0)으로 설정되어 있어서 화면의 중간부분에 그래프를 그리기 위해서이다. 보통의 스마트폰 화면은 가로 300픽셀 세로 400픽셀 정도의 크기를 가지고 있다. 물론 기종에 따라 다르다. 화면 아래로 내려가는 것이 +이므로 실제 계산은 "200 - y"로 계산해야 우리가 보통 생각하듯이 위로 가는 것을 증가로 생각하고 계산 하는 것이 된다. 잘 생각해야 하는부분이니 주의해기 바란다.

 

 

 코사인에 해당하는 부분은 사인곡선을 계산하는 것과 동일 한 과정이므로 설명은 생략한다.

 

 

 

       

 

 실제 스마트폰으로 앱을 구동했을때 나타는 그래프를 찍은 사진이다. 외쪽이 사인 곡선 그리기 버튼을 눌렀을때 나타나는 그래프이고 오른쪽이 코사인 곡선 그리기 버튼을 눌렀을 때 나타나는 그래프이다. 수학책에서 본대로 그래프가 잘 나오고 있음을 알 수 있다.

 

 이렇게 앱인벤터로도 사인, 코사인 그래프는 물론이고 탄젠트, 아크 사인, 코사인, 탄젠트 등등 대부분의 수학 그래프를 그릴 수 있다. 따라서 얼마든지 앱인벤터로도 좋은 수학 그래프 앱을 만들 수 있는 것이다. 여러분도 시간이나 열정만 있다면 얼마든지 좋은 앱을 만들어서 구글앱 스토어에 올려서 네티즌들의 평가를 받아볼 수 있다. 물론 유료로 판매도 가능하다. 오늘은 여기까지만 하겠다.