※ Qiita에서는, 본문 부분만의 인쇄에 고생합니다. 그 때문에, 같은 내용을 이하의 페이지에도 게재하고 있습니다. 프린트 아웃하거나 PDF 화하고 싶은 사람은, 이쪽의 페이지를 이용해 주세요(같은 내용입니다):

소개: 사각형 그리기

위의 이미지는 Piet Mondrian의 작품 Composition in Color A (1917)이며 htps //w w. 우키아 rt. 오 rg / 엔 / 피에 t-mon d ri an / 코 m 포시 치 온 - 니코 r- 1917
에서 볼 수 있습니다.

직선을 그리는 방법에 대해서는 이전 장 로 설명했습니다. 단순히 사각형의 윤곽을 그리면 line 함수를 네 번 호출하면 그릴 수 있습니다.

이 장에서는 이러한 드로잉 방법이 아니라 내부를 채우는 사각형, 즉 영역으로 사각형을 그리는 방법에 대해 설명합니다.

기본 사각형을 그리는 법

윈도우에 대해, 가로선과 세로선이 각각 평행한 사각형의 묘화에는 rect 함수를 사용합니다.
rect 함수의 인수는 rect(x,y,w,h) 이며 각각

x = 四角形の左上頂点の x 座標
y = 四角形の左上頂点の y 座標
w = 四角形の横幅
h = 四角形の高さ

됩니다.

rect로 사각형을 그리는 것은 strokeWeight에 의한 선폭의 설정과 stroke에 의한 선의 색의 영향을받습니다.

background(250,250,250);
size(500,500);

strokeWeight(10);  // line width: 10 pixels.
stroke(0,64,255);  // line color: light blue.
rect(100,150,200,100);

사각형 내부의 그리기 색은 fill 함수로 지정할 수 있습니다. 이 함수도 stroke 함수와 같이 다양한 사용 방법이 있습니다만, RGB 치를 지정하는 방법 fill(r,g,b) 라고 하는 사용법을 여기에서는 소개합니다.

다음의 프로그램 리스트에서는, 윤곽선은 이전의 프로그램과 같이 청색으로 해, 내부를 적색으로 채우도록(듯이) 지정하고 있습니다.

background(250,250,250);
size(500,500);

strokeWeight(10);  // line width: 10 pixels.
stroke(0,64,255);  // line color: light blue.

fill(255,0,0);     // <--- fill color: red.

rect(100,150,200,100);

이와 같이, 사각형의 묘화에서는 윤곽선의 색과 내부를 채우는 2 종류의 색에 대해서 제대로 관리하지 않으면 안됩니다.

미안해, 라고 느낄지도 모릅니다만, 프로그래밍과는 그러한 작업의 연속이 됩니다. 정말 뭐, 수수하고 세세하고 또한 귀찮은 작업이군요. 그래서, 프로그래머의 사람에게는 상냥하게 해 주세요(아니 정말로…).

이 섹션의 끝으로 윤곽선을 그리지 않는 방법을 생각하고 싶습니다. 자, 어떻게 하면 좋을까요? 여러가지 생각이 있을까 생각합니다.

원래 윤곽선을 그리지 않게 Processing 에 지시를 내면 좋을까? 라고 생각한 사람도 있으면, 윤곽선의 폭을 0 으로 하면 사라지는 것은? 등등. 이 의견은 모두 정답입니다.

이와 같이, 프로그래밍에 있어서는, 동일한 효과를 얻는 수단으로서 복수의 방법이 존재합니다.

물론, 경우에 따라서는 실행 속도가 다를 수도 있고, 엄밀하게는 완전히 같다는 것은 적을지도 모릅니다.

그러나 실제 프로그래밍에서는 같은 목표를 얻기 위해 다양한 방법이 존재한다는 것이 종종 있습니다.

윤곽선을 끄는 함수로서 noStroke 함수가 있습니다. 이것은 인수를 필요로 하지 않는 함수이므로, 실제의 프로그램에서는 stroke(); 로서 사용합니다. 무효화한 윤곽선을 유효하게 하려면 stoke 함수로 윤곽선의 색을 지정해 주세요.

noStroke 함수에서 윤곽선을 끄더라도 윤곽선의 너비에 대한 정보는 그대로 남아 있으므로 두 번째 rect 함수에서 그려지는 사각형의 윤곽선은 10픽셀로 유지됩니다.

background(250,250,250);
size(500,500);

strokeWeight(10);  // line width: 10 pixels.
stroke(0,64,255);  // set color, but disabled by noStroke
fill(255,0,0);
noStroke();
rect(100,150,200,100);

stroke(0,64,255);  // stroke ON (line color: light blue.)
rect(100,400,50,80);