본문 바로가기
컴퓨터 활용/노년에 즐기는 코딩

[스크래치] 알면 간단한 다른 그림 찾기(숨은 그림 찾기)

by easyfly 2023. 2. 13.
반응형

스크래치에서 자기 복제

스크래치를 통해 간단한 숨은 그림 찾기를 해 보시게요. 스크래치에는 스프라이트를 복제하는 기능이 있습니다. 스프라이트 원본은 그대로 두고 분신이 복제됩니다. 서유기에서 손오공이 자신을 복제해 적들의 혼을 빼듯이.

 

복제된 것들은 프로그램이 끝나면 다 없어지고 맙니다. 프로그램 수행 중에만 메모리에 있으면서 무대에 떠있다가 종료와 동시에 메모리에서 지워지면서 없어집니다.

 

 

다른 펭귄 찾기

펭귄 이미지를 픽사베이에서 다운로드했습니다. 벡터 이미지로 가장 작은 사이즈로 받았습니다. 사용하려면 더 줄여야 합니다. 535×640 사이즈의 벡터 이미지입니다. 백터 이미지는 래스터 이미지와 달라서 수학 계산에 의해 만들어진 이미지로 선이 깔끔합니다. 대신 자세한 묘사는 어려운 점이 있습니다. 반대되는 래스터 이미지는 픽셀 단위로 그림이 만들어지기 때문에 확대하면 외곽선이 깨지게 됩니다.

픽사베이에서 다운받은 펭귄

배경이 투명한 이미지로 가로×세로(70×90) 규격으로 다음과 같이 줄였습니다. 

축소 이미지

펭귄의 배에 원이 그려진 펭귄을 무작위로 흩어놓은 상태에서 배에 원이 없는 위 이미지를 찾는 것이 미션입니다. 스크래치에서 스프라이트를 업로드하겠습니다

스프라이트 이미지 업로드

스프라이트를 관리하는 창에서 업로드 아이콘을 선택하여 이미지를 서버에 올리면 해당 파일 이름으로 업로드가 됩니다. 업로드된 상태에서 모양을 달리하는 펭귄(배에 원이 있는 펭귄)을 만들어 보겠습니다.

 

스프라이트의 다른 모양 만들기

스프라이트 편집창에서 '모양'을 선택하면 올라간 이미지를 편집하여 다른 모양으로 저장해서 사용할 수 있습니다. 여기서는 원본은 '펭귄2'로, 원이 있는 이미지는 '펭귄1'로 하겠습니다. 모양 편집기는 그래픽툴과 비슷한 인터페이스를 갖고 있습니다. 채우기 색은 하얀색, 테두리 색은 보라색을 택하고 원을 그린 것입니다.

편집한 펭귄1 이미지

 

스크래치 코딩

두 개 이미지 중에 '펭귄1' 복제본 50개를 무작위로 무대에 배치합니다. 다음에 '펭귄2' 복제본을 배치시킨 다음에 다시 몇 개의 '펭귄1' 복제본을 배치합니다.

복제본의 무작위로 배치한 코딩

나중에 다시 '펭귄1'을 배치한 이유는 '펭귄2' 복제본이 마지막에 배치되는 경우 너무 쉬운 문제가 되기 때문입니다. 추가 배치가 많으면 찾아야 할 '펭귄2'가 가리게 되어 문제가 복잡해질 수 있어서 3~5 개 사이에서 무작위로 배치했습니다.

 

복제될 때의 위치

'무작위 위치 이동'이 없다면 같은 위치에 복제본이 쌓이면서 외관상 하나로 보입니다. 복제되는 경우를 따로 코딩을 하는데 먼저 복제본이 보이게 하고 무작위 위치로 배치되도록 합니다. 정답 펭귄을 찾아 클릭을 하면 '정답!'이라고 말하고, 이어서 '축하합니다!' 멘트를 같이 날리게끔 했습니다. 한편 정답이 아닌 '펭귄1'의 경우는 아래와 같이 반응하도록 했습니다.

정답 선택에 대한 반응

정답이 아닌 경우는 마우스가 닿으면(스마트폰에서는 터치가 이뤄지면) 크기를 키우고 '어안 렌즈' 효과를 주게 했습니다. 어안 렌즈란 볼록하게 확대되는 현상을 말합니다. 

펭귄1을 마우스로 지날 때 효과

 

전체 코딩

전체 코딩은 다음과 같습니다. 깃발 클릭으로 시작합니다. 각 개체의 복제본이 반복문에 의해 생성됩니다. 복제할 때마다 '복제하기' 메시지를 날리고 이어받는 '복제되었을 때' 구간에서 무작위 배치가 이뤄집니다. 또한 마우스의 접촉과 클릭에 의한 반응을 코딩한 것입니다.

전체 코딩

스크래치 맛보기

스크래치를 프로젝트 화면으로 보겠습니다. 깃발을 선택하면 시작됩니다. 중간에 정지하려면 빨간 정지 버튼을 선택하세요. 

 

 

 

정리

다른 그림 찾는 것은 이미지를 제작하는 과정이 따르기는 합니다만, 코딩은 비교적 간단합니다. 같은 이미지 가운데에서 다른 이미지 하나를 찾는 것입니다. 두 개의 이미지 중에 하나를 먼저 많이 배치합니다. 찾아야 하는 정답 이미지 복제본을 하나 배치합니다. 첫 번째 이미지를 추가 배치합니다. 추가 배치가 없으면 찾는 이미지가 너무 손쉽게 노출되기 때문입니다.

 

 

 

 

반응형

댓글