라즈이노 iOT

【 프로세싱 기초#27】 프로세싱 출력결과를 PDF 파일로 저장하기

 프로세싱을 하다 보면, 출력되는 화면을 캡처 하고 싶을 때가 있습니다.  최종 결과 뿐 아니라 중간 중간 변하되는 순간적인 모습을 한 장면씩, 저장 하고 싶을 때가 있습니다.  지난 시간에 이미지 파일로 저장하는 것을 다루었습니다. 

  이번엔 PDF 파일로 저장해보도록 하겠습니다.

 PDF 파일로 저장할 때의 장점은,  PDF파일의 특성인 파일 하나에 여러장면의 이미지를 페이지 단위로 저장 할 수 있다는 것입니다.  마치 복사기의 자동급지 스캐너에서 10장을 스캔해서 PDF로 저장하면 파일 하나에 10개의 페이지 형태로 저장되는 원리와 같습니다.   

 또 하나의 장점은 PDF로 저장 된 파일은 벡터형태로 저장이 됩니다.  따라서 일러스트레이터와 같은 툴에서 이미지의 라인 두께 조절이나 이미지의 크기 변경이 가능해 집니다.  각각의 이미지를 레이어형태로 컨트롤 할 수 있다는 점에서 후편집이 필요할 경우 상당히 유용합니다. 

 우선 지난시간 jpg, png 저장이 되는 선수 학습을 먼저 참고하면 도움이 됩니다.

[ 선수 학습 ]

2020/01/06 - [Language/프로세싱] - 【 프로세싱 기초#26】 프로세싱 출력결과를 이미지(jpg,png) 파일로 저장하기

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

▶ 문제 1 :  아래 출력 결과를 키보드의 's'키를 누르면 PDF 파일 저장 되도록 하시오. 

  [ 조건(hint) ]

   1. 화면 사이즈(가로x세로 픽셀) : 500 x 500 
   2. 마우스의 위치(mouseX, mouseY) 에 따라 원이 계속 그려지도록 하라.

   3. S키를 누르면 "Rasino.pdf" 로 저장되도록 하고, 실행창을 종료 시켜라 ('exit ( )' 함수 사용)

   4. pdf 파일 형식을 사용하기 위해서는 import processing.pdf.*   라이브러리 사용이 필요함.

   5. pdf 파일로 저장하기 위해서는  beginRecord ( ),  를 선언해야 하고,  캡처시점에 endRecord( ) 함수를 호출해야 PDF 파일로 원하는 이미지가 저장된다.  

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

(동작화면)

(PDF 파일 저장 화면)

(PDF 파일 열어본 화면)

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

void setup ( ) { 
  size(500,500);   size(500, 500);  
  beginRecord(PDF, "Rasino.pdf");
} 

void draw ( ) { 

}

void draw ( ) { 
  float diam = random(20, 200);
  noStroke( );
  fill(random(50, 150), random(200), random(100, 255) );
  ellipse(mouseX, mouseY, diam, diam);
}

void keyPressed ( ) { 
  if (key == 's') {

    endRecord( );
    exit( );
  } 
}

 pdf 파일로 저장하기 위해서는  beginRecord ( ) 와  endRecord( ) 함수를 선언 하는 위치가 중요해요. 

만약 endRecord( )가 선언 안 되거나 선언 위치가 잘못되면, PDF 파일은 보이는데, 파일 사이즈가 0 byte 로 나타나며 제대로 저장 되지 않으니 주의하세요. 

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

▶ 문제 2 :  위와 같은 형태로 작동하되 하나의 pdf 파일을 만들면서,  'a' 키를 누를 때 마다 여러 페이지가 저장 되도록 하라.  또한 키보드의 's' 키를 누르면 종료되도록 하라. 

  [ 조건(hint) ]

   1. 화면 사이즈(가로x세로 픽셀) : 500 x 500 
   2.  임의의 크기 원을 위해 random( ) 함수를 사용하라.   (원의 직경(가로세로 동일) 랜덤 값은 : 20~200 값으로 하라)

       예),   - random(255) : 0~255 사이의 랜덤 값 발생

              - random(20, 200) : 20~200 사이의 랜덤 값 발생

   3.  각 원에 RGB 요소를 넣어 색상을 랜덤하게 채운 원을 출력 하라.   필요함수 : " fill ( R, G, B) "    이때, RGB의 각 값은 0~255 이다. 

   4.  결과 화면을  a 키를 누를 때마다 하나의 PDF에 페이지 형태로 저장하시오. 

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

(아래 부터는 하나의 PDF 파일 속에 여러페이지로 저장 된 모습)

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

import processing.pdf.*;
PGraphicsPDF RasPDF;

void setup ( ) { 
  size(500,500); 

  RasPDF = (PGraphicsPDF) beginRecord(PDF, "RasPDF.pdf");
} 

void draw ( ) {   
}

void mousePressed ( ) { 
  float diam = random(20, 200); 
  noStroke(); 
  fill(random(100, 200), random(200), random(200, 255) ); 
  ellipse(mouseX, mouseY, diam, diam);   
}

void keyPressed ( ) { 
    if (key == 'a') { 
      RasPDF.nextPage( ); 
     } else if (key == 's') {
       endRecord();
       exit();  
     }
}

PGraphicsPDF RasPDF; 의  PGraphicsPDF 는 대소문자 와 철자를 반드시 구분해서 사용해야 하며,

RasPDF의 함수 선언 이름은 다른 것으로 바꾸어도 상관 없어요.  이렇게 PDF파일로 저장하게 되면, 백터 형태로 저장이 되어서 일러스트레이터와 같은 편집 툴에서 이미지 속의 각각의 요소들을 레이어 단위로 컨트롤이 가능해서 활용도가 높습니다.   또한 여러장의 이미지를 하나의 파일(PDF)로 묶을 수 있어서 파일 관리가 필요한 경우에도 좋겠네요.  ^^

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

【 프로세싱 기초#26】 프로세싱 출력결과를 이미지(jpg, png 등) 파일로 저장하기

 프로세싱을 하다 보면, 출력되는 화면을 캡처 하고 싶을 때가 있습니다.  최종 결과 뿐 아니라 중간 중간 변하되는 순간적인 모습을 한 장면씩, 이미지 파일로 캡쳐해서 활용하고자 할 때 가 있는데,  여기에 대해 몇 가지 코드 예시로 설명 드려 볼께요.

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

▶ 문제 1 :  아래 출력 결과를 이미지 파일로 저장 하되,  키보드의 's' 키를 누를 때 마다 저장되도록 하시오.

  [ 조건(hint) ]

   1. 화면 사이즈(가로x세로 픽셀) : 500 x 500 
   2. 마우스의 위치(mouseX, mouseY) 에 따라 원이 계속 그려지도록 하라.

   3. S키를 누를 때 마다 호출되는 keyPressed( ) 라는 서브루틴 함수를 별도로 만들어 사용

   4. 이미지 저장 함수는 saveFrame( ) 함수를 사용

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

위에서 마우스를 4 단계로 움직였으며, 멈출 때 마다 's'키를 누르면 아래처럼 4개의 이미지 파일로 저장 되도록 하시오. 

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

void setup ( ) { 
  size(500,500); 
} 

void draw ( ) { 
  ellipse (mouseX, mouseY, 80, 80); 
}

void keyPressed ( ) { 
  if (key == 's') {

     saveFrame("images/result-###.jpg") ; 
  } 
}

 images 라는 하위폴더(생략가능)를 만들고 그 아래에 'result-xxx.jpg' 라는 파일 이름으로 's'키를 누를 때 마다 xxx 자리 랜덤 숫자가 들어간 result-xxx.jpg 라는 파일을 저장하게 됩니다. 

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

▶ 문제 2 :  색과 크기가 랜덤인 원을 마우스로 화면을 찍는 위치에 표시하라.  또한, 키보드의 's' 키를 누를 때 마다 저장되도록 하시오. 현재의 화면을 이미지 파일로 저장하도록 하라.

  [ 조건(hint) ]

   1. 화면 사이즈(가로x세로 픽셀) : 500 x 500 
   2.  임의의 크기 원을 위해 random( ) 함수를 사용하라.   (원의 직경(가로세로 동일) 랜덤 값은 : 20~200 값으로 하라)

       예),   - random(255) : 0~255 사이의 랜덤 값 발생

              - random(20, 200) : 20~200 사이의 랜덤 값 발생

   3.  각 원에 RGB 요소를 넣어 색상을 랜덤하게 채운 원을 출력 하라.   필요함수 : " fill ( R, G, B) "    이때, RGB의 각 값은 0~255 이다. 

   4. 이미지 저장 함수는 saveFrame( ) 함수를 사용 하고,  S 키를 누를 때마다 출력화면이 캡쳐되도록 하라 (서브루틴 함수로 구현)

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

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

void setup ( ) { 
  size(500,500); 
} 

void draw ( ) {   
}

void mousePressed ( ) { 
  float diam = random(20, 200); 
  noStroke(); 
  fill(random(100, 200), random(200), random(200, 255) ); 
  ellipse(mouseX, mouseY, diam, diam);   
}

void keyPressed ( ) { 
    if (key == 's') {
    saveFrame("images/result-###.jpg");

    }
}

 random( ) 함수를 원의 크기(직경)를 정하고, 원의 색을 정하는데 사용하였음.

images 라는 하위폴더(생략가능)를 만들고 그 아래에 'result-xxx.jpg' 라는 파일 이름으로 's'키를 누를 때 마다 xxx 자리 랜덤 숫자가 들어간 result-xxx.jpg 라는 파일을 저장하게 됩니다. 

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

【 프로세싱 기초#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) 다운로드: 
(압축 파일을 풀어서 사용하세요)

【 프로세싱 기초#22 】 PVector 자료형 활용하여 도형 그리기

 프로세싱 초기에 직선, 타원, 삼각형을 그려주는 함수에 직접 숫자를 입력하여 도형들을 그려보았다.  이번에는 PVector 자료형을 이용하여 그려보려한다.  이를 통해 PVector 자료형 활용하는 법에 대해 충분히 익힐 수 있을 것이다. 
 int, float 자료형을 기본자료형이라하고, 새롭게 등장한 PVecter 자료형은 백터 형태의 좌표를 활용할 수 있는 자료형입니다. 벡터 자료형을 사용하면, 예를 들어 움직이는 도형을 구현 할 때, 서서히 혹은 빨리 움직이고 멈추게 하는 등의 가속도를 쉽게 구현 할 수 있다.    

(참고 :  '스칼라' 와 '벡터'의 차이를 이해하면 좋은데, 스칼라는 크기만을 나타내는 물리량이지만,  벡터는 크기와 방향성을 동시에 나타낼 수 있는 물리량이다.  따라서 int, float 등은 크기값 만을 표시할 수 있는 '스칼라' 자료형 이지만, PVector는 속도, 가속도, 힘, 운동량 등을 구현해 줄 수 있는 '벡터' 자료형이다.)

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

▶ 문제  :  아래 실행 결과 화면을 PVector 자료형을 선언하여 아래 각각의 도형을 나타내어라. 

   [ 조건 :  1. 화면 사이즈(가로x세로 픽셀) : 500 x 500) , 
              2. 배경색 및 라인: background(255), strokeWeight(10)
              3. 직선, 점, 삼각형, 사각형, 타원, 호 그리기 함수, 각각 사용  ]

[참고]

 1. 점 그리기 :  point(x, y);   

 2. 선분 그리기 : line(start x, start y, end x, end y);

 3. 삼각형 그리기 : triangle(x1, y1, x2, y2, x3, y3); // 각각 세 꼭지점의 좌표

 4. 직사각형 그리기 : rect( x, y, width, height);  // x, y는 사각형 왼쪽 상단의 좌표

 5. 타원 그리기 : ellipse(center x, center y, width, height);

 6. 호 그리기 : arc(center x, center y, width, height, start angle, end angle);

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

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

int diam = 10;           // 원의 직경 변수 선언(초기값 10 pixel)
float centerX, 

PVector v1, v2, k1, k2;   // PVector 선언
void setup( ) {
  size (500, 500);
  v1 = new PVector(30, 50);    // PVector(v1.x , v1.y)
  v2 = new PVector(width, height);  // PVector(v2.x , v2.y)
  k1 = new PVector(50, 100);   // PVector(k1.x , k1.y)
  k2 = new PVector(100, 200);  // PVector(k2.x , k2.y)
  strokeWeight(10);   // 선 굵기 (pixel)
}
void draw( ) {
  noLoop();       // 루프를 반복하지 않음
  background(255);
  line (v1.x, v1.y, v2.x, v2.y); //v1과 v2의 좌표값을 이용한 선 긋기
  point(v1.x+300, k1.x*2);   // 점을 찍을 때 위치: (330, 100) 
  //삼각형 세 꼭지점 triangle(x1, y1, x2, y2, x3, y3)
  triangle(v1.x+170, v1.y, k1.x+200, k1.y, k1.x+k2.x, k2.y-100);   
  // 직사각형 그리기 rect(x, y, width, height) 
  rect(k1.x, k2.y, width/3, height/3);     
  // 타원그리기 ellipse(center x, center y, width, height);
  ellipse(k2.x+200, k2.y+100, k1.y, height/4);
  // 호그리기 arc(center x, center y, width, height, start_angle, end_angle) 
  arc(250,400, 100,100, radians(0), radians(180));
  k2.add(k1);     // k2에 k1의 벡터 좌표를 더하라~! k2=(100+50, 200+100)
  arc(k2.x, k2.y, 100,100, radians(0), radians(v1.x+v1.y+k1.y));
}

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

※ 다음 시간에 도형에 가속도를 적용해 보면, 좀 더 흥미가 생길 것이다. 

【 Processing Basic#3 】 Rain-Drop Effect (by 10 random circle)

 Last time I created a random one. We will try to generate 10 circles randomly using this principle. You will be able to realize the wonderful effect that raindrops seem to spread over a calm water surface.

[ Screen coordinates of Processing ]  - example of 100 x 100 pixel

▶ The Goal :  Create 10 circles randomly (size and position) on the screen and make them larger and larger.

   [ 조건 :  1. Screen size (horizontal x vertical pixels): 500 x 500) , 
              2. Background color and lines : background(200), stroke(0), strokeWeight(3), fill(255, 10)
              3. '10 circles' should be implemented simply using arrays and loops (for statements).
              4. Circle drawing uses 'ellipse (x, y, diam, diam)' functions  ]

▶ Quizz (execution result) 
Code to behave as follows.

▶ Program code : 
(Click image to enlarge)

int [] arrayOfDiam;         // An array declaration for the circle diameter (arrayOfDiam)
float [] arrayOfCentX, arrayOfCentY;   // Declare an array (X, Y) for the center coordinates of the circle
void setup() { 
  size(500, 500);     //   Output screen size
  background(200);   // Background value
  arrayOfDiam = new int[10];   //   Create array variables for 10 circles
  arrayOfCentX = new float[10];   // Create array variables for 10 circles
  arrayOfCentY = new float[10]; // Create array variables for 10 circles
  for (int i=0; i<10; i++) {                      // 10 circles, using for loop
    arrayOfDiam[i] = int(random(500));   // Assign initial value (random) to array vaddriable
    arrayOfCentX[i] = random(500); 
    arrayOfCentY[i] = random(500); 
  } 
  stroke(0);               //   Set Line color, thickness, fill settings
  strokeWeight(3);                    // 
  fill(255, 10);                            // 
} 
void draw() { 
  background(200);   // 
  for(int i=0; i<10; i++) {      //  Draw circles randomly using loop function
    ellipse(arrayOfCentX[i], arrayOfCentY[i], arrayOfDiam[i], arrayOfDiam[i]); 
    arrayOfDiam[i] +=2;   //  Diameter increase value of circle (pixel) 
    arrayOfDiam[i] %= width; 
 // If the diameter is equal to the screen width (width), enter the remaining value (0)
  } 
}

▶ Coding and annotation : 
( The code is zip compressed.)

▶ Video lecture :  
(Look in full screen view at 1080P) :

https://youtu.be/BGyQz1PySw4

【 프로세싱 기초#21 】 빗방울 효과 내기 (10개의 커지는 원 구현)

 지난시간 원 하나를 화면 사이즈 만큼 키워 보았다. 이 원리를 이용해서 10개의 원을 랜덤으로 생성시켜 커지도록 해보려 한다. 마치 빗방울이 잔잔한 수면위에 퍼지는 듯한 멋진 효과를 구현해볼 수 있을 것이다. 

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

▶ 문제  :  화면에 10개의 원을 랜덤(크기와 위치)으로 생성 시켜 점점 커지도록 구현 하라.

   [ 조건 :  1. 화면 사이즈(가로x세로 픽셀) : 500 x 500) , 
              2. 배경색 및 라인: background(200), stroke(0), strokeWeight(3), fill(255, 10)
              3. 10개의 원은 배열과 반복문(for문)을 이용하여 간단히 구현할 것.
              4. 원 그리기는 ellipse(x, y, diam, diam) 함수 사용  ]

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

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

int [] arrayOfDiam;         // 원의 지름값을 위한 배열 선언 (arrayOfDiam)
float [] arrayOfCentX, arrayOfCentY;    // 원의 중심 좌표를 위한 배열 (X , Y) 선언
void setup() { 
  size(500, 500);     //   출력 화면 크기 
  background(200);   //  배경화면 값 
  arrayOfDiam = new int[10];   //   10개의 원을 위한 배열 변수 생성
  arrayOfCentX = new float[10];   // 10개의 원을 위한 배열 변수 생성
  arrayOfCentY = new float[10]; // 10개의 원을 위한 배열 변수 생성
  for (int i=0; i<10; i++) {                      // 10개의 원,  for 반복문 사용
    arrayOfDiam[i] = int(random(500));   // 원의 배열 변수 값들에 초기값(랜덤)을 지정
    arrayOfCentX[i] = random(500); 
    arrayOfCentY[i] = random(500); 
  } 
  stroke(0);               //   선의 색,  굵기, 채우기 설정 
  strokeWeight(3);                    // 
  fill(255, 10);                            // 
} 
void draw() { 
  background(200);   // 
  for(int i=0; i<10; i++) {      //  원그리기 함수와 반복문을 이용해 랜덤으로 원을 그리기
    ellipse(arrayOfCentX[i], arrayOfCentY[i], arrayOfDiam[i], arrayOfDiam[i]); 
    arrayOfDiam[i] +=2;   //  원의 직경 증가 값 (pixel) 
    arrayOfDiam[i] %= width;   //  직경이 화면 폭(width)과 같아지면 나머지값(0) 을 넣어 리셋
  } 
}

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

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

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

https://youtu.be/cYJt96xzHVk

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

【 Processing Basic#2 】 'The Circle grows' by Processing!

Let's implement a 10 pixel diameter circle. In fact, one circle does not grow, but it can be processed as visually that way.

▶ The Goal  : 
 Implement 10 pixels in the middle of the screen so that the circle grows to the screen size.

1. Screen size (width x height pixels): 500 x 500)

2. Background color and lines: background (180), stroke (0), strokeWeight (5), fill (255, 20)

3. Circle drawing uses ellipse (x, y, diam, diam) function

▶ Coding result :

▶ Coding and annotation : 

int diam = 10;           // Declaration of circle diameter variable (initial value 10 pixels)
float centerX, centerY;  // Declaring a circle's center point variable

void setup() { 
  size(500, 500); 
  centerX = width/2;     // Centering the center of the screen (width)
  centerY = height/2;    // Centering the center of the screen (height)
  stroke(0);           
  strokeWeight(5);       // Thickness of line
  fill(255, 20);   // The color of the border of the circle (255) and the transparency of the internal fill (Alpha: 20)
} 
void draw() { 
  background(180);     // To prevent afterimage
  ellipse(centerX, centerY, diam, diam); 
  diam += 10;          // Increase diameter by 10 pixels
  if (diam == width) diam = 0;   // Resets the maximum size of the circle so that it does not exceed the screen size
//  diam %= width;   // When the maximum size of the circle = screen size, the remaining value (%) becomes zero.
  delay(50);             // Time delay that the circle grows
}

▶ Code Download :

▶ Video lecture :  
(Look in full screen view at 1080P)

https://youtu.be/xZo5iQvQXOI

【 프로세싱 기초#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 화질 지원)