라즈이노 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) 다운로드: 
(압축 파일을 풀어서 사용하세요)

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

【 프로세싱 기초#19 】 그림 이동하며 그리기 2

 앞선 과제에 이어, 움직이는 도형(라인)을 구현해 보려한다.  이번에는 배열이라는 요소를 사용하는데, 간단하고 효과적인 방법이므로, 잘 기억하면 좋다. 

[ 프로세싱에서의 좌표 ]

▶ 문제 1  :  선 움직이기 2
    조건 :  1. 화면 사이즈(가로x세로 픽셀) : 400 x 400) .
              2. 배경색 및 라인: background(0) . 
              3. 10개의 세로 라인을 배열을 이용하여 위치값을 주면서 그릴 것. (세로라인 그리기 : y1=0, y2=height 고정)

              4. 배열에 선의 처음 위치값을 초기 값으로 지정 해줌 (0, 40, 80, ... 360)

              5. 선의 이동할 범위를 -10~+10 사이값으로 랜덤생성시켜 적용할 것.
              6. 랜덤 값이 화면 사이즈를 벗어 나지 않도록 함(constrain (a, b, c) : a변수의 값을 b이상 c이하 값으로 함)
              7. 이동되는 느낌을 주기위해 draw() 반복 루프에, 배경을 검은색으로 줄 것 ( 'background(0)' )

▶ 실행결과 1 (동작확인):

(전체 보기, 고화질 보기로 보세요)

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

float[] arrayOfPositions; // 배열 변수의 선언
void setup() {
  size(400, 400);
  background(0);
  stroke(255);  // 라인을 흰색으로
  arrayOfPositions = new float[10]; //'10'자리 배열변수 메모리할당
  // 배열변수를 초기화하는 루틴 
  for (int i=0; i<10; i+=1) {
    arrayOfPositions[i] = width/10 * i; //"0, 40, 80, ... 360" 초기 위치값 주기
  }
}
void draw()  {
  background(0);  // 배경을 검은색으로 매번 지우지(매우지) 않으면 잔상이 남는다.
  for(int i=0; i<10; i+=1) {
    arrayOfPositions[i] += int(random(-10,10));//'±10' 범위 랜덤값 적용    
    arrayOfPositions[i] = constrain(arrayOfPositions[i], 0, width);//0~width까지 한정
  }  
  for(int i=0; i<10; i+=1) {
    line(arrayOfPositions[i], 0, arrayOfPositions[i], height); //line(x1, y1, x2, y2)
  }
  delay(300);
}

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

【 프로세싱 기초#18 】 그림 이동하며 그리기 

 이제까지는 박스에 색을 입히거나, 도형을 특정위치에 그리기만 해보았다. 이제 부터는 움직이는 도형을 구현해 볼 것이다. 프로세싱을 사용하는 주된 이유도 이런 동적움직임에 있다. 좀더 흥미롭고 재미가 있을 것이다. 

[ 직교 좌표계와 극좌표계 ]

▶ 문제 1  :  선 움직이기
    조건 :  1. 화면 사이즈(가로x세로 픽셀) : 400 x 400) , 
              2. 배경색 및 라인: background(0),  라인의 알파 값 (투명도: 20 )
              3. 라인이 화면 사이즈를 벗어 나지 않도록 함(constrain (a, b, c) : a변수의 값을 b이상 c이하 값으로 함)
              4. 새로운 라인을 그리면서 기존의 라인은 남겨 둘 것.(※그려진 라인을 이동시키는 것은 아님)

▶ 실행결과 1 (동작확인):

(전체 보기, 고화질 보기로 보세요)

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

// x 와 y 변수는 전역변수로 선언한다

float x1, y1;  // 선의 한 쪽 끝점  
float x2, y2;  // 선의 다른 끝점 

void setup() { 
  size(400, 400); 
  background(0);   
  x1 = width/2;  
  y1 = 0; 
  x2 = width/2; 
  y2 = height;  } 
void draw()  { 
  stroke(255, 255, 255, 30); //RGB값 & 30은 투명도(Alpha) 
  x1 = x1 + random(-10, 10); //-10 이상 10 미만으로 랜덤생성 
  x2 = x2 + random(-10, 10); 
  y1 = y1 + random(-10, 10); 
  y2 = y2 + random(-10, 10); 
  // 라인이 스크린을 벗어나지 않도록 함(constrain) 
  x1 = constrain(x1, 0, width); // x1값은 0~width 사이로 고정 
  x2 = constrain(x2, 0, width); 
  y1 = constrain(y1, 0, 10); 
  y2 = constrain(y2, height-10, height); 
  line(x1, y1, x2, y2); 
  delay(50); 
}

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