4. 점과 선 그리기

Processing

4. 점과 선 그리기

From.h 2024. 8. 6. 14:18

728x90

EXERCISE 01 POINT TO LINE

모든 그림 혹은 도형 혹은 입체, 모두 점, 선, 면으로 이루어져 있다고 했죠.

가장 기초가 되는 것부터 익혀놔야 다양한 응용이 가능해집니다.

그래서 오늘은 점을 그리고, 선을 그리는 작업을 해보려고 해요.

프로세싱에서 점은 point라고 하고, 선은 line이라고 해요.

점을 그리는 문법은 다음과 같습니다.

point(x, y, z)

기본적인 x값, y값, z값 혹은 x, y 두 개의 값만 입력해도 됩니다.

실수형 float 타입이 적용되어 있습니다.

잠깐 큰 형식을 한 번 볼게요.

void setup(){

}

void draw(){

}

크게 보면 이렇게 두 가지로 나누어지는데, 보통 가장 기본적인 포맷이라고 보면 돼요.

먼저, setup 에서 화면 사이즈라든지 배경 컬러라든지, 공통으로 사용하는 값들을 정의하죠.

draw에서는 실제로 그림을 그리는 영역입니다.

setup 없이도 작동은 합니다. 하지만 코드가 복잡해질수록 전반적인 설정값은 변하지 않으니까

분리해 놓는 게 편할 겁니다.

1. 화면 크기와 컬러 정하기

우리가 사용할 화면의 크기와 배경 컬러를 정할게요.

사이즈는 가로 600px, 세로 600px의 정사각형이에요. 배경 컬러는 블랙입니다.

void setup(){

size(600, 600); // 600 px x 600 px 사이즈

background(0); // 배경 컬러 0 = 블랙

}

프로세싱 화면의 영점 (0,0)은 좌측 상단입니다.

가로의 길이를 width라고 정의하며 세로의 길이를 height라고 정의합니다.

그래서 중심의 x, y 값은 다음과 같아요.

width/2라고 하는 게 바로 가로의 중심이고,

height/2라고 하는 건 당연히 세로의 중심이죠.

2. 점 그리기

이제 하얀색 점을 4개 찍을 거예요.

중앙으로부터 얼마 간격으로 떨어져 있는 점 4개입니다.

중심으로부터 x= +20 , y=+20에 첫 점을 그리죠. 우측 상단의 20px 떨어진 곳에 있죠.

다음은 x= -20 , y= +20에 두 번째 점입니다. 좌측 상단에 있습니다.

다음 좌측 하단, 그리고 우측 하단을 그립니다.

이렇게 네 번 점을 그리면 됩니다.

굳이 + 를 붙인 이유는 이 점들이 반복해서 많이 그려졌을 때 구분이 편하도록 하기 위함입니다.

void draw(){

stroke(255);

point(width/2 +20 , height/2 +20);
point(width/2 -20 , height/2 +20);

point(width/2 -20 , height/2 -20);

point(width/2 +20 , height/2 -20);

}

그럼 이제 더 나아가서 20씩 증가시키면서 점을 추가해 보겠습니다.

void draw(){

stroke(255);

point(width/2 +20 , height/2 +20); point(width/2 -20 , height/2 +20); point(width/2 -20 , height/2 -20); point(width/2 +20 , height/2 -20);

//1st 점 4개 세트 그리기

point(width/2 +40 , height/2 +40); point(width/2 -40 , height/2 +40); point(width/2 -40 , height/2 -40); point(width/2 +40 , height/2 -40);

//2nd 점 4개 세트 그리기

point(width/2 +60 , height/2 +60); point(width/2 -60 , height/2 +60); point(width/2 -60 , height/2 -60); point(width/2 +60 , height/2 -60);

//3rd 점 4개 세트 그리기

point(width/2 +80 , height/2 +80); point(width/2 -80 , height/2 +80); point(width/2 -80 , height/2 -80); point(width/2 +80 , height/2 -80);

//4th 점 4개 세트 그리기

point(width/2 +100 , height/2 +100); point(width/2 -100 , height/2 +100); point(width/2 -100 , height/2 -100); point(width/2 +100 , height/2 -100);

//5th 점 4개 세트 그리기

}

