[프로세싱] 이미지 불러오기 및 움직이기

디지털 이미지는 데이터에 불과하다. 이미지는 width*height의 RGB색을 가진 하나의 픽셀들이 모여서 만들어진다. 프로세싱에는 PImage라는 기본적인 클래스가 있다. 이 클래스는 이미지를 불러오고 화면에 나타낸다. 예를 들어 살펴보자.

//PImage 형식의 변수 선언하기
PImage img;

void setup() {
  size(640,480);
//이미지 파일 가져와서 PImage의 새 인스턴스를 만든다.
  img=loadImage("img.jpg");
}

void draw() {
 background(0);
//image 함수는 이미지를 화면에 위치시킨다. 이 경우 위치는 점 (0,0)이다/
 image(img,0,0);
}

프로세싱에서 이미지 파일을 불러올 때에는 같은 폴더내에 data라는 폴더를 만들어서 파일을 넣어줘야한다.


위 코드를 조금 수정하면, 원을 움직이는 것과 마찬가지로 좌표를 수정해서 이미지를 움직이게 할 수 있다. image() 함수에서, image(img,mouseX,mouseY)로 수정하면, 마우스 좌표를 따라다닌다.

이미지의 기본 좌표는 imageMode(CORNER)모드이다. imageMode(CENTER)모드로 수정하면, 이미지의 중앙을 기준으로 좌표가 기준으로 잡힌다.

마우스뿐만 아니라 키보드 인터랙션으로 이미지를 움직일 수도 있다.
Keycode() LEFT,RIGHT,UP,DOWN 함수를 이용해서 다음과 같은 캐릭터 움직이기도 가능하다.