[프로세싱] 클래스 Arrow

과학이야기/물리학 2017. 1. 11. 16:12

[이 글은 제 개인 블로그 새길 공작소(http://saegil-lab.kr) 에도 함께 올린 글입니다.]


아래 소스는 프로세싱에서 사용할 수 있는 화살표를 그리는 클래스입니다. 오늘 아이들과 프로세싱 수업하면서 삼각형의 위치 계산하며 만든 화살표 클래스입니다.

그래프를 그릴 때 x축과 y축을 화살표를 그리기 위해 제작했습니다. 그 이외에도 힘을 표시한다거나 할 때 유용하게 사용할 수 있을 것입니다.


  • 예제 : 이 예제는 (100, 100)인 점에서 (200, 200)인 점으로 화살표를 그리고 화살표의 끝점이 이동할 때 화살표의 모양을 보기 위한 예제입니다.
Arrow a;

float y2 = 100;

void setup(){
  size(400, 400);
  a = new Arrow( 100, 100, 200, 200);
}

void draw(){
  background(255);
  a.display();
  a.setP2(200, y2);
  y2 = y2 + 1;
  if (y2 > height) {
    y2 = 0;
  }
}

클래스 Arrow 소스

/** * Processing class for drawing arrow * by Eom Taeho * * http://saegil-lab.kr * http://saegil.tistory.com */ class Arrow{   float x1, y1, x2, y2;   Arrow(float x1_, float y1_, float x2_, float y2_){     x1 = x1_;     y1 = y1_;     x2 = x2_;     y2 = y2_;   }   void display(){     stroke(0);     line(x1, y1, x2, y2);     float x, y, a, b, c, d, theta;     theta = atan((y2-y1)/(x2-x1)); if ((x2 - x1) < 0){

theta = -(PI - theta);

}

    x = x2 - 10*cos(theta);     y = y2 - 10*sin(theta);     a = x - 5*sin(theta);     b = y + 5*cos(theta);     c = x + 5*sin(theta);     d = y - 5*cos(theta);     fill(0);     triangle(x2, y2, a, b, c, d);   }   void setP1(float x1_, float y1_){     x1 = x1_;     y1 = y1_;   }   void setP2(float x2_, float y2_){     x2 = x2_;     y2 = y2_;   } }

아래 그림은 화살표를 그릴 때 삼각형을 그리기 위한 계산과정입니다. 참고하세요.


설정

트랙백

댓글