랩터(RAPTOR) 프로그램 강의 07 - 5개의 파란 동심원 그리기 문제

랩터(RAPTOR) 프로그램 강의 07 - 5개의 파란 동심원 그리기 문제

여기서는 랩터로 코딩 하는 방법을 좀 더 확실히 익히기 위해, 우리가 앞에서 눈으로만 살펴보았던 다음과 같은 문제를 랩터로 같이 코딩 해보고, 작성한 프로그램을 실행하여 실제로 5개의 파란 동심원을 그래픽 화면에 그려보도록 합니다.

문제: 다음 그림과 같이 중심점에서 반지름이 10씩 증가하는 다섯 개의 파란 동심원을 그리시오.

문제 파악 및 랩터의 그래픽 기능 살펴보기

랩터로 이 문제를 풀기 전에 먼저 이전에 우리가 만들었던 순서도는 다음과 같았습니다. 

물론 랩터로 프로그램을 만들 때도 이와 동일한 방법을 사용할 것입니다. 다만 main 프로그램의 구조를 다음과 같이 초기 설정 이후에 반복하는 만들고, 각각의 setup, loop 및 close 단계에서 해당하는 작업을 처리하는 서브루틴을 호출하는 방식으로 만들어보세요.

한편 이 문제를 풀기 위해서 랩터에서 어떻게 그래픽 윈도우를 띄우고, 어떻게 원을 그리는지를 먼저 살펴봐야 합니다. 이 문제 해결에 필요한 랩터의 그래픽 윈도우 관련 함수는 다음과 같습니다.

그래픽 함수	기능 설명
Open_Graph_Window(X_Size, Y_Size)	가로 X_Size 픽셀, 세로 Y_Size 픽셀 크기의 그래픽 창 열기
Close_Graph_Window	그래픽 창 닫기
Draw_Circle(X, Y, Radius, Color, Filled)	중심점 (X, Y)에서 반지름 Radius인 Color 색상의 원 그리기, Filled= 원의 내부를 채움 여부

예를 들어, 랩터에서 다음과 같은 그래픽 함수들을 호출하면 가로와 세로가 각각 100 픽셀인 다음과 같은 그래픽 윈도우를 열고, 왼쪽 마우스 버튼 클릭이 될 때까지 기다렸다가, 열린 그래픽 창을 닫습니다. 이 경우에 100 x 100 픽셀 크기인 그래픽 창의 네 모서리의 좌표는 다음과 같습니다. 물론 가운데 중심점의 좌표가 (50, 50)이 되겠지요. 그리고 마우스 클릭을 기다리는 이유는 그래픽 창이 열린 다음 곧 바로 다시 닫힌다면 우리 눈에 그래픽 창의 내용이 전혀 보이지 않을 수도 있기 때문입니다.

 

 main 프로그램의 구조 만들기 및 전체 프로그램 구조 살펴보기

그러면 이제 본격적으로 프로그램을 만들어보겠습니다. 먼저 랩터로 위에서 보았던 순서도와 같이 다음과 같은 프로그램을 만듭니다. 우리는 앞에서 이와 똑 같은 내용을 만드는 과정을 실습해 보았으므로 여기서는 생략하기로 합니다. 다만, 다음과 같이 호출(Call) 기호를 끌어 넣어 추가하고, 추가된 기호를 더블 클릭하여 호출할 서브루틴 이름을 설정하면 다음과 같이 해당 이름의 순서도 탭도 새로 추가되는 것에 유의하세요.

 

이 main 프로그램이 시작되면 setup, loop 그리고 close 서브루틴을 차례로 호출하면서 실행되는데, 각각의 서브루틴에 대해서 이제부터 살펴보기로 합니다.

  setup 서브루틴 만들기

일반적으로 setup 서브루틴에서 하는 작업은 초기에 설정해야 할 여러 가지 작업들인데, 여기서는 다음 순서도와 같이 5개의 동심원을 그릴 그래픽 창을 여는 작업과 전체 그릴 원의 개수를 설정하는 작업입니다. Main 프로그램에서 setup 서브루틴을 호출하고, 호출된 setup 서브루틴 실행이 끝나면 다시 main 프로그램으로 작업 처리의 흐름이 되돌아 오는 과정을 점선으로 표시하였습니다.

 

한편, 우리가 그릴 원은 모두 5개이며, TOTAL_CIRCLE 이라는 변수에 대입하여 상수처럼 사용할 예정입니다. 그리고, 모두 5개의 원이 모두 들어갈만한 충분한 크기의 그래픽 창을 열어야 원들이 잘 보이게 되겠지요. 참고로 우리는 가로와 세로가 각각 100 픽셀인 크기의 그래픽 창을 열어 사용하기로 하며, 앞에서 미리 살펴본 바와 같이 랩터에서 100 x 100 픽셀 크기의 그래픽 창은 다음과 같은 방법으로 랩터에서 제공하는 함수를 호출하여 열 수 있습니다.

 Open_Graph_Window( 100, 100 )

 이렇게 우리가 랩터로 만든 setup 서브루틴의 내용은 다음과 같습니다.

 

 loop 서브루틴 만들기

Loop 서브루틴에서는 다음 순서도에서 보는 바와 같이 중심점 (50, 50)을 기준으로 반지름이 10인 가장 작은 원을 그린 다음, 차례로 반지름을 10씩 더해가며 원을 하나씩 그리는데 도합 5개의 원을 그릴 때까지 반복됩니다. 위와 마찬가지로 여기서도 main 프로그램에서 loop 서브루틴을 호출하고 처리되는 과정을 점선으로 같이 표시하여 두었습니다.

 그런데 여기서는 loop 서브루틴에서 원을 그리는 부분만 따로 분리하여 draw_1_circle 이라는 서브루틴을 하나 더 만들었습니다. 원 하나를 그리는 서브루틴이죠. 물론 만약 loop 안에서 호출하지 않고 바로 Draw_Circle() 함수를 사용해서 원을 그려도 무방합니다. 굳이 여기서 원을 그리는 함수를 별도로 분리시킨 이유는 서브루틴 안에서 다시 다른 서브루틴을 호출할 수 있음을 보여주기 위함입니다.

 

 앞에서 미리 살펴본 바와 같이 랩터에서 그래픽 창에서 중심점이 (x, y)인 원을 그릴 때는 다음과 같은 방법으로 랩터에서 제공하는 함수를 호출하여 그릴 수 있습니다. 또한 원의 반지름이 10에서 시작하여 매번 10씩 커지므로, 반지름으로 원의 번호에다가 10을 곱한 값을 사용합니다.

Draw_Circle( x, y, 반지름, 색상, 내부_채우기 )

이렇게 우리가 랩터로 만든 loop 서브루틴의 내용은 다음과 같습니다.

 그리고 우리가 loop 서브루틴에서 원을 그릴 때 호출한 draw_1_circle 서브루틴은 다음과 같습니다.

 

 close 서브루틴 만들기

마지막으로 close 서브루틴에서는 프로그램이 시작될 때 setup 서브루틴에서 열었던 그래픽 창을 닫아야 하는데, 바로 닫게 되면 그래픽 창에 그려진 내용을 사람이 확인하기도 전에 사라질 가능성이 있습니다. 이런 경우 2~5초 정도의 지연 시간을 주거나 또는 사용자로 하여금 마우스로 클릭하여 닫게 만들기도 합니다. 우리는 다음 순서도와 같이 왼쪽 마우스 클릭을 기다린 후 그래픽 창을 닫기로 합니다. 참고로, 여기서도 main 프로그램에서 close 서브루틴을 호출하고 처리되는 과정을 점선으로 같이 표시하여 두었습니다.

 

 또한, 앞에서 미리 살펴본 바와 같이 랩터에서 왼쪽 마우스 버튼이 클릭될 때까지 기다리는 함수와 그래픽 창을 닫는 함수는 각각 다음과 같습니다. 참고로 창을 닫는 함수는 괄호를 사용하지 않습니다. 

Wait_For_MouseButton( Left_Button ) Close_Graph_Window

 여기서 우리가 마지막으로 만든 close 서브루틴의 내용은 다음과 같습니다.

 

 전체 프로그램 살펴보기

지금까지 만든 전체 프로그램의 작업 처리 흐름을 화살표로 나타내어 순서도로 그려보면 다음과 같습니다. 전체 진행 과정을 간략히 요약하면 다음과 같습니다.

 먼저 main 프로그램이 시작되면 setup 서브루틴에서 그래픽 화면을 엽니다. 그리고 loop 서브루틴에서 원 번호 1번부터 5번까지 차례로 반지름을 10씩 증가하며 반복해서 그립니다. 그리기가 끝나면 마지막으로 사용자가 마우스를 클릭하면 열려있던 그래픽 창을 닫고 종료합니다.

 

고생하셨습니다!