▶ Processing :: 프로세싱 배우기 :: 기초예제 2 - 이미지 불러오기

함께배우는 프로세싱

기본예제 :: 프로세싱에 이미지 추가하기

이번에 살펴볼 기본예제는

프로세싱에 이미지 추가하는 방법입니다.

전체적인 과정을

3단계로 나누어 볼 수 있습니다.

①  스케치의 data폴더에 이미지 추가

② 이미지를 저장할 수 있도록 PImage 유형의 변수 생성

③loadImage() 함수로 변수에 로드 

---

그러면 시작해볼까요?

①  스케치의 data폴더에 이미지 추가

프로세싱을 실행하신 후

Sektch > Add File...메뉴를 클릭합니다.

클릭하면 이와같은 창이 뜨게 되는데요

여기서 원하는 사진을 추가해주시면 됩니다.

자 그럼 두 번째 단계로 넘어가 볼까요?

두번 째 단계는 PImage 유형의 변수를 생성하는 것입니다.

② 이미지를 저장할 수 있도록 PImage 유형의 변수 생성

 


PImage img;
// PImage 변수를 생성합니다.

void setup() {
	size(900, 400);
	smooth();
	img = loadImage("Flower.jpg"); // loadImage()함수를 통해 이미지를 불러옵니다
}

위 코드에서

두 번째, 세 번째 단계가 이루어집니다.

이미지를 로드했으니

이제는 그려주는 일만 남았습니다.

##

 

void draw() {
	image(img, 0, 0, width, height);
	 // image(filename, x, y, width, height); 
}

<imge 불러오기 기능>

image(img, x, y, width, height); 

첫 번째 filename자리에 void setup()에서 정의해준 이름을 담고

두 번째에는 x, 세번째에는 y값을 입력함으로써 이미지의 위치를 지정해줍니다.

그리고 4,5번째에는 이미지의 width값과 height값을 넣어줍니다.

(**생략할경우 불러오는 이미지의 원래크기대로 출력됩니다.)

여기까지의 결과는 아래 사진과 같습니다.

image(img, x, y, width, height); 에서

 이미지크기를 size의 width와 height에 맞추어그렸기때문에

이렇게 본래이미지의 모습과는 다르게 출력이 되었습니다.

가장 쉽고 편한방법은, 이미지를 로드하기전에

콘텐츠 목적에 맞게 크기를 조정하는 것입니다.

우선 지금은, 프로세싱 내에서 이미지를

원하는 모습으로 출력하기위해서

코드를 고쳐보겠습니다.

image(img, 0, -100, width, 600);

저는 위와 같이 

코드를 수정해보았습니다.

이미지의 height값을 높여서 이미지가 눌리지 않게하고,

꽃이 창의 가운데에 위치하게하기위해서

y값에 -100을 입력했습니다.

이렇게 출력되는

사진의 모습은 아래와 같습니다.

처음 출력한 사진보다 훨씬 보기좋습니다.

여기까지 기본적으로

이미지1장을 로드하는 방법이었습니다.

이어서

두장 이상의 이미지를 불러올때는 어떻게 하면 되는지

간략하게 소개하겠습니다.

####

 
PImage img1;
PImage img2;

void setup() {
	size(480, 120);
	img1 = loadimage("filename1.jpg");
	img2 = loadImage("filename2.jpg");
}


void draw() {
	image(img1, -120, 0);
	image(img2, 130, 0, 240, 120);
	image(img3, 300, 0, 240, 120);
}

이와같은 방식으로 2장이상의 이미지도

프로세싱으로 불러와 작업을 할 수있습니다.^^

프로세싱에서 지원하는 이미지 포맷은

jpeg, png, gif등이 있습니다.

특히 gif와 png는 투명도 조절이 가능하다는 점도 함께

기억해두시면 좋을 것 같습니다.

gif = 0/1 단계 투명도 조절가능

png = 0 ~ 8단계 투명도 조절가능

다음 포스팅에서는

이미지를 불러오기예제를 바탕으로 응용예제를 

소개하도록 하겠습니다.^^

감사합니다^^