[프로세싱] 프로세싱을 이용한 마우스를 따라다니는 캐릭터 만들기.

기존의 좌표를 mouseX, mouseY 좌표를 이용해서 마우스를 따라다니게 하는 캐릭터를 만들 수 있다. 먼저 한 도형의 좌표를 mouseX, mouseY를 기준으로 잡고, 그 도형의 좌표와 다른 도형의 좌표의 차이를 이용해, mouseX±n, mouseY±n 과 같이 좌표값을 수정해 마우스를 따라다니는 캐릭터를 만들 수 있다.

example)

void setup() {

//setup

size(480, 480);

}

void draw() {

background(0);

//hand

fill(204,102,0);

quad(mouseX-100, mouseY-50, mouseX-60, mouseY-20, mouseX-70, mouseY, mouseX-110, mouseY-40);

quad(mouseX+100, mouseY-50, mouseX+60, mouseY-20, mouseX+70, mouseY, mouseX+110, mouseY-40);

//body

fill(10,210,255);

ellipse(mouseX, mouseY, 150, 150);

//gloves

fill(200,0,0);

ellipse(mouseX-110, mouseY-50, 30, 30);

ellipse(mouseX+110, mouseY-50, 30, 30);

//head

fill(10,210,255);

rect(mouseX-60, mouseY-180, 120, 120, 80, 80, 80, 80);

//mouth

fill(255,110,200);

rect(mouseX-25, mouseY-80, 50, 15, 0, 0, 18, 18);

//mufler

fill(255, 0, 0);

rect(mouseX+20, mouseY-60, 25, 80, 0, 0, 20, 20);

rect(mouseX-50, mouseY-70, 100, 25, 20, 20, 20, 20);

//muflerpatterns

fill(0,255,0);

quad(mouseX-30, mouseY-70, mouseX-10, mouseY-70, mouseX-13, mouseY-45, mouseX-33, mouseY-45);

quad(mouseX+5, mouseY-70, mouseX+25, mouseY-70, mouseX+22, mouseY-45, mouseX+2, mouseY-45);

quad(mouseX+20, mouseY-30, mouseX+45, mouseY-20, mouseX+45, mouseY, mouseX+20, mouseY-10);

//eyes

fill(255);

ellipse(mouseX-30, mouseY-135, 30, 30);

ellipse(mouseX+30, mouseY-135, 30, 30);

fill(0);

ellipse(mouseX-35, mouseY-129, 10, 10);

ellipse(mouseX+25, mouseY-129, 10, 10);

//nose

fill(255,102,0);

triangle(mouseX, mouseY-110, mouseX, mouseY-100, mouseX-65, mouseY-100);

//hat

fill(0,255,0);

triangle(mouseX-20, mouseY-190, mouseX, mouseY-250, mouseX+20, mouseY-190);

fill(255);

ellipse(mouseX, mouseY-250, 15, 15);

fill(255,0,0);

quad(mouseX-10, mouseY-220, mouseX+10, mouseY-220, mouseX+15, mouseY-205, mouseX-15, mouseY-205);

rect(mouseX-30, mouseY-190, 60, 20, 5, 5, 5, 5);

//button

fill(255,0,0);

ellipse(mouseX, mouseY-10, 15, 15);

ellipse(mouseX, mouseY+20, 15, 15);

ellipse(mouseX, mouseY+50, 15, 15);

}