▶ Processing :: 프로세싱 기초예제 - 픽셀

픽셀[Pixel]파헤치기

---

이번 포스팅에서 살펴볼 것은 '픽셀'입니다.

먼저 픽셀의 개념에 대해서 살펴보겠습니다

픽셀 (=화소)

컴퓨터 디스플레이 또는 컴퓨터 이미지를 구성하고 있는 최소 단위의 점.

모니터를 통해서 보는 모든 이미지는 실제로는 픽셀이라고 하는 매우 작은 사각형의 점들로 구성돼 있다.^[각주:1]

쉽게, '매우작은 사각형의 점'이 이미지나 디스플레이를 구성하고 있다고 생각하면 됩니다.

이해를 돕기위해서 아래의 그림을 준비했습니다.

사진을 확대해보면 네모난 사각형으로 이루어진 모습을 볼 수 있습니다.

이제 프로세싱으로 돌아가서 살펴볼까요?

▶프로세싱에서의 픽셀

픽셀의 배열은 다른 배열들과 거의 동일합니다.

 :  [다른점 : 프로세싱 내장함수이기에, 배열 선언을 하지 않아도 된다는 점입니다.]

픽셀에 접근할 때, 프로세싱에 알려주어야할 것

:   loadPixels()함수와  updatePixels()함수를 사용하여 

   프로세싱에게 픽셀에 접근한다는 것을 알려주어야 합니다.

<각 픽셀을 임의로 그레이스케일 변수로 바꾸는 예제>^[각주:2]

size(200, 200);
loadPixels();
for(int i = 0; i < pixels.length; i++){
  float rand = random(255);
  color c = color(rand);
  pixels[i] = c;
}
updatePixels();

예제에서도 loadPixels()와 updatePixels()함수를 확인할 수 있습니다.^^

이는프로세싱에게 픽셀사용의 시작과 끝을 알려주는 것입니다.

loadPixels() : 픽셀배열에 접근하기 전에 입력해주는 함수

updatePixels() : 우리가 픽셀사용을 다 했을때 프로세싱에게 '끝났음'을 알려주는 함수

픽셀에 접근할때 기억해두어야할 3가지^[각주:3]

1. 화면이나 이미지가 너비와 높이를 가지고 있다고 가정해보자.

2. 그렇게 하면 전체 픽셀 배열의 길이는 이미지, 화면의 width * height

3. 어떤 화면 안에 주어진 X, Y좌표를 일차원적인 픽셀 배열로 바꾸면 다음과 같다.

위치 = x + y * width

기초를 탄탄하게 다져볼 생각으로 '픽셀'을 살펴보니

생각했던 것보다 많이 어려운 것 같습니다.ㅠㅠ

<

1. [네이버 지식백과] 픽셀 [pixel] (매일경제, 매경닷컴) [본문으로]
2. 다니엘쉐프만 지음, 랜덤웍스 옮김, 『프로세싱, 날개를 달다』, 2011, 비제이퍼블릭, p.339 [본문으로]
3. 다니엘쉐프만 지음, 랜덤웍스 옮김, 『프로세싱, 날개를 달다』, 2011, 비제이퍼블릭, p.339 [본문으로]