이렇게 x 값 또는 y 값을 규칙적으로 증가시켜가면서 점을 추가시키면 됩니다. 화면을 채우도록 해봅시다.

점들이 가상의 연결 선을 만들고 있는 게 보이네요.

저 점들이 틈새 없이 연결되면 그게 바로 선이죠.

3. 선 그리기

그럼 이제 진짜 선을 그려봅시다.

선을 그리는 문법은 다음과 같습니다.

line(x1, y1, z1, x2, y2, z2)

선이란 것은 수학 시간에 배웠던 것처럼 p1-p2 두 점을 잇는 선분이라고 보면 되겠습니다.

p1 점의 위치 (x1, y1, z1), p2 점의 위치 (x2, y2, z1) 이렇게 두 점의 위치를 연결시키는 거죠.

물론 z를 제외하고 x, y 만으로 평면 상에 만들 수 있죠.

실수형 float 타입이 적용되어 있습니다.

사각형을 하나 그려보려 합니다.

마름모 꼴 사각형이죠.

점을 그릴 때와 마찬가지로 중앙으로부터 얼마 간격으로 떨어진 점 네 개를 연결시켜주는 거죠.

line(width/2 , height/2 +20 , width/2 -20 , height/2 );

line(width/2 -20 , height/2 , width/2 , height/2 -20);

line( width/2 , height/2 -20 , width/2 +20 , height/2 );

line( width/2 +20 , height/2 , width/2 , height/2 +20);

중심에서 y축으로 20 떨어진 지점에서 x축으로 -20 떨어진 지점으로 이어진 첫 번째 선분

x축에서 -20 떨어진 지점에서 y축으로 -20 떨어진 지점으로 이어진 두 번째 선분

중심에서 x축으로 +20 떨어진 지점으로 이어진 세 번째 선분

x축으로 20 떨어진 지점에서 y축으로 -20 떨어진 지점으로 이어진 네 번째 선분

네 개의 선분을 이어지게 보이도록 만든 겁니다. 실제로 이어진 선은 아닌 거죠

아무튼 눈으로 볼 때는 네 개의 선분으로 보이지 않고 사각형의 도형으로 보이죠.

마찬가지로 이 사각형 도형을 반복시켜서 확대하면서 그려볼게요.

line(width/2 , height/2 +20 , width/2 -20 , height/2); line(width/2 -20 , height/2 , width/2 , height/2 -20); line( width/2 , height/2 -20 , width/2 +20 , height/2 ); line( width/2 +20 , height/2 , width/2 , height/2 +20);

//1st 선분 세트 (사각형) 그리기

line(width/2 , height/2 +60 , width/2 -60 , height/2); line(width/2 -60 , height/2 , width/2 , height/2 -60); line( width/2 , height/2 -60 , width/2 +60 , height/2 ); line( width/2 +60 , height/2 , width/2 , height/2 +60);

//2nd 선분 세트 (사각형) 그리기

line(width/2 , height/2 +100 , width/2 -100 , height/2); line(width/2 -100 , height/2 , width/2 , height/2 -100); line( width/2 , height/2 -100 , width/2 +100 , height/2 ); line( width/2 +100 , height/2 , width/2 , height/2 +100);

//3rd 선분 세트 (사각형) 그리기

line(width/2 , height/2 +140 , width/2 -140 , height/2); line(width/2 -140 , height/2 , width/2 , height/2 -140); line( width/2 , height/2 -140 , width/2 +140 , height/2 ); line( width/2 +140 , height/2 , width/2 , height/2 +140);

//4th 선분 세트 (사각형) 그리기

line(width/2 , height/2 +180 , width/2 -180 , height/2); line(width/2 -180 , height/2 , width/2 , height/2 -180); line( width/2 , height/2 -180 , width/2 +180 , height/2 ); line( width/2 +180 , height/2 , width/2 , height/2 +180);

//5th 선분 세트 (사각형) 그리기

line(width/2 , height/2 +220 , width/2 -220 , height/2); line(width/2 -220 , height/2 , width/2 , height/2 -220); line( width/2 , height/2 -220 , width/2 +220 , height/2 ); line( width/2 +220 , height/2 , width/2 , height/2 +220);

//6th 선분 세트 (사각형) 그리기

이제 화면이 채워지도록 반복시켜서 더 추가해 주면 완성이 됩니다.

void setup(){

size(600, 600);

background(0);

}

void draw(){

stroke(255);

point(width/2 +20 , height/2 +20); point(width/2 -20 , height/2 +20); point(width/2 -20 , height/2 -20); point(width/2 +20 , height/2 -20);

point(width/2 +40 , height/2 +40); point(width/2 -40 , height/2 +40); point(width/2 -40 , height/2 -40); point(width/2 +40 , height/2 -40);

point(width/2 +60 , height/2 +60); point(width/2 -60 , height/2 +60); point(width/2 -60 , height/2 -60); point(width/2 +60 , height/2 -60);

point(width/2 +80 , height/2 +80); point(width/2 -80 , height/2 +80); point(width/2 -80 , height/2 -80); point(width/2 +80 , height/2 -80);

point(width/2 +100 , height/2 +100); point(width/2 -100 , height/2 +100); point(width/2 -100 , height/2 -100); point(width/2 +100 , height/2 -100);

point(width/2 +120 , height/2 +120); point(width/2 -120 , height/2 +120); point(width/2 -120 , height/2 -120); point(width/2 +120 , height/2 -120);

point(width/2 +140 , height/2 +140); point(width/2 -140 , height/2 +140); point(width/2 -140 , height/2 -140); point(width/2 +140 , height/2 -140);

point(width/2 +160 , height/2 +160); point(width/2 -160 , height/2 +160); point(width/2 -160 , height/2 -160); point(width/2 +160 , height/2 -160);

point(width/2 +180 , height/2 +180); point(width/2 -180 , height/2 +180); point(width/2 -180 , height/2 -180); point(width/2 +180 , height/2 -180);

point(width/2 +200 , height/2 +200); point(width/2 -200 , height/2 +200); point(width/2 -200 , height/2 -200); point(width/2 +200 , height/2 -200);

point(width/2 +220 , height/2 +220); point(width/2 -220 , height/2 +220); point(width/2 -220 , height/2 -220); point(width/2 +220 , height/2 -220);

point(width/2 +240 , height/2 +240); point(width/2 -240 , height/2 +240); point(width/2 -240 , height/2 -240); point(width/2 +240 , height/2 -240);

point(width/2 +260 , height/2 +260); point(width/2 -260 , height/2 +260); point(width/2 -260 , height/2 -260); point(width/2 +260 , height/2 -260);

point(width/2 +280 , height/2 +280); point(width/2 -280 , height/2 +280); point(width/2 -280 , height/2 -280); point(width/2 +280 , height/2 -280);

stroke(100);

line(width/2 , height/2 +260 , width/2 -260 , height/2); line(width/2 -260 , height/2 , width/2 , height/2 -260); line( width/2 , height/2 -260 , width/2 +260 , height/2 ); line( width/2 +260 , height/2 , width/2 , height/2 +260);

line(width/2 , height/2 +300 , width/2 -300 , height/2); line(width/2 -300 , height/2 , width/2 , height/2 -300); line( width/2 , height/2 -300 , width/2 +300 , height/2 ); line( width/2 +300 , height/2 , width/2 , height/2 +300);

line(width/2 , height/2 +340 , width/2 -340 , height/2); line(width/2 -340 , height/2 , width/2 , height/2 -340); line( width/2 , height/2 -340 , width/2 +340 , height/2 ); line( width/2 +340 , height/2 , width/2 , height/2 +340);

line(width/2 , height/2 +380 , width/2 -380 , height/2); line(width/2 -380 , height/2 , width/2 , height/2 -380); line( width/2 , height/2 -380 , width/2 +380 , height/2 ); line( width/2 +380 , height/2 , width/2 , height/2 +380);

line(width/2 , height/2 +420 , width/2 -420 , height/2); line(width/2 -420 , height/2 , width/2 , height/2 -420); line( width/2 , height/2 -420 , width/2 +420 , height/2 ); line( width/2 +420 , height/2 , width/2 , height/2 +420);

line(width/2 , height/2 +460 , width/2 -460 , height/2); line(width/2 -460 , height/2 , width/2 , height/2 -460); line( width/2 , height/2 -460 , width/2 +460 , height/2 ); line( width/2 +460 , height/2 , width/2 , height/2 +460);

line(width/2 , height/2 +500 , width/2 -500 , height/2); line(width/2 -500 , height/2 , width/2 , height/2 -500); line( width/2 , height/2 -500 , width/2 +500 , height/2 ); line( width/2 +500 , height/2 , width/2 , height/2 +500);

line(width/2 , height/2 +540 , width/2 -540 , height/2); line(width/2 -540 , height/2 , width/2 , height/2 -540); line( width/2 , height/2 -540 , width/2 +540 , height/2 ); line( width/2 +540 , height/2 , width/2 , height/2 +540);

line(width/2 , height/2 +580 , width/2 -580 , height/2); line(width/2 -580 , height/2 , width/2 , height/2 -580); line( width/2 , height/2 -580 , width/2 +580 , height/2 ); line( width/2 +580 , height/2 , width/2 , height/2 +580);

line(width/2 , height/2 +620 , width/2 -620 , height/2); line(width/2 -620 , height/2 , width/2 , height/2 -620); line( width/2 , height/2 -620 , width/2 +620 , height/2 ); line( width/2 +620 , height/2 , width/2 , height/2 +620);

}

이렇게 엄청난 노동의 결과물로 위의 점들과 선들을 통한 아웃풋이 만들어졌어요.

포토샵이나 일러스트에서 쉽게 쉽게 점찍고, 선 그리고, 사각형 그리고 뚝딱뚝딱 만들던 것들인데,

새삼 그런 소프트웨어들이 경이롭게 느껴지지 않나요?

그럼 우린 왜 이런 원시적인 걸 배우고 있는 거죠?

그냥 포토샵으로 그리고, 일러스트로 그리고, 모션이 필요하면 애펙으로 하면 되고,

그런 거 아닙니까?

우리가 그래픽 작업, 사진 보정과 같은 작업을 빠르게 해야 한다면 그런 응용프로그램 사용해야 하겠죠.

사실 여기서 배우고자 하고 창작하고자 하는 작업은 원리를 이해하고, 활용하면서

원천적으로 뇌의 작동방식을 조금 전환하고자 하는데 그 이유가 있겠습니다.

앞으로 우린 이런 방대하고 귀찮은 일들을 어떻게 처리할 것인가를 고민하게 될 것이며,
반복의 규칙을 발견하고, 그 코드를 줄이는 함수를 사용하고, 클래스를 사용하고

그러면서 구조화를 배우게 되면서 뇌를 좀 더 유연하게 만들어줄 겁니다.

컴퓨터가 사고하는 방식과 인간이 사고하는 방식 혹은 정보를 처리하는 방식을 배우게 되면서

이 둘 사이에 연결할 수 있는 인터페이스를 배우게 되고, 인터랙션의 진정한 의미를 깨닫게 될 겁니다.

컴퓨터가 정보를 처리하는 방식을 이해하게 되면 우린 더 다양한 인터랙션을 맥락에 맞게 인간이 잘 이해할 수 있도록 보여주고 사용하는 방법을 찾는데 도움이 될 겁니다.

From.h

728x90