6. 면 그리기
EXERCISE 02 FORWARD INTERACTION
기본적으로 사각형을 그리고,
사각형으로 패턴을 만들어볼 거예요.
가로와 세로 길이에 대한 프로세싱 샘플을 참조했어요.
1. 사각형을 그린다
2. 외곽선을 없앤다
3. 내부 색을 칠한다
4. 가로 세로 직사각형을 반복한다
5. 반복을 적용해서 쉽게 그린다
6. 변수를 바꿔보며 변화를 느낀다
1. 사각형 그리기
먼저, 사각형 (직사각형)을 그려볼게요.
가로는 [화면의 길이]를 적용할 것이고, 세로는 100px로 할게요.
순서는 다음과 같아요.
1. 화면 사이즈를 정한다
2. 배경색을 정한다
3. 사각형을 그린다
순서대로 코드를 써보면
size(600,600); //화면 사이즈
background(125); //배경색 (컬러 값 0~255)
rect(0, 0, width, 100); //사각형 그리기 (위치 x, 위치 y, 가로, 세로, 모서리 R값 생략)
회색 바탕에 검은 실선의 직사각형이 그려질 거예요. 흰색으로 기본 색이 채워져 있네요.
2. 사각형 컬러 바꾸기 / 선 없애기
이제 사각형의 색을 좀 바꿔볼게요.
선도 없애고요.
size(600,600);
background(125);
noStroke(); //외곽선 없음
fill(235, 20, 17); //면 채우기 빨간색
rect(0, 0, width, 100);
3. 사각형 추가하기
이제 세로 길이의 사각형을 그 위에 덧그려볼게요.
size(600,600);
background(125);
noStroke();
fill(235, 20, 17); // 빨간색
rect(0, 0, width, 100); // 가로 박스
fill(200); // 밝은 회색
rect(0, 0, 100, height); // 세로 박스
회색의 세로 사각형이 그려졌죠.
빨간색 사각형 위로 덮어씌웠네요.
아, 그럼 코드는 위에서 아래로 순서대로 실행되니까
빨간색이 먼저 그려지고, 그다음 회색이 그려졌구나.
알 수 있겠죠?
4. 사각형 반복 시키기
이제 이 두 사각형을 반복시켜볼게요.
size(600, 600);
background(125);
noStroke();
fill(235, 20, 17);
rect(0, 0, width, 100);
fill(200);
rect(0, 0, 100, height);
//1회
fill(235, 20, 17);
rect(0, 200, width, 100);
fill(200);
rect(200, 0, 100, height);
//2회
fill(235, 20, 17);
rect(0, 400, width, 100);
fill(200);
rect(400, 0, 100, height);
//3회
위의 코드에서 반복해서 변화되는 부분을 눈으로 찾아봐요.
다른 부분은 변화가 없고 rect( ); 에서 위치 x, y 가 각각 200씩 증가하는 것을 볼 수 있어요.
여기서 이렇게 변화하는 x와 y를 발견!
위 그림처럼 가로 한 번, 세로 한 번, 이렇게 묶음을 3회 반복시킨 것이죠.
천을 직조할 때 이런 식으로 실이 한 번씩 오가며 만들어지는 것과 같죠
일종의 패턴이라 생각하자고요.
그런데 이렇게 반복해서 몇 번씩 그리는 작업을 100번 정도 한다고 치면
저 코드를 100줄, 아니 200줄 넣어야 하는 거예요.
말도 안 되겠죠.
그래서 위에서 코드처럼 길게 반복되는 것들을 정리해서 [반복문]이라는 것으로 바꿔볼 거예요.
반복문은 지난 편에 배운 것이죠.
for (변수 = 시작 값, 변수 = 조건, 업데이트 = 증가 값) { 명령어들 }
여기서 변수는 직사각형의 위치 값인 x와 y라고 했죠.
이들은 똑같이 변화한다고 볼 수 있죠.
시작은 x, y 모두 0에서 시작하죠.
종료가 되는 시기는 x값 또는 y값이 화면의 가로 또는 세로 폭만큼의 위치에 다다랐을 때죠.
증가 값은 x, y의 변화값, 즉 여기에서는 그 간격이 되는데, 200씩 떨어져 있어요.
5. 반복문으로 정리하기
for 를 사용해서 정리해보면 다음과 같아요.
for (int i = 0; i < height; i += 200) { // 변수 i는 0에서 시작. 세로 값에 이르면 종료. 200씩 증가.
fill(235, 20, 17);
rect(0, i, width, 100);
fill(180);
rect(i, 0, 100, height);
}
기본적인 코드로 완성했어요.
간단한 사각형을 이용해서 도형을 그리고
반복문 함수를 이용해서 코드를 줄여봤어요.
다음 시간에 이걸 활용해서 좀 더 확장해볼게요.
From.h