Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

(구)boymin

Processing || #2 3차원 집그리기 본문

Programming/Processing 3

Processing || #2 3차원 집그리기

boymin 2017. 11. 25. 02:19

얼마 전 학교 방과 후 프로세싱 교육 시간에,

'집'이라는 주제로 프로세싱으로 자유롭게 그림을 그리는 시간이 주어졌다.


삼각함수로 그림그리는데에 맛들려있던 나는 삼각함수로 3차원 느낌이 나는 집을 그리고 싶다는 생각을 하였고,

이를 바로 실천으로 옮겼다.


전체적인 구조는 이렇다.


1. 집의 바닥이 될 마루바닥을 타원 형태로 생각하여 점 4개를 찍는다.

타원으로 그리는 이유는 시점을 약간 위쪽과 정면을 겹치게끔 해서 그렇다.

quad함수를 이용한다.


2. 마루바닥의 각 꼭짓점에서 기둥 4개를 위로 올린다.

line함수를 이용한다.


3. 올린 기둥위에 지붕을 그린다.

지붕은 마루바닥보다 조금 더 크다.


4. 색칠한다.

이 때, 삼각함수의 범위에 따라 어떤 그림이 먼저 그려질지를 고려해야한다.

triangle과 rect함수를 이용한다.


이유는 즉슨, 실제로 3d모델을 만들어서 이를 그리는 것이 아니라, 2D 그래픽으로 삼각함수를 이용해 3D느낌이 나도록 하는 코드이기 때문에 도형의 그려지는 순서가 중요해진다.


또, 색칠할 때 3D 느낌이 나기 위해서 앞에 있는 면은 밝게, 뒤에 있는 면은 어둡게끔 하였다.

이 때는 fill(x)에서 x의 값을 회전하는 정도에 따라 바뀌게끔 하였다.


5. 마우스 위치에 따라 각 도형의 좌표에 들어가는 삼각함수의 인자를 조절할 변수의 값을 조절한다.


6. 1~5에서 설계한 내용을 바탕으로 필요한 좌표를 계산하여 코드로 짠다.


...이렇게 설계를 하여 짠 코드가 이거다. 좀 길다.


길지만, 사실 내용은 별 거 없다.


집을 그리기 위한 모든 좌표들의 값을 일일히 계산해서 식으로 쓴 것 뿐.


애먹은 부분은, 삼각함수의 x위치에 들어갈 변수 count의 값에 따라 어떤 면이 앞으로 올 지 였다.


우선 완성된 모습이다. 집은 마우스로 드래그하면 회전한다.


골치아픈 부분은 바로 도형을 그릴 때 지붕의 경우 총 4개의 삼각형을 그리게 되는데,

어떤 삼각형이 나중에 그려져 결과적으로 '앞'으로 올지를 생각해야한다.


집을 돌리기 전에 앞에 있던 삼각형은 약 180도를 돌린 후에는 뒤로 가야한다.


이런 부분들을 현재 count의 값에 따라 그려지는 순서를 다르게 함으로써 해결했다. 상당히 귀찮은 과정이었다.


그래도 결과물은 썩 나쁘지 않은 것 같아 기분이 좋다.

저작자표시

'Programming > Processing 3' 카테고리의 다른 글

Processing 3 || #1 삼각함수를 이용한 도형 그리기  (1) 2017.10.31
공유하기 링크
'Programming/Processing 3' Related Articles more
Comments