말레비치와 몬드리안의 선
이번 강의에서는 "어떻게 코드를 이용해 그림을 그릴까?"하는 것입니다. 좋은 예로 추상화의 선구자인 몬드리안이나 말레비치를 예로 들어봅시다. 몬드리안이나 말레비치가 캔버스에 선이나 색면을 그리기 위해서는 붓이나 연필, 혹 목탄을 어디서부터 시작해서 어디서 끝내야할 지 계획해야했을 것입니다. 만일 60cmx60cm 캔버스에 왼쪽 쪽 3cm, 위에서 3cm떨이진 곳에서 시작해서 왼쪽 57cm, 위에서 3cm 떨어진 곳까지 그리려 한다면 정확히 캔버스와 캔버스를 중심으로 위와 왼쪽에서 단위 몇 몇.cm 떨어진 만큼의 장소를 정확히 알아야 했을 것입니다.
"Processing"에서는 이것을 아주 간단하게 해결할 수 있습니다. 물론 캔버스가 스크린이고 스크린의 크기의 단위는 Pixel이라는 것을 감안할 때, 이러한 개념은 간단하게 해결될 수 있습니다.
코드의 예를 들어봅시다.
//캔버스 size정하기
size(60,60);
//선 그리기 line(시작점 x위치, 시작점 y위치, 끝점 x위치, 끝점 y위치)
line(3,3,57,3);
이렇게 아주 쉽게 "선"의 개념을 통하여 "선"을 그릴 수 있습니다.
예상했듯이 선(line)만 있는 것은 아니겠지요. "processing"은 기본적으로 점(point), 사각형(rect), 원(ellipse) 같은 기본 도형을 제공합니다.
그렇다면 좀더 구체적으로 기본 도형을 들여다봅시다.
처음에 언급했었던 몬드리안이나 말레비치의 추상화를 언급했을 때, 선을 그릴 때 어디서부터 시작하는가하는 생각(개념, 물론 후에 바우하우스의 요하네스 이텐이나 조셉 알버스에게서도 볼 수 있음.)은 많은 선을 그리는 방법 중 하나일 것입니다. 이는 레오나르도 다빈치, 알브레히트 뒤러가 최후의 만찬을 그릴 때나 뒤러가 탑에서 내려다본 베니스의 풍경을 그릴 때도 비슷한 방법이 적용되었음을 볼 수 있습니다. 위치를 파악하는 것은 캔버스의 왼쪽 코너에서 부터 출발하는 경우도 있지만 중심에서부터 시작하는 방식도 있습니다. 사각의 면을 정의하는 것과 위치시키는 것은 캔버스의 크기에 상대적일 수 있으며 사각형의 크기와도 상관관계가 있을 것입니다. 말하저면 캔버스 안에 사각형을 그리려면 사각형이 캔버스 보다는 당연히 작아야하겠지요. 이러한 사각형이나 선을 그리기 위한 위치에 대한 생각을 "Coordination"이라고 합니다.
Coordinate System
참조: http://www.processing.org/learning/drawing/
http://en.wikipedia.org/wiki/Coordinate_system
여기서 중요한 것은 수학을 이해하는 것도 중요하지만 우리가 이용하는 Tool인 컴퓨터를 이해하는 것이다. 보통의 eighth grade ("Cartesian coordinate system")인 이전에 우리가 수학시간에 보았을 법한 x와 y축이 있는 그래프는 원점이 중심에 있었다. 때문에 원점을 기준으로 왼쪽으로 움직이면 x축으로 -, 원점을 기준으로 아래로 움직이면 y축으로 -숫자가 된다. 컴퓨터의 시스템은 약간 다르다. 컴퓨터 Pixel의 원점은 왼쪽 위 코너이다. 때문에 프로세싱에서도 이러한 두가지 방식을 혼용해서 쓸 경우를 위해 방식(mode)를 제시한다. 예를 들자면
rectMode(CENTER);
rectMode(CORNER);
ellipseMode(CENTER);
ellipseMode(CORNER);
ellipseMode(CORNERS);
점, 선, 사각형, 원
와 같은 것이다.
size(200,200);
rectMode(CENTER);
rect(100,100,20,100);
ellipse(100,70,60,60);
ellipse(81,70,16,32);
ellipse(119,70,16,32);
line(90,150,80,160);
line(110,150,120,160);
background(), stroke(), colorMode()
reference
http://processing.org/reference/background_.html
http://processing.org/reference/colorMode_.html
http://processing.org/reference/stroke_.html
background()
background(51);
background(255, 204, 0);
PImage b;
b = loadImage("laDefense.jpg");
background(b);
background()의 기능은 스케치 배경화면의 색을 설정하는 것이다. 아래 구문의 예와 같이 이용할 수 있다.
draw() function의 처음에 기술할 수 있으며 반복되는 장면마다 display를 배경색으로 또는 배경이미지로
초기화시킨다. 디폴트 배경색상은 밝은 회색이다.
이미지 또한 배경화면으로 쓸 수 있지만 너비와 높이가 디스플레이화면과 같아야한다. 로딩된 이미지 "b"의 크기를
변형시키기 위해서는 b.resize(width, height)를 이용한다.
이미지가 이용될 때는 현재 tint() 기능세팅은 무시된다.
transparency (alpha)는 draw()기능에서는 사용할 수 없지만 createGraphics()에서는 설정할 수 있다.
구문(Syntax)
background(gray)
background(gray, alpha)
background(value1, value2, value3)
background(value1, value2, value3, alpha)
background(color)
background(color, alpha)
background(hex)
background(hex, alpha)
stroke()
stroke(153);
rect(30, 20, 55, 55);
stroke(204, 102, 0);
rect(30, 20, 55, 55);
스트로크기능은 선의 색이나 기본도형의 외곽선의 색을 설정하는 기능이다.
색은 RGB나 HSB 색상 기본적인 colorMode()의 설정과 연관된다. 디폴트 설정은 각 값 255의 RGB이다.
만일 hexadecimal을 이용하여 색을 정의할 경우 값의 앞에 "#"나 "0x"를 이용한다.
(e.g. #CCFFAA, 0xFFCCFFAA). # 구문(syntax)은 보통 6 숫자로 된 HTML이나 CSS의 색을 정의할 때
쓰인다. hexadecimal은 "0x"로 시작하는데, 8개의 character로 정의된다.; 첫번째 두개의 characters는
알파에 관한 것이고 나머지는 red, green, and blue색상에 관련된 것이다.
변수 "gray"는 현재 설정된 colorMode()의 색상보다 적거나 동일한 값을 나타낸다.
기본 maximum 변수는 is 255이다.
Syntax
stroke(gray)
stroke(gray, alpha)
stroke(value1, value2, value3)
stroke(value1, value2, value3, alpha)
stroke(color)
stroke(color, alpha)
stroke(hex)
stroke(hex, alpha)
Parameters
gray int or float: specifies a value between white and black
alpha int or float: opacity of the background
value1 int or float: red or hue value (depending on the current color mode)
value2 int or float: green or saturation value (depending on the current color mode)
value3 int or float: blue or brightness value (depending on the current color mode)
color color: any value of the color datatype
hex int: color value in hexadecimal notation (i.e. #FFCC00 or 0xFFFFCC00)
colorMode()
noStroke();
colorMode(RGB, 100);
for (int i = 0; i < 100; i++) {
for (int j = 0; j < 100; j++) {
stroke(i, j, 0);
point(i, j);
}
}
noStroke();
colorMode(HSB, 100);
for (int i = 0; i < 100; i++) {
for (int j = 0; j < 100; j++) {
stroke(i, j, 100);
point(i, j);
}
}
// If the color is defined here, it won't be
// affected by the colorMode() in setup().
// Instead, just declare the variable here and
// assign the value after the colorMode() in setup()
//color bg = color(180, 50, 50); // No
color bg; // Yes, but assign it in setup()
void setup() {
size(100, 100);
colorMode(HSB, 360, 100, 100);
bg = color(180, 50, 50);
}
void draw() {
background(bg);
}
Changes the way Processing interprets color data. By default, the parameters for
fill(), stroke(), background(), and color() are defined by values between 0 and 255
using the RGB color model. The colorMode() function is used to change the numerical
range used for specifying colors and to switch color systems. For example, calling
colorMode(RGB, 1.0) will specify that values are specified between 0 and 1.
The limits for defining colors are altered by setting the parameters range1, range2,
range3, and range 4.
Syntax
colorMode(mode);
colorMode(mode, range);
colorMode(mode, range1, range2, range3);
colorMode(mode, range1, range2, range3, range4);
Parameters
mode Either RGB or HSB, corresponding to Red/Green/Blue and Hue/Saturation/Brightness
range int or float: range for all color elements
range1 int or float: range for the red or hue depending on the current color mode
range2 int or float: range for the green or saturation depending on the current color mode
range3 int or float: range for the blue or brightness depending on the current color mode
range4 int or float: range for the alpha
noStroke()
fill()
tint()
연습1) 각자의 개성에 맞게 미니멀한 그림을 하나 선택하고 그림을 분석한 뒤,
기본 도형을 이용하여 그림을 그려보자. line()오브젝트의 경우, strokeWeight()오브젝트의 기능을
이용해보자.
연습2) 점, 선, 면, 원을 이용하여 공간감을 나타내보자. 특히 선의 변수 중 line(x1,y1,z1,x2,y2,z2)
를 이용해보자.
연습3) photoshop이나 gimp 등, 이미지편집 프로그램을 이용해 배경이미지를 편집하고
배경에 이미지를 로딩하여 색과 면, 선, 원이 조합된 이미지 꼴라쥬를 만들어보자.
