실습: 2D 도형으로 알파벳 만들기 (1)

도형 알파벳 코딩 샘플 / 레퍼런스

• https://openprocessing.org/sketch/1811660

• https://openprocessing.org/sketch/1810485

시작 스케치

• 2023 Feb version: https://openprocessing.org/sketch/1839288

• 2023 May version: https://openprocessing.org/sketch/1927261

1. 알파벳 조합을 미리 생각해보자.

• 조건 1: 도형 함수로 만들고 싶은 알파벳 최소 4개 정하기.

  • 추후 다양한 단어를 조합할 수 있게 더 만드는 것도 좋음!

• 조건 2: rect, ellipse, arc, triangle 함수를 최소 1번 이상씩 사용하기.

"A", "C", "D",  "E", "K", "M", "N", "O", "R", "S", "W", 

"dawn" , "dock" , "dome" , "draw" , "dusk" , 
"make" , "mark" , "mars" ,  "mask" , "mass" , 
"menu" , "mock" , "mode"  "moan" , "mock" , 
"mole" , "mood" , "moon" , "neck" , "need" ,
"nest" , "news", "node" , "noma", "omen", 
"race", "rank", "rock", "role", "rome", 
"sake", "sand", "sea", "seed", "seek", "seen"

LOVE, DEMO, HOPE, GLOW, DRAW

2. 알파벳 만들며 도형 함수들 연습하기

• 캔버스의 디폴트 원점 (0, 0)을 기준으로 각 도형을 배치하고, 나중에 translate() 함수로 위치 이동하기.

  • push(), pop() 으로 감싸는 것 잊지 말기.

push()
translate(100, 100);
rect(0, 0, 100, 100);
pop()

• 위치 값, 너비 및 높이 값은 정수 숫자(Integer)로 쓰기.

• 선생님이 만든 가이드 함수: rect_guide(), ellipse_guide(), arc_guide()

  • 파라미터 문법: 기존 도형 함수들(rect, ellipse, arc)과 동일하게 사용하면 됨.

  • 도형의 x, y 위치 좌표를 동그라미로 표시해서 위치 기준을 알아보기 쉽게 커스터마이즈한 함수들.

2-1. rect 함수 - 알파벳 A

• A를 도형으로 그릴 수 있는 다양한 방법 생각해보기

• rect 여러 개로 먼저 연습.

• 나중에 모션을 추가하게 되면, 너비(w)가 늘어나고 줄어들면서 O 혹은 Y 같은 형태로 보이기도 함.

• rect 의 모서리를 둥글게 할 수도 있으니 파라미터로 커스터마이즈 해보기.

• 아래 그림의 파란 점들은 도형 함수에 써야할 x,y 위치들임.

2-2. rect 함수 - 알파벳 E

• 나중에 모션을 추가하게 되면,

  • 미리 rectMode(CORNER)로 설정하는 것이 편함.

  • rect 의 모서리를 둥글게 할 수도 있음. (파라미터 4~8번째)

  • 그림의 검은 점: 각 rect 함수에 써야할 x,y 위치들.

• renderMouseE() 함수 참고

2-3. ellipse 함수 - 알파벳 O, B

• B: 원 두개를 써서 위 아래 배치해보기.

• O: 기본 ellipse() 타원 혹은 원형 모양. 기준점을 원점으로 할 것인지, 원의 중앙으로 할지 고민해보기.

  • 응용: 큰 원 안에 작은 원을 하나 더 그려서 도넛처럼 만들어보기.

2-4. arc 함수 - 알파벳 C, D

function draw(){
    /** C **/
    push();
    arc(0, 0, 100, 100, 45, 270+45);
    pop();

    /** D **/
    push();
    arc_guide(0, 0, 120+mouseX/5, 100, 270, 270+180, CHORD); 
    pop()
}

2-5. triangle 함수 - 알파벳 M

function draw() {
    push();
    triangle(0, 200, 20, 0, 40, 200);
    triangle(40, 200, 60, 0, 80, 200);
    pop();
}