Sprite
지난 시간에 이어서 프로세싱의 다양한 이미지포맷의 지원에 대해서 알아보겠다. 특히 이번 예제는 투명한 "gif"이미지 데이터에 대한 예제이다. 아래의 코드는 애플릿을 시작하면 이미지가 가운데에서 부터 디스플레이 픽셀의 위치 (0,0)까지 천천히 이동하면서 시작한다. 그리고 마우스를 드래그함에따라 이미지가 천천히 마우스를 따라오는 형상을 나타내었다. 이미지표현의 특성상 마우스의 포인터가 이미지의 중심에 위치하게끔 하기위해서는 약간의 장치가 필요하다. 왜냐하면 "image(imagesource, 이미지 왼쪽 윗쪽의 모서리 x좌표, 이미지 왼쪽 윗쪽 모서리 y좌표)"를 나타내기 때문이다. 때문에 "float difx = mouseX - xpos-teddy.width/2;"과 "xpos = xpos + difx/drag(30);"의 연산을 통하여 이미지의 중심이 서서히 마우스의 포인터에 가까와지도록 하였다. 그림을 2등분한 것이 최종적인 마우스의 위치가 되면 되는 것이다. 그리고 서서히 움직이도록 한 것은 마우스의 위치와 이전 이미지의 차이를 계산하여 마우스가 움직이는 것에 따라 서서히 차이의 변수가 좁혀지면 이미지가 천천히 마우스를 따라오는 형상이 될 것이다. 아래의 예제는 이러한 아이디어를 실현한 코드이다. 잘 짜여진 코드에도 불구하고 "constrain()"을 이용하여 이미지의 포지션이 디스플레이의 밖을 벗어나지 않도록 하였다.
PImage teddy;
float xpos;
float ypos;
float drag = 30;
void setup() {
size(200, 200);
teddy = loadImage("teddy.gif");
xpos = width/2;
ypos = height/2;
}
void draw() {
background(102);
float difx = mouseX - xpos-teddy.width/2;
if (abs(difx) > 1) {
xpos = xpos + difx/drag;
xpos = constrain(xpos, 0, width-teddy.width);
}
float dify = mouseY - ypos-teddy.height/2;
if (abs(dify) > 1) {
ypos = ypos + dify/drag;
ypos = constrain(ypos, 0, height-teddy.height);
}
// Display the sprite at the position xpos, ypos
image(teddy, xpos, ypos);
}
Alphamask
다음 예제는 알파마스크에 대한 예제이다. 기본적으로 마스크이미지에 대한 지식이 있어야만 다음의 예제를 이해할 수 있을 것이다. 마스크에 대한 이해가 있다면 아래의 예제가 그리 어렵지는 않을 것이다. 단지 새로운 것은 "img.mask()"에 대한 부분인데 image의 mask method기능에 대한 예제이다.
PImage img;
PImage maskImg;
void setup() {
size(200, 200);
img = loadImage("test.jpg");
maskImg = loadImage("mask.jpg");
img.mask(maskImg);
imageMode(CENTER);
}
void draw() {
background(map(mouseX+mouseY, 0, width+height, 0, 255));
image(img, width/2, height/2);
image(img, mouseX, mouseY);
}
Create Image
이번 예제는 지난 시간에 약간 설명했던 "createImage()"기능이다. 이 기능은 "loadImage()"와 비슷하게 PImage를 초기화시킨다. 그러면서도 "createImage()"는 아래와 같이 "img = createImage(120, 120, ARGB);"
지정된 색과 이미지의 포맷을 설정할 수 있다.
PImage img;
void setup()
{
size(200, 200);
img = createImage(120, 120, ARGB);
for(int i=0; i < img.pixels.length; i++) {
img.pixels[i] = color(0, 90, 102, i%img.width * 2);
}
}
void draw()
{
background(204);
image(img, 33, 33);
image(img, mouseX-60, mouseY-60);
}
Pointillism: 점묘법
자 이제 좀더 기존 예술에 가까운 예제를 들어보자. 아마도 여러분들은 이런 방식에 흥미를 느낄 것이다. 그도 그럴것이 여러분들이 뭔가 익숙한 그림을 만났기 때문일 것이다. 아래의 예제는 마우스의 위치에 따라서 점의 크기를 변화시키고, 랜덤하게 선택된 "점, ellipse(x,y)에 맞추어 저장된 색으로 지정하여 그림을 그리듯 뿌려주는 이미지코드이다. 아마도 recursion2의 예제와 비교될 것이다. 두 코드를 섞어서 또다른 좋은 예제를 만들어볼 수도 있을 것이다.
PImage img;
int smallPoint = 2;
int largePoint;
int top, left;
void setup() {
size(200, 200);
img = loadImage("eames.jpg");
//img = loadImage("sunflower.jpg"); // an alternative image
noStroke();
background(255);
smooth();
largePoint = min(width, height) / 10;
// center the image on the screen
left = (width - img.width) / 2;
top = (height - img.height) / 2;
}
void draw() {
float pointillize = map(mouseX, 0, width, smallPoint, largePoint);
int x = int(random(img.width));
int y = int(random(img.height));
color pix = img.get(x, y);
fill(pix, 128);
ellipse(left + x, top + y, pointillize, pointillize);
}
Proce
