라즈이노 iOT

【 프로세싱 기초#25】 좌표 트랜스폼 이용한 도형 그리기

 직교좌표계 위에 원이나 사각형 등의 도형을 여러 개를 그려야 할 때가 있을 것이다.  이 때 도형들의 상대적인 간격을 감안하여 좌표를 계산해서 그릴텐데, 이는 코딩을 할 때 많이 헷갈릴 수 있는 부분이 된다.  그래서 이럴 때 사용할 수 있는 좌표관련 함수가 바로 translate() 함수이다. 기준점 좌표를 마음대로 옮길 수 있는 함수로서 옮기기 직전의 좌표 기억 하는 함수인 pushMatrix()와 기억된 좌표를 다시 불러내는 popMatrix()함수를 함께 사용한다면, 직교좌표계 위에서 보다 손 쉽게 여러개의 도형을 그려낼 수 있게 된다.  오늘은 이와 관련하여 다루어 보고자 한다.

[ 프로세싱의 화면 좌표 ]  - 100 x 100 pixel 예시 

▶ 문제  :  아래 실행결과 이미지 처럼 하우스1 도형들을 그리고, 추가적으로 변환함수(translate(x,y))를 이용하여 house2를 그려라.

  [ 조건(hint) ]

   1. 화면 사이즈(가로x세로 픽셀) : 600 x 450 
   2. 배경색 및 라인: background(255), 하우스 1(삼각형:fill(0), 사각형:fill(100)) , 하우스2(삼각형:fill(200, 50, 0) , (사각형 : fill(50, 100, 200) )   
   3. house1 사용자 함수와 house2 사용자 함수 각각 만들어 사용.  (인자값 : int x, int y)

   4. house2는 좌표축 자체를 움직여 주는 translate() 함수를 사용하여 그릴 것 (pushMatrix(), popMatrix() 함께 사용)

  [참고]

 1. translate(x,y) 함수는 좌표축 자체를 x,y의 위치로 이동해주며, 그 위치가 옮겨진 축의 0,0의 위치가 된다. 

    ex) - rect(0, 0, 100, 100)  : 0, 0의 위치에 100x100 크기의 사각형을 그린다. 

        - translate(200,200) : 원점이 200, 200 위치로 옮겨진다.(상대적으로) 

        - rect(0, 0, 100, 100) : 원점이 옮겨 졌기 때문에 사각형이 겹쳐서 그려지지 않는다. 

        [ 사각형 그리기 함수 : rect(x, y, width, height) ]

 2. pushMatrix()  & popMatrix() 함수를 활용하라

  translate() 함수를 이용하여 코딩 할 때 경우에 따라 특정 구간만 원점 좌표를 이동시켜 계산 후 , 다시 원래의 원점 좌표값으로 되돌아 오면 편한 경우가 있다. 이럴 때 (옮겨진)현재의 좌표를 기억 시켜두는 함수
[ pushMatrix())와 다시 그 좌표 값을 꺼내는 함수(popMatrix()) 를 이용하면 코딩이(좌표값 계산) 수월해질 수 있다. ]

▶ 문제 (실행결과) 
아래처럼 동작되도록 코딩하라.

- 지붕(삼각형 함수 사용: triangle(x1, y1, x2, y2, x3, y3)

- 집몸체(사각형 함수 사용 : rect(x, y, width, height)

같은 모양의 도형 반복이므로 for 반복문을 활용하여 간략화 하라.

- house 1은 translate()함수 없이 그려보고, house 2를 그릴 때 translate()함수와 pushMatrix(),popMatrix()함수를 활용하여 그려 보아라.

▶ 프로그램(code) : 
(이미지를 클릭하면 확대 됩니다)

void setup() {
  size(600,450);
  background(255);  
  for (int i=0; i<4; i++) {
    house1(i*150, 100);
    house2(i*150, 300);    
  }
}

void house1(int x, int y) {
  fill(0);
  triangle(x, y, x+100, y, x+50, y-30);
  fill(100);
  rect(x, y, 100, 100);
}
void house2(int x, int y) {
  pushMatrix();
  println(x, y);
  translate(x, y);
  fill(200, 50, 0);
  triangle(0, 0, 100, 0, 50, -30);
  fill(50, 100, 200);
  rect(0, 0, 100, 100);
  popMatrix();
}

▶ 프로그램(code) 다운로드: 
(압축 파일을 풀어서 사용하세요)

【 프로세싱 기초#24】 화면 4구석을 감속 회전하는 공 표현하기

 지난 시간 원(공)이 출발지점부터 목표지점까지 움직일 때 감속하여 움직이도록 표현하였다. 이번에는 화면의 4군데 모서리 부분을 감속 이동으로 반복 회전 시켜 보자.

[ 프로세싱의 화면 좌표 ]  - 100 x 100 pixel 예시 

▶ 문제  :  크기(50x50 pixel) 원을 목표 지점(400,400)까지 움직이되 서서히 감속시켜라.

   [ 조건 :  1. 화면 사이즈(가로x세로 픽셀) : 500 x 500) , 
              2. 배경색 및 라인: background(255), 원 내부 채움색( fill(10) )
              3. 선형 보간 함수 사용 : lerp(a, b, t) -변수 a의 값에서 b의 값까지 t값 비율 만큼 변경한 값을 반환 함

              4. 이동 목표지점(4 곳 모서리 부분)을 배열 벡터로 선언 , 'PVector[] end = new PVector[4]' ]

[참고]

 1. 선형 보간법: 출발점과 끝점을 알고 있을 때, 그 사이에 위치한 값을 추정하기 위하여 직선 거리에 따라 선형적으로 계산하는 방법

 2. 선형보간 함수의 계산 식 : 함수 lerp(a, b, t)는 내부적 다음과 같은 식으로 계산된다.

   function lerp(a, b, t)

       return a * (1-t) + (b*t)

   end

<감속이 어떻게 이루어 지는 것인지 값을 확인>

[ ※ 참고, 선형보간 함수의 계산 식 : 함수 lerp(a, b, t)는 내부적 다음과 같은 식으로 계산된다.

위, 첫 번째 x와 두 번째 x의 차이값(위치)과 두 번째 x와 세 번째 x 차이값을 비교해 보면,  루프를 돌수록 점점 줄어 드는 것을 확인 할 수 있다. y값도 마찬가지.  따라서 루틴을 돌 수록 공이 움직이는 위치가 점점 짧아 지게 됨으로 공이 감속하여 움직이는 것을 볼 수 있는 것이다.  
 그리고 t 값을 조절하면 감속되는 속도를 조절 할 수 있다.

▶ 문제 (실행결과) 
아래처럼 동작되도록 코딩하라.

화면 사이즈(pixel) [ 500 x 500 ]

목표 지점 위치 [ (x, y) : A(50, 50) , B(450, 50) , C(450, 450) , D(50, 450) ]   

[실행결과 영상]

▶ 프로그램(code) : 
(이미지를 클릭하면 확대 됩니다)

PVector current = new PVector(0,0);
PVector[] end = new PVector[4]; //배열 벡터 선언
int cnt =0;
void setup( ) { 
  size(500, 500);
  end[0] = new PVector(50, 50);
  end[1] = new PVector(450, 50);
  end[2] = new PVector(450, 450);
  end[3] = new PVector(50, 450);
  current.set(end[cnt]);  //PVcetor(50,50)위치값 참조(출발점 설정)   
  fill(10);
} 
void draw( ) { 
  background(255);
  // 공의 x좌표와 y좌표를 베열의 좌표로 계속 업데이트
  current.x = lerp(current.x, end[cnt].x, 0.05);  
  current.y = lerp(current.y, end[cnt].y, 0.05);
  ellipse(current.x, current.y, 50, 50);
  // 이동 거리(간격)가 5 pixel이하가 되면 cnt 값 증가 시켜
  // 공이 모서리 지점 1 → 2 → 3 →4 순으로 이동하도록 함 
  if (PVector.dist(current, end[cnt] ) < 5) {
    cnt++;
    cnt = cnt%4;  // 나머지 연산자를 사용하여 0, 1, 2, 3 값을 반복
  }  
}

▶ 프로그램(code) 다운로드: 
(압축 파일을 풀어서 사용하세요)

【 프로세싱 기초#23】 감속하는 공 표현하기 (가속도 적용 - 움직이는 원3)

 지난 시간 PVecter 자료형에 대해 다루어 보았다. 이번 시간부터는 이 벡터 자료형을 본격적으로 활용해볼 텐데, 오늘은 원(공)이 출발지점부터 목표지점까지 움직일 때 목표점에 도달할 수록 가속도가 줄어 들어 서서히 도달 하는 듯한 움직임을 나타내보려 한다. 
(참고, 이런 형태는 게임등에서 많이 활용되는 기법으로 유니티(unity) 등에서 선형보간 함수(기법)를 이용해서 구현하게 된다. )

[ 프로세싱의 화면 좌표 ]  - 100 x 100 pixel 예시 

▶ 문제  :  크기(50x50 pixel) 원을 목표 지점(400,400)까지 움직이되 서서히 감속시켜라.

   [ 조건 :  1. 화면 사이즈(가로x세로 픽셀) : 500 x 500) , 
              2. 배경색 및 라인: background(255), 원 내부 채움색( fill(10) )
              3. 선형 보간 함수 사용 : lerp(a, b, t) -변수 a의 값에서 b의 값까지 t값 비율 만큼 변경한 값을 반환 함 ]

[참고]

 1. 선형 보간법: 출발점과 끝점을 알고 있을 때, 그 사이에 위치한 값을 추정하기 위하여 직선 거리에 따라 선형적으로 계산하는 방법

 2. 선형보간 함수의 계산 식 : 함수 lerp(a, b, t)는 내부적 다음과 같은 식으로 계산된다.

   function lerp(a, b, t)

       return a * (1-t) + (b*t)

   end

▶ 문제 (실행결과) 
아래처럼 동작되도록 코딩하라.

[실행결과 영상]

▶ 프로그램(code) : 
(이미지를 클릭하면 확대 됩니다)

PVector begin, end, current;  // PVector 변수 선언
void setup( ) { 
  size(500, 500);
  begin = new PVector(0, 0);  // 원의 출발점
  end = new PVector(400, 400);   // 원의 도착점
  current = begin;    //참조형 변수, 현재의 위치를 일치시킴(업데이트)
  fill(10);
} 
void draw( ) { 
  background(255);
  current.x = lerp(current.x, end.x, 0.05);  
  current.y = lerp(current.y, end.y, 0.05);
//  println("x=",current.x);    // x 값의 감속 확인용 
//  println("y=",current.y);    // y 값의 감속 확인용 
  ellipse(current.x, current.y, 50, 50);  
}

<감속이 어떻게 이루어 지는 것인지 값을 확인>

[ ※ 참고, 선형보간 함수의 계산 식 : 함수 lerp(a, b, t)는 내부적 다음과 같은 식으로 계산된다.

   function lerp(a, b, t)

       return a * (1-t) + (b*t)

   end    ]
위, 첫 번째 x와 두 번째 x의 차이값(위치)과 두 번째 x와 세 번째 x 차이값을 비교해 보면,  루프를 돌수록 점점 줄어 드는 것을 확인 할 수 있다. y값도 마찬가지.  따라서 루틴을 돌 수록 공이 움직이는 위치가 점점 짧아 지게 됨으로 공이 감속하여 움직이는 것을 볼 수 있는 것이다. 
 그리고 t 값을 조절하면 감속되는 속도를 조절 할 수 있다.

▶ 프로그램(code) 다운로드: 
(압축 파일을 풀어서 사용하세요)

【 프로세싱 기초#20 】 점점 커지는 원 그리기

 지난시간 10개의 선을 랜덤생성시켜 움직이는 것처럼 구현해 보았다. 
이번 시간은 직경 10픽셀의 원이 점점 커지도록 구현해보려 한다.  실제로 하나의 원이 커지는 것은 아니지만 시각적으로 그렇게 보이도록 프로세싱으로 처리할 수 있다.   내용이 길지 않으므로 차근 차근 따라해보면 어렵지 않게 이해 할 수 있을 것이다.

[ 프로세싱의 화면 좌표 ]  - 100 x 100 pixel 예시 

▶ 문제  :  화면 가운데 10픽셀의 원이 화면 사이즈 까지 점점 커지도록 구현 하라. 

   [ 조건 :  1. 화면 사이즈(가로x세로 픽셀) : 500 x 500) , 
              2. 배경색 및 라인: background(180), stroke(0), strokeWeight(5), fill(255, 20)
              3. 원 그리기는 ellipse(x, y, diam, diam) 함수 사용  ]

▶ 문제 (실행결과) 
아래처럼 동작되도록 코딩하라.

▶ 프로그램(code) : 
(이미지를 클릭하면 확대 됩니다)

int diam = 10;           // 원의 직경 변수 선언(초기값 10 pixel)
float centerX, centerY;  // 원의 중심점 좌표 변수 선언

void setup() {
  size(500, 500);
  centerX = width/2;     // 화면 가운데 중심점 잡기(폭)
  centerY = height/2;    // 화면 가운데 중심점 잡기(높이)
  stroke(0);           
  strokeWeight(5);       // 선의 굵기
  fill(255, 20);             // 원의 테두리 색(255)과 내부 채움의 투명도(Alpha:20)
}
void draw() {
  background(180);     // 잔상이 남지 않도록 루프를 반복할 때 마다 배경을 새로 입힌다
  ellipse(centerX, centerY, diam, diam);
  diam += 10;          // 직경을 10pixel 씩 증가 시킨다
  if (diam == width) diam = 0;   // 원의 최대크기가 화면 사이즈를 벗어나지 않도록 리셋 시켜준다
//  diam %= width;                  // 원의 최대크기 = 화면 사이즈가 되면 나머지 값(%)이 0이 된다.
  delay(50);                           // 원이 커지는 시간지연 값
}

▶ 프로그램(code) 다운로드: 
(압축 파일을 풀어서 사용하세요)

▶ 내용설명&실행결과(영상) :
(영상을 확대하고 고화질로 보세요)

(유튜브에서 보기  : 1080p 지원)

https://youtu.be/5mQgZXo9IbY

( 카카오 : 720P 화질 지원)