이미 지난 시간에 대략적으로 픽셀에 대한 이해를 하였다. 기본적으로 프로세싱의 디스플레이 단위가 픽셀로 이루어져있다는 것, 때문에 각각 Shape들의 Coordinates의 단위또한 픽셀이고 이를 통해 이미지들의 위치를 변형시킬 수 있으며, 이미지프로세싱을 할 수 있었다. 이러한 일련의 과정 때문에 우리는 프로세싱이 마치 이미지를 로딩하고 편집하는 능력을 제공한다고 생각하기쉽다. 사실 우리가 이미지를 로딩하고 타이밍을 주어 에니메이션을 만들려고 한다면 그에 해당하는 타이밍에 대한 프로그래밍이나 이미지를 로딩할 때 일어나는 수행의 과정, 즉 이미지를 해석하고 가장 기본적인 데이터를 해석하여 모니터에 뿌려주는 일련의 과정에 해당하는 프로세싱에 관한 프로그래밍을 누군가가 했기 때문에 우리는 손쉽게 프로세싱을 통해서 이미지를 "draw()"기능을 통하여 디스플레이에 구현할 수 있는 것이다. 그러나 때때로 우리는 이러한 이미지를 픽셀을 통하여 좀더 근본적으로 변형시키고 싶을 때가 있다. 이를 위해서 프로세싱은 원래의 데이터에 접근할 수 있도록 "pixel array"를 통한 기능을 제공한다. 이미지프로세싱을 위해서는 어떻게 데이터를 다루는가가 "이미지 프로세싱"의 관건일 것이기 때문이다.
그렇다면 이제 좀 더 자세히 픽셀의 세계로 들어가보자. 우리는 디스플레이에서 각각의 픽셀은 2차원적인 x, y의 좌표가 있다는 것에 익숙하다. 그러나 " pixel array"는 1차원적인 시퀀스로 색의 정보들을 저장한다.
"Daniel Shiffman"의 예를 들어보면, 가로 5픽셀과 세로 5픽셀의 이미지를 표현한다면 아마도 아래와 같을 것이다.
예를 들어보자.
Example: Setting Pixels
size(200, 200);// Before we deal with pixels
loadPixels();
// Loop through every pixel
for (int i = 0; i < pixels.length; i++) {
// Pick a random number, 0 to 255
float rand = random(255);
// Create a grayscale color based on random number
color c = color(rand);
// Set pixel at that location to random color
pixels[i] = c;
}
// When we are finished dealing with pixels
updatePixels();
위의 예를 이해하기 위해서는 아래와 같이 두개의 기능을 이해해야할 것이다.
loadPixels()픽셀 어레이에 접근하기 전에 이 기능을 먼저 불러야 할 것이다. 말하자면 "픽셀들을 불러라, 내가 그들과 이야기하고 싶다!"
updatePixels()
이 기능은 여러분이 픽셀들과의 모든 일을 마치고 "픽셀들을 전부 업데이트해라, 난 모든 일이 끝났다!"라는 명령어이다.
자바에서 대표적인 looping의 테크닉은 for(),{} while(){}일 것이다. 위의 예제는 for구문을 보인다. loadpixel()을 통하여 "pixel"의 속성을 불러내었다. 때문에 for이하의 구문에서보면
"for (int i = 0; i < pixels.length; i++){}"
를 볼 수 있는데 c++나 c프로그래밍 언어에서와 비슷하게 변수 i를 int형식으로 선언하고 픽셀의 길이 까지 여러분들이 하고싶은 이야기를 하겠다는 말이다. 말하자면 캔버스의 사이즈가 200x200으로 선언되었기 때문에 픽셀의 수도 200x200이라고 할 수 있는데 이러한 길이가 "pexels.length"로 표현되었다. 그런데 "i=1"이 아니라 "i =0"으로 부터 시작하는것에 주의하자.
풀어서 이야기하자면
size(200, 200); //캔버스 사이즈 200x200
// Before we deal with pixels
loadPixels(); //200x200의 픽셀들을 부른다.
// Loop through every pixel
for (int i = 0; i < pixels.length; i++) { // 0 픽셀부터 200x200-1까지 아래와 같은 일을 반복한다.
// Pick a random number, 0 to 255
float rand = random(255); //랜덤숫자를 선택한다.
// Create a grayscale color based on random number
color c = color(rand);//랜덤숫자에 맞는 색을 선택한다.
// Set pixel at that location to random color
pixels[i] = c;//선택된 컬러를 픽셀마다 위치시킨다.(물론 흑백이다.)
}
// When we are finished dealing with pixels
updatePixels(); //일을 수행하고 픽셀을 닫는다.
이렇게 프로그래밍을 마칠 수 있을 것이다.
Two dimentional array
