삽질하는플머

책장 넘기는 효과 구현하기 - 3.

여가생활/산수공부

1편 - http://oranke.tistory.com/119

2편 - http://oranke.tistory.com/120


어디 제약될 필요 없는 블로그질이라고 해도... 시작한 일은 끝을 봐야 하는 법인데 너무 오래 끌었다. 

지난번 글 이후 초딩이던 큰아들놈은 중학생이 되었고, 신생아였던 둘째가 초딩이 되었으니 세월이 많이 흐르기는 했다. 

블로그 검색로그에 간간히 남아있는 "책장 넘기기 효과"를 보며 어떤 형태로건 마무리를 지어야지 라고 생각하였다. 

(사실... 하드 정리하다가 짱박혀있던 소스를 발견한 이유가 크지만...)


기억을 되살리기 위해 이전 강좌에서 언급했던 몇가지 변수를 되짚어보자. 


  • MvTL - 상단 모서리 이동점
  • MvBL - 하단 모서리 이동점
  • 접힘점1 - 책장이 접힌 위쪽 좌표
  • 접힘점2 - 책장이 접힌 아래쪽 좌표


MvTL값을 임의 위치에 놓고 다른 점들을 비례식으로 계산할 때, MvTL 위치를 적절히 제한해주어야 한다는 것이 지난 글의 마지막이었다. 

그렇다면 어떤 녀석을 구속조건으로 삼으면 좋을까. 


페이지가 이동할 때 접힘점 1과 2, 그리고 이동점간의 관계를 가만히 생각해보자. 


접힘점1을 적당한 위치에 고정하고 이동점 MvTL을 이리저리 움직여보면, 접힘점 2는 책장의 수직부분과 하단부분 내에서 위치하게 된다. 책장이 찢어지지 않는 이상 이 범위를 벗어나지 않게 되므로 0~1 사이의 비율값으로 나타낼 수 있다. 상단, 하단, 수직부분의 비율값을 각각 조절비율 rT, rB, rM 이라고 부르자. 


기준점 MvTL이 주어질 때의 조절비율을 계산하고, 얻어진 비율값을 0~1 사이로 제한한 뒤 다시 기준점을 계산하면, 책장의 모양이 유지되는 적절한 위치값들을 얻을 수 있다. 조금 복잡하게 들릴지 몰라도 어차피 계산은 컴퓨터가 하는 것이니 일단 시켜보자. 


비율변화를 적절히 제한하고 또 구현을 편하게 하기 위해 스크롤바 컨트롤을 사용했다. 

폼 위에 ScrollT, ScrollM, ScrollB 세 개의 TScrollBar를 올리고 Min값은 0, Max값은 10000으로 설정한다. 








마우스가 눌린 Y좌표에 따라 페이지 윗부분을 움직일지, 아니면 아래부분을 움직일지 여부를 결정하기 위해 적절한 타입을 정의하자. 


type

  TRateCalcType = (rctTop, rctBottom);


var
  RateCalcType: TRateCalcType;




이 값은 폼의 MouseDown 이벤트에서 할당한다. 


procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton;

  Shift: TShiftState; X, Y: Integer);

begin

  // 화면의 세로 기준으로 절반을 넘어가면 하단을 기준으로 계산.

  if Y > (ClientHeight / 2) then

    RateCalcType := rctBottom

  else

    RateCalcType := rctTop;

......





비율계산타입 RateCalcType과 페이지의 폭, 너비, 그리고 MvTL값을 기준으로 지난번의 비례식을 사용해 rT, rM, rB를 계산해보자. 


CalcPagePosRate





이렇게 계산된 비율값으로부터 다시 상, 하단 이동점들과 접힘점들을 계산하는 함수는 다음과 같다. 

CalcPageInfo





폼의 마우스 이동에서 계산한 비율을 스크롤바에 던지고, OnChange 이벤트에서 화면을 적절히 구성한 결과물은 다음과 같다. 






소스와 실행파일은 여기에. 터보델파이로 빌드되었다. 


BookTest.7z



앞의 코드에서 언급된 TVector2f 및 벡터연산 함수는 여기 포함된 소스를 참고하자. 

위의 설명이 조금 이상하더라도 마우스와 스크롤바를 이리저리 옮겨보면 글쓴놈의 의도가 금방 이해 될 것이다. 




함께 포함된 BookTest2.exe 는 MvTL 위치선정함수(CalcMoveBasePos)의 테스트코드를 풀고 적절한 댐퍼를 추가한 것이다. 

왠지 그럴듯해 보이지 않는가??? 




-----

마우스 위치에 따라 "division by zero" 예외가 발생합니다. 
이전에 다운받았던 분들은 Unit1.pas 의 말미에 initialization 섹션을 추가하고 다음 코드를 넣어주세요. 

......

initialization
  Set8087CW($133F);

end.



모짜르트 주사위 게임

여가생활/Others



초딩 마지막 학기를 보내던 아들이 학기 과제로 준비하던 주제가 궁금해 물어보니 알레아토릭이란다. 

이 중 모짜르트가 만든 작곡 규칙이 있는데, 미리 작곡해 둔 176+96개의 음절을 주사위를 던져 조합해 3/4박자 춤곡을 만든다나...
조합수도 어마어마해서 모든 경우의 수를 다 들어보려면 팔백억년이 걸린다고 한다. 되게 신기했음. 


정보가 가장 잘 정리된 사이트는 여기 였다.
각 마디별 미디파일을 내려받을 수는 있지만,  아쉽게도 완성된 음악을 만드는 기능은 동작하지 않았다.

자료조사와 정리는 그렇다고 치고, 발표는 어찌할꺼냐 물으니... 

1. 모든 마디를 악보로 출력하고 주사위를 던져 배치한 뒤 들고 간 악기로 연주한다. 
2. 몇 개의 음악을 예제로 미리 조합해 MP3로 만들어 재생한다. 

등등의 아이다운 아이디어를 내놓았다. 그러면서 조합결과를 합쳐주는 프로그램을 만들어주면 안될까 하며 슬그머니 눈치를 본다.
그래서 "아빠가 정말 심심할 때 만들어줄께~" 하고 약속을 해 버렸다. 아빠는 항상 심심한게 함정...

미디 재생하는 소스는 오래전에 델마당의 솔개님이 공개해주신 멋진 코드가 있어서 살짝 손 봐 사용했다. 


썰렁한 실행 화면... 



컴파일한 실행파일은 아래에. 

Mozart.zip



소스는 깃헙에...  터보델파이 또는 BDS2006 으로 빌드 가능. 


생각해보니 가족을 위해 코딩 해 본 기억은 별로 없는 듯 하다. 앞으로도 몇 번이나 있을지 모르겠고...
아무튼 아들 덕에 재미난 경험을 했고, 발표회도 잘 마쳤고, 어느덧 시간이 흘러 아들은 중딩이 되어버림. 수염도 거뭇거뭇... 


한 줄 요약: 모짜르트 만세!

맥에서 InkScape 등 XQuartz 응용프로그램의 폰트를 바꿔보자

여가생활/맥과 아이폰

연초에 했던 이런 저런 결심중 한가지는, 블랜더 같은 3D 도구를 손에 익히는 것이었는데...

먹고 살기 바쁘다보니 벌써 4월로 접어든다. 

그냥 2D라도 제대로 익혀보자고 계획 수정... InkScape 를 내려받아 깔아보았다. 




우엨~ 화면이 저게 뭐야~~ 메뉴의 한글폰트가 초안습... ㅠㅠ;

성격이 나빠서 저런 화면에서는 아무것도 못한다. 


"XQuartz + 폰트" 로 구글신께 문의... 지훈현서님의 블로그를 신탁으로 내려주심. 


WireShark 처럼 InkScape 또한 XQuartz를 사용하므로 요령은 동일. 터미널을 열고 InkScape 어플 디렉토리로 이동한다. 


# cd /Applications/Inkscape.app/Contents/Resources/themes/Clearlooks-Quicksilver-OSX/gtk-2.0

# vi pre_gtkrc 



pre_gtkrc 파일에서 gtk-font-name 을 찾아 주석처리하고 원하는 폰트로 바꿔놓는다. 


#gtk-font-name="Lucida Grande 10"

gtk-font-name="나눔고딕 10"



이제 다시 실행시켜보면 짜잔~~
삐뚤빼뚤하던 메뉴의 폰트가 깔끔하게 변했다. 



이제 뭣 좀 할만해지네~~


프로그래머를 위한 2D 게임아트 강좌를 보며 끄적여본 첫 낙서. 손은 졸려서 다음에... 

역시 뭐가 바로바로 보이는 2D가 킹왕짱임~~




안드로이드 + 프리파스칼 테스트

여가생활/안드로이드

프리파스칼은 라자루스라는 걸출한 IDE를 가지고 있지만, 뭔가 깨작일때는 그래도 터보델파이가 제일 편하다. 


델파이로 간단한 OpenGL ES 런처를 만들고, 안드로이드에서 사용할 JNI 라이브러리를 윈도용 DLL로 빌드해 이 런처로 불러 확인하는 방법으로 개발과 디버깅 모두에 터보델파이를 사용해 보았다. iOS와 달리 안드로이드는 APK에 포함시킨 "데이터파일"이 디바이스에 설치되지 않고 묶인 상태 그대로 남아있기 때문에 이 부분을 윈도에서 그럴듯하게 흉내내주려면 고민이 조금 필요하네... 


암튼 간만에 도서관에 짱박혀 삽질한 결과물... 




DLL 소스를 NDK + FPC 로 빌드한 뒤 폰에 올려본 모습. 






빌드한 APK는 여기.


MindBall.apk



화면을 클릭하면 아래 흐르는 판넬로 공(?)이 떨어진다.

그냥 떨어지면 재미 없으니... 화면 왼쪽을 클릭하면 빨간색 판넬로, 오른쪽은 파란색 판넬로, 가운데는 녹색 판넬로... 


점심내기할 때 써먹으면 좋다. 
수년전 마누라와 만원내기했던 추억이 새록새록...

델파이로 깨작여보는 OpenGL ES 어플

여가생활/안드로이드

후배랑 술먹다가 한때 잘나가던 안드로이드폰 "HTC HTC_X515E" 하나를 갈취. 

취미삼아 FPC로 OpenGL을 돌려보며 즐거워하는 중이다. 


하지만, 코드 조금 고칠때마다 기계나 에뮬로 보내 확인하는건 별로 맘에 안듬.
게다가 맥에 만들어둔 FPC환경을 써먹느라 안드 SDK와 NDK도 맥에 깔았더니 더더욱 귀찮...

원래 걸으면 눕고싶고 누우면 자버리는게 프로그래머란 족속들 아닌가. 

파스칼 코드는 윈도에서 델파이로 깨작거리는게 아무래도 손에 익고 편하다. 


imtec, malideveloper 등에서 제공하는 OpenGL ES 에뮬레이터를 이용하면 

윈도환경에서도 OpenGL ES를 사용할 수 있다. 

아래 사이트로 가서 윈도용 OpenGL ES 2.0 / 1.1 에뮬레이터를 다운받자. 


http://malideveloper.arm.com/develop-for-mali/tools/opengl-es-2-0-emulator/


"C:\Program Files (x86)\ARM\Mali Developer Tools\OpenGL ES Emulator v1.3.0\bin" 폴더로 가서 DLL 파일들을 복사해둔다. 

델파이/FPC 용으로 번역해본 헤더와 초간단 예제는 여기에. 
(OpenGL ES 2.0 프로그래밍 가이드 챕터 1,2의 예제를 포팅)

GLES_WORK.7z



압축을 풀고 위에서 복사한 DLL 파일들을 BIN 폴더에 붙여준다. 

(OpenGL ES 에뮬레이터가 설치되었다면 DLL에 경로가 잡혀있으므로 굳이 복사할 필요는 없지만...)

인코딩에 UTF-8을 사용하므로 델파이 7 이하에서 쓰려면 ansi모드로 변환이 필요하다. 귀찮더라도 알아서 할 것. 

(내가 불친절한게 아님... 네이버의 nForge가 소스코드의 인코딩을 UTF-8만 지원... )


gl1ext, gl2ext 는 배포하지 않는다. 예전에 2.0 헤더를 바꾸면서 애플의 확장도 끼워넣었는데... 
애플과 관련된건 아무래도 뭔가 위반하는것 같은 찝찝함이 있어서... 라이센스 확인될 때 까지 당분간 보류...