💌 Hello OpenFrameWorks! (#1)

 

*윈도우 기준으로 설명하고 있습니다.
*이걸 할려면 visual studio 2017 이 있어야 합니다.
*없으신 분들은 다운로드 해주세요.

 

안녕하세요 c++로 그래픽을 쉽게 쓸 수 있는 라이브러리인

openframeworks에 대한 강의를 하게 된 chang06입니다!

일단 이런 자리를 내주신 HeoYuBin님, 감사합니다.

 

 

 

먼저 openframeworks를 다운로드해야겠죠?

일단 아래의 링크로 들어가주세요(openframeworks 홈페이지)

https://openframeworks.cc/

openFrameworks

그럼 이런 화면이 보일 겁니다

다음으로 위에 보이는 'download'를 클릭해줍니다

그렇게 했다면 이렇게 여러가지 os에 대해 다운로드할 수 있는 화면이 나올 거에요

거기서 본인에게 알맞는 걸 다운로드해주시면 됩니다!

 

저는 윈도우를 쓰고 있으므로 이걸 선택하겠습니다

 

선택한 뒤 다운로드되는 압축파일을 원하는 위치에 풀면 끝!

-한 번 압축을 풀면 다른 곳으로 못 옮기니 신중하게 위치를 골라주세요

 

 

 

 

다운로드한 압축 파일을 풀면 안에 이런 파일들이 있을 거에요

여기에 있는 것들을 다 알아볼 필요는 없고 몇가지만 설명 드리자면

 

addons : openFrameWorks의 다양한 추가 기능들이 있는 폴더

 

apps : 우리가 만든 프로그램을 저장하는 폴더

 

examples : openFrameWorks을 이용한 여러 예제가 있는 폴더

 

libs : openFrameWorks의 다양한 라이브러리가 있는 폴더

 

정도로 알아두시면 좋을 거에요

이렇듯 종류가 아주 많지만 우리가 오늘 쓸 것은 단 한 가지 밖에 없습니다

바로 요 놈(?) 이죠.

아까도 설명 드렸듯이 바로 우리가 만든 프로그램을 저장하는 곳입니다

 

이 apps 폴더 안의 구조를 더 자세히 알아보자면

이렇게 알아두시면 좋아요

 

 

 

드디어 openframeworks를 실행할 시간이 왔습니다

먼저 visual studio 2017를 실행해주세요

그다음 파일 -> 새로 만들기 -> 프로젝트를 하면

 

이런 창이 뜰거에요

프로젝트 이름을 정하고

위치를 apps -> myapps 안으로 설정하신 다음 확인을 눌러주세요

그럼 이런 창이 뜰 건데

오른쪽의 '...'을 클릭하신 뒤에

압축을 풀었던 위치를 설정해주시면

이렇게 연결되었다고 표시가 될겁니다

그리고 ok를 누르면

이런 창이 뜰 것인데

저희는 아직 추가 기능은 필요 없으므로 그냥 ok를 눌러주세요

그럼 프로젝트 생성 성공!

 

 

 

 

프로젝트를 실행하면 이렇게 생긴 main.cpp와

이렇게 길게 생긴 ofApp.cpp가 생성될 겁니다

우리가 실제로 프로그래밍할 곳은 ofApp.cpp이므로

main.cpp는 그대로 놔두세요

main.cpp는 프로그램이 시작되면 ofApp.cpp를 실행하는 역할 정도로 보고 계시면 됩니다

 

그럼 ofApp.cpp에 있는 함수들의 기능을 살펴보겠습니다

 

setup : 프로그램이 시작했을 때 한 번 실행하는 함수

update : 프로그램이 시작되었을 때부터 계속 반복되는 함수(보통 변수 등을 업데이트함)

draw : 프로그램이 시작되었을 때부터 계속 반복되는 함수(화면에 원, 사각형 등을 그림)

keyPressed : 키보드가 눌렸을 때 눌려진 키의 값을 변환

keyReleased : 키보드를 눌렀다가 손을 땠을 때 그 키의 값을 변환

mouseMoved : 마우스가 움직이면 마우스의 x좌표, y좌표를 변환

mouseDragged : 마우스를 드래그했을 때 마우스의 x좌표, y좌표, 눌려진 버튼(0은 좌클릭, 1은 우클릭, 2는 휠)을 변환

mousePressed : 마우스를 클릭했을 때 마우스의 x좌표, y좌표, 눌려진 버튼(mouseDragged와 동일)을 변환

mouseReleased : 마우스를 클릭했다 땠을 때 마우스의 x좌표, y좌표, 눌려진 버튼(mouseDragged와 동일)을 변환

mouseEntered : 마우스를 클릭했을 때 마우스의 x좌표, y좌표를 변환

mouseExited : 마우스를 클릭했을 때 마우스의 x좌표, y좌표를 변환

windowResized : 화면의 크기가 변했을 때 화면의 너비와 높이를 변환

gotMessage : 메세지를 받으면 ofMessage로 변환

dragEvent : 드래그하면 ofDragInfo로 변환

setup : 프로그램이 시작했을 때 한 번 실행하는 함수
update : 프로그램이 시작되었을 때부터 계속 반복되는 함수(보통 변수 등을 업데이트함)
draw : 프로그램이 시작되었을 때부터 계속 반복되는 함수(화면에 원, 사각형 등을 그림)
keyPressed : 키보드가 눌렸을 때 눌려진 키의 값을 변환
keyReleased : 키보드를 눌렀다가 손을 땠을 때 그 키의 값을 변환
mouseMoved : 마우스가 움직이면 마우스의 x좌표, y좌표를 변환
mouseDragged : 마우스를 드래그했을 때 마우스의 x좌표, y좌표, 눌려진 버튼
               (0은 좌클릭, 1은 우클릭, 2는 휠)을 변환
mousePressed : 마우스를 클릭했을 때 마우스의 x좌표, y좌표, 눌려진 버튼
               (mouseDragged와 동일)을 변환
mouseReleased : 마우스를 클릭했다 땠을 때 마우스의 x좌표, y좌표, 눌려진 버튼(mouseDragged와 동일)을 변환
mouseEntered : 마우스를 클릭했을 때 마우스의 x좌표, y좌표를 변환
mouseExited : 마우스를 클릭했을 때 마우스의 x좌표, y좌표를 변환
windowResized : 화면의 크기가 변했을 때 화면의 너비와 높이를 변환
gotMessage : 메세지를 받으면 ofMessage로 변환
dragEvent : 드래그하면 ofDragInfo로 변환

 

이런 식으로 이해하시면 될 것 같습니다

 

그리고 이제 실행을 해보겠습니다

ctrl + f7을 하면 빌드가 되고

ctrl + f5는 디버깅 없이 시작,

f5는 디버깅하고 시작입니다

 

와우! 이런 모양의 이런 크고 아름다운(?) 화면이 생성되었군요

 

이렇게 긴 글이었는데도 불구하고 잘 따라와주신 분들 모두 아주 훌륭하십니다

원래 원, 사각형, 선 등을 그리는 것도 하고 싶었지만 글이 너무 길어져서 된다면 다음 강의에서 하겠습니다 ㅠㅠ

 

그럼 이때까지 Hello OpenFrameWorks의 chang06이었습니닷!