[소프트웨어야 놀자]<17>추상화 그리기

발행일 : 2017-02-16 17:00 지면 : 2017-02-17 16면

오늘 만들 작품이 있는 페이지에 접속하고(https://goo.gl/YEfkPH) 화면 중앙 시작하기 버튼을 클릭해요. 화면에 있는 도형은 마우스를 계속 따라다니죠. 스페이스 키를 누르면 도형 모양이 바뀌어요. 이번에는 마우스를 클릭해 봐요.

어떤 일이 일어나나요? 다양한 형태 도형이 화면에 무작위로 찍혀요. 엔터키를 누르면 만들어진 그림이 지워져요.

이제 이 프로그램을 어떻게 만드는지 알아볼까요? [강의 학습하기] 버튼을 클릭해요.

먼저 도형이 마우스를 계속 따라다니게 해 볼게요. 계속 반복해야 하니 [흐름]에서 `계속 반복하기` 블록을, 특정한 위치로 이동시켜야 하니 [움직임]에서 `~위치로 이동하기` 블록을 가져와 그림 [1]과 같이 코드를 작성해요.

다음으로 스페이스 키를 눌렀을 때 도형 모양이 바뀌게 해 볼게요. [시작]에서 `~키를 눌렀을 때` 블록과 [생김새]에서 `다음 모양으로 바꾸기` 블록을 가져와 그림 [2]와 같이 코드를 작성해요.

이번에는 마우스를 클릭했을 때 먼저 도장이 찍히게 해 볼게요. [시작]에서 `마우스를 클릭했을 때`, [붓]에서 `도장찍기`를 가져와 그림 [3]과 같이 코드를 작성해요.

마지막으로 엔터키를 눌렀을 때 모든 그림을 지워 볼게요. [시작]에서 `~키를 눌렀을 때` 블록과 [붓]에서 `모든 붓 지우기`를 가져와 그림 [4]와 같이 코드를 작성해요.

이렇게 코드를 만들고 [시작하기]를 눌러 결과를 확인해 봐요. 도형이 마우스를 따라오고, 마우스를 클릭하면 도장이 찍히고, 엔터와 스페이스키로 그림을 지우거나 도형 모양을 바꾸기가 가능해요. 하지만 이렇게 코드를 만들면 도형 색깔이나 크기, 위치들이 크게 다르지 않아요.

이제 도형이 다양한 모습으로 변하도록 코드를 수정해 봐요. 색깔, 투명도, 크기, 방향, 위치를 무작위로 정하면 도형을 다양한 모습으로 만드는 게 가능해요. 완성된 코드는 그림 [5]와 같아요.

이 코드는 `마우스를 클릭했을 때` 먼저 색깔을 무작위로 정합니다. 그 다음 5개에서 15개 사이 다양한 도형을 그려요. 각 도형 투명도는 0에서 80 사이로, 크기는 10에서 50 사이로, 방향은 0에서 360 사이로 정해져요. 모습이 정해진 도형은 이전 도형의 도장에서 0에서 100 사이의 무작위 수만큼 이동하고, 도장을 찍어요.