선그리기 기초 부터

웹앱 프로젝트를 하느라고 오랫동안 코로나 개발에서 손 뗐었는데요.

너무 오래 안하다 보니까 그립네요.

써핑하다가 코로나 팁을 공유한 파일이 있어서 정리해 봅니다.

가장 기초적인 기능인 선 그리기 입니다.

일단 코드부터 볼까요?

display.setStatusBar( display.HiddenStatusBar ) -- Hide the status bar
 
local bx, by=0, 0
local lines={}
local p=1
 
local function drawALine(event)
    if "began"==event.phase then
        bx, by=event.x, event.y
       
    elseif "moved"==event.phase then
        lines[p]=display.newLine(bx, by, event.x, event.y)
       
        --Width
        lines[p].width=12

        --Alpha
        lines[p].alpha=1
       
        --Color
        lines[p]:setColor(255,255,255) -- White       
       
        bx, by=event.x, event.y
        p=p+1
       
        print(p);
       
    end    
end
 
Runtime:addEventListener("touch", drawALine)

맨 첫번째 줄은 아이폰에서 status bar를 없애는 코드입니다.

그리고 무엇인가를 그리려면 좌표가 필요하니까 x,y 좌표를 담을 변수를 만들었구요.

그 다음에 line 이라는 배열을 만들었습니다.

여기서 선 그리기는 시작점과 끝점을 찍어서 그 두 점을 연결하는 직선을 만드는게 아니라

손가락이 움직이는대로 따라서 선이 그어지도록 하는거거든요.

그러면 손가락을 따라 계속 선을 그어서 그 촘촘하게 그려진 선들이 결국에는 하나의 선처럼 보이게 하는 겁니다.

그래서 lines[] 라는 배열 만들었습니다.

그리고  p 는 변수에 차례대로 선들을 담기 위한 숫자로 쓰일 변수이구요.

이렇게 변수 선언 한 다음에는 drawALine 이라는 함수가 있는데요.

이 함수 건너뛰고 이벤트 리스너 부터 보겠습니다.

touch 에 반응하도록 했고 drawALine을 call 합니다.

그리고 어떤 객체에 이벤트 리스너를 단 것이 아니라 Runtime에 달았으니까 앱이 시작하면서 끝날 때까지 계속 활성화 되 있게 됩니다.

이제 핵심 부분인 함수를 볼까요?

우선 매개변수로 이벤트를 받습니다.

touch 이벤트에는 began, moved, ended 같은 phase들이 있습니다.

여기서는 began과 moved 라는 phase를 이용합니다.

우선 began 일 때는 그 이벤트가 일어난 지점 즉 손가락으로 터치한 지점의 x,y 좌표를 위에 선언했던 변수에 담습니다.

그리고 손가락이 조금이라도 움직일 때 발생하는 moved 일 때 drawLine을 사용해서 선을 긋죠.

began에서 저장했던 x,y 좌표에서 현재 움직인 지점의 x,y 까지 선을 긋습니다.

이 첫번째 line은 lines[] 배열 첫번째에 담기겠죠.

아마 코로나는 배열이 1부터 시작할 겁니다. PHP나 JAVA는 0부터 시작을 하죠.

그 다음은 이 그려진 선을 꾸미는 부분 입니다.

첫 부분은 width 를 사용해서 선의 두께를 정하구요. 그 다음은 투명도(alpha)를 정합니다.

그리고 setColor로 색을 정하구요.

이렇게 처음에 그려진 선을 다 꾸몄으면 다음 선을 준비하기 위한 작업을 합니다.

뭐냐하면 bx,by 값을 현재의 x,y 값으로 바꾸는거죠.

그러면 현재의 위치가 다음 moved 가 발생했을 때 시작점이 되는겁니다.

(이걸 하지 않으면 처음 touch 했던 부분부터 계속 선이 그어질 겁니다. 한번 해 보세요.)

그 다음에는 첫번째 선이 지정된 배열의 다음에 두번째선을 넣기 위해서 p에 1을 더합니다.

그 밑에는 제가 그냥 p 를 콘솔에 print 한 겁니다.

이렇게 하면 선긋기는 간단하게 끝납니다.

아래는 quinc 라는 친구가 공개한 선에 여러 효과를 줄수 있는 코드들입니다.

우선 width 부터 볼까요?

        lines[p].width=math.random(1, 30) -- Makes for an interesting "backbone" effect
        lines[p].width=12 -- Just a boring old set width
        lines[p].width=-3 -- I've heard of a line with a width of -3!
        lines[p].width=math.abs(event.y/20) -- 3D-ish horizon look

width 부분에 위 예제들을 하나하나 넣어가면서 실행해 보세요.

첫번째는 width가 1에서 30까지 랜덤하게 설정되는 겁니다. quinc 는 이것을 척추 모양을 내는 효과라고 했네요.

12는 일반적인 효과고 -3도 있네요. 이건 어떨까요?

그리고 y 좌표를 20으로 나눠서 그 절대값을 width 로 하는 것도 있네요.

이것도 효과가 어떨지 궁금한데요.

이렇게 수학 공식을 사용하다 보면 아주 좋은 효과들이 나옵니다.

프로그래밍을 하면 할 수록 수학을 배우고 싶은 마음이 마구 생겨납니다.

누가 수학은 배워봤자 사회에서 써 먹을 일이 없다고 그러는지...

이글 보시는 학생분들 계시면 그런 얘기 믿지 마세요.

수학 진짜 필요합니다.

다음은 투명도 효과를 볼까요?

    lines[p].alpha=1 -- Another boring one
    lines[p].alpha=0.5 -- Half strength line
    lines[p].alpha=math.abs((event.y-(1000-event.y))/1000) -- Darker area near the center
    lines[p].alpha=math.abs(event.y/1000) -- Foggy day
    lines[p].alpha=math.abs(event.x/1000) -- Foggy day...to the side?
    lines[p].alpha=(math.random(100, 1000))/1000 -- Random

여러 효과들이 있는데요. 처음에 알파를 1로 설정한 것은 그냥 투명도 없이 진하게 표시하는 겁니다.

0.5는 반쯤 투명하게 하는 거구요. 다음엔 수학공식을 사용해서 여러 효과를 주었네요.

세번째는 호면 중앙으로 올 수록 진해 지는 건가 봅니다.

그 다음은 아래 윗부분으로 갈 수록 연해지는 효과고 그 다음은 좌우로 갈수록 연해지는 효과 입니다.

그 다음은 그냥 랜덤하게 투명도를 주는거네요.

해 봤는데 별 효과는 없습니다. 그냥 무책임한 랜덤일 뿐이네요.

다음은 색 지정부분 입니다.

        --Flat color
        --lines[p]:setColor(255,255,255) -- White
        --lines[p]:setColor(255,255,0) -- Yellow
        --lines[p]:setColor(255,0,0) -- Red
        --lines[p]:setColor(0,255,0) -- Green
        --lines[p]:setColor(0,0,255) -- Blue
        --lines[p]:setColor(255,0,255) -- Purple
       
        --Interesting color effects
        --lines[p]:setColor(math.random(255)) -- Grayscale
        --lines[p]:setColor(math.random(255), math.random(255), math.random(255)) -- Rainbow
        --lines[p]:setColor(event.x/5, event.x-20/5, event.x+20/5) -- Really odd effect...
        --lines[p]:setColor(event.x-event.y, 0, event.x-event.y) -- Pretty cool, works best with slow movement

첫 부분은 그냥 단색으로 흰색,노랑,빨강,초록,파랑,보라 이렇게 선 색이 주어집니다.

그 다음엔 수학 공식을 사용한 효과로 처음엔 흑백화면처럼 라인 색이 나오면서 진해지고 옅어지고의 변화만 있습니다.

그 다음은 랜덤하게 색을 표시하는 거구요. 그 다음엔 진짜 이상한 효과라고 하네요. 한번 해 보세요.

그 다음엔 천천히 움직이면 아주 좋은 효과가 나온다고 합니다.

그 다음에는 아래 for 문도 하나 예제로 주었습니다.

        for i=1, p do
                lines[i].xScale=lines[i].xScale-0.12; lines[i].yScale=lines[i].yScale-0.12
        end

분석해 보니까 선을 그을 때마다 lines[] 배열에 담겨있는 선들의 크기를 조금씩 크게 만드는 거네요.

이것도 괜찮은 효과 입니다.

이 width, alpha, setColor 효과들을 다양하게 조합해 보면 재밌을 거예요.

위 이미지가 그 중 하나입니다.

아래 quinc 가 올린 파일 원본 소개 합니다.

main.lua