[Processing 3.5.3] #2 프로세싱 기본 도형으로 몬드리안 작품 그리기

"점, 선, 면"

모든 도형을 이루는 가장 기본적인 단위는 점, 선, 면입니다. 이번 노트에서는 Processing의 기본 도형 함수를 이용한 점, 선, 면을 표현을 다룹니다. 노트 끝자락엔 근대 미술 작품 한 점을 흉내내 보는 응용과정이 있습니다.

 

• 실행창 크기 설정

• 실행창 배경색

• 선 그리기, 굵기 조절

• 도형 그리기 및 색 채우기 (원, 정사각형, 사각형, 삼각형)

 

---

△지난 노트에서 성공적으로 Processing설치를 마치셨다면 코드를 작성할 수 있는 화면을 볼 수 있습니다. 앞으로의 모든 코드는 여기에 작성하며, 좌측 상단 재생 버튼으로 코드를 실행시킬 수 있습니다. 실행창은 바로 옆의 정지 버튼으로 종료할 수 있습니다.

△아직 아무런 코드가 작성되지 않았기 때문에 실행해보면 조그마한 빈 창이 뜹니다.

△실행창의 크기를 키워볼까요? 크기를 800*800픽셀로 키워보겠습니다.

size(x, y);
//실행창의 크기를 가로 x, 세로 y 픽셀로 변경합니다.

size(800, 800);

△화면이 훨씬 시원해졌네요! 이번엔 배경색을 좀 바꿔보겠습니다. 제 옆에 포도향 사탕이 있으니 보라색이 좋겠네요. 가장 간단한 보라색 RGB 값은 (100, 0, 100)입니다.

background(r, g, b);
//실행창 배경의 색을 변경합니다.
//인자가 셋일 경우 각각 RGB(red, green, blue)값으로 지정됩니다.
//인자가 하나일 경우 밝기값(흑백)으로 지정됩니다.

background(100, 0, 100);

△마음에 드는 색으로 바꾸셨나요? 정말 잘하셨습니다. 다음은 점과 선입니다. 실행창의 좌표(x, y)계는 좌측 상단이 원점(0, 0)입니다.

point(x, y);
//(x, y)위치에 점을 그립니다.

line(x1, y1, x2, y2);
//점(x1, y1)과 점(x2, y2)을 잇는 선을 그립니다.

line(0, 0, 800, 800);

△선 하나를 그렸습니다. 다른 위치에 점도 한 번 찍어보세요. 이번엔 점과 선의 굵기도 바꿔볼까요? 굵기는 점 혹은 선을 그리기 전에 먼저 설정해야 합니다.

strokeWeight(weight);
//점과 선의 굵기를 지정한 weight으로 변경합니다.

strokeWeight(5);

△굵기를 지정하면 선뿐만 아니라 점도 굵어지게 됩니다. 직접 실행해보며 확인해 보세요. 다음은 도형입니다.

circle(x, y, extent);
//점(x, y)를 중점으로 하는 지름 extent의 원을 그립니다.

square(x, y, extent);
//점(x, y)를 좌측 상단점으로 하는 너비 extent의 정사각형을 그립니다.

rect(x, y, a, b);
//점(x, y)를 좌측 상단점으로 하는 너비 a, 높이 b의 사각형을 그립니다.

triangle(x1, y1, x2, y2, x3, y3);
//점(x1, y1), 점(x2, y2), 점(x3, y3)을 잇는 삼각형을 그립니다.

circle(400, 400, 30);

rect(350, 350, 100, 100);

fill(255, 255, 0);

△실행창의 배경과 마찬가지로 도형과 테두리의 색도 변경 가능합니다.

fill(r, g, b);
//지정한 RGB값으로 이후 그려질 도형의 내부를 칠합니다.

stroke(r, g, b);
//지정한 RGB값으로 이후 그려질 도형의 테두리를 칠합니다.

noStroke();
//이후 그려질 도형의 테두리를 없앱니다.

triangle(300, 30, 200, 200, 500, 490);

noStroke();

stroke(255, 0, 0);

 

---

 

△이 코드는 어떤 그림을 그리게 될까요?

△심심한 노란 원들이네요. 레몬즙 같기도 하고 유독성 기름방울 같기도 하고.

피트 몬드리안, <빨강, 파랑 그리고 노랑의 구성>, 1929. 캔버스에 유채, 50x50cm.

△이번 노트의 마무리는 간단한 응용으로 마칩니다. 유명한 사각형들이죠? 몬드리안의 작품 <빨강, 파랑 그리고 노랑의 구성>입니다. 이번 노트의 기능들을 이용해 이를 가장 단순한 형태로 흉내낼 수 있습니다.

오토톳, <Processing note #2-1>, 2019. Processing 3.5.3.

오토톳, <Processing note #2-2>, 2019. Processing 3.5.3.

 

△자, 어렵지 않으셨죠? 아주 잘하셨습니다.

▽두 번째 그림의 코드입니다.

size(800,800);
background(51);
noStroke();

fill(249,251,248);
rect(0,322,79,165);

fill(220,7,40);
rect(107,90,203,153);
fill(249,251,248);
rect(107,268,203,327);
fill(253,229,0);
rect(107,616,203,94);

fill(249,251,248);
rect(325,0,264,173);
rect(325,193,264,240);
rect(325,451,264,232);

fill(68,54,111);
rect(602,451,155,150);
fill(249,251,248);
rect(602,193,199,238);


fill(255);
triangle(0,0,400,0,0,400);
triangle(400,0,800,0,800,400);
triangle(0,400,400,800,0,800);
triangle(400,800,800,800,800,400);

[Processing 3.5.3] #2 기본 도형 그리기 마침.