마우스 클릭으로 선을 그리고 지우기

 if (mousePressed == true) 문장의 의미는 마우스 좌클릭이 되면이라는 의미이다.

image(pg, 0, 0); 함수는 덮어씌우는 의미이다.

스크린 중앙을 기준으로 마우스가 이동한 위치로 선을 그려보자.

좌클릭하면 지우도록 한다.

소스 코드

PGraphics pg;

void setup() 
{
  size(400, 400);
  pg = createGraphics(width, height);
}

void draw() 
{
  background(204);
  // Clear the PGraphics when the mouse is pressed
  if (mousePressed == true) {  //마우스를 클릭할 때 그림 지우기
    pg.beginDraw(); 
    pg.clear();//지우기
    pg.endDraw();
  } 
  else 
  {
    pg.beginDraw();
    pg.stroke(0, 102, 153);//색깔결정
    //  (width/2, height/2) is screen center position
    pg.line(width/2, height/2, mouseX, mouseY); //높이, 너비 반은 중간을 의미함
    pg.endDraw();
  }

  image(pg, 0, 0);
}

 

 

 

마우스가 움직인 방향으로 그림을 그리기

이 의미는 마우스가 움직인 방향으로 선을 그려주면 된다.

마우스가 클릭이 안 된 상태에서 선을 그리면 끝나는 문제이다.

필요한 것은 마우스의 현재 위치 값과 그 이전 값을 저장하는 변수만 있으면 된다.

그리고 마우스 좌클릭하면 지우도록 한다.

소스 코드

PGraphics pg;

int prevX, prevY;
int curX, curY;

void setup() {
  size(400, 400);
  pg = createGraphics(width, height);
  
  println(width);
  println(height);
  
  prevX = mouseX;
  prevY = mouseY;
  
  curX = mouseX;
  curY = mouseY;
}

void draw() {
  background(204);
  
  //   Clear the PGraphics when the mouse is pressed
  //   mousePressed is event
  if (mousePressed == true) {  //마우스를 클릭할 때 그림 지우기
    pg.beginDraw(); 
    pg.clear();//지우기
    pg.endDraw();
  } 
  else 
  {
    pg.beginDraw();
    pg.stroke(255, 0, 255);//색깔결정
    
    pg.line(prevX, prevY, curX, curY); //높이, 너비 반은 중간을 의미함
    
    prevX = curX;
    prevY = curY;
  
    curX = mouseX;
    curY = mouseY;
    
    pg.endDraw();
  }

  image(pg, 0, 0);
}