프로세싱으로 도형 (Shapes), 색 (Color), 문자 및 숫자 입력하기

메카 2017-03-17 (금) 09:11 1년전 1834  
프로세싱이 설치되었으니, 도형, , 문자 입력에 대해서 배워보겠습니다. 영상처리를 하게 되면, 이미지 위에 도형을 넣는다거나 특정 부분에 색을 변경하거나, 또는 숫자 및 문자를 입력하는 경우가 많습니다. 간단한 예로, 영화 아이언맨의 자비스가 보여주는 화면을 보면 다양한 그래픽적 효과와 숫자 및 문자를 확인할 수 있습니다.

32c0322f854e201bfaa595bd77111dcf_1489709
 

출처: 영화 아이언맨

 

프로세싱의 기본 골격은 void setup()void draw()입니다. 아두이노와 마찬가지로 setup() 함수는 한번 실행이 되고, void draw()는 반복적으로 실행이 되는 함수입니다.

32c0322f854e201bfaa595bd77111dcf_1489709
 

 

void setup()

{

  size(640,480);

}

 

void draw()

{

  fill(255, 0, 0);

  line(20, 20, 120, 120);

  fill(0, 255, 0);

  rect(140, 20, 100, 100);

  fill(0, 0, 255);

  ellipse(310, 70, 100, 100);

  textSize(20);

  fill(255, 0, 0);

  text("MECHASOLUTION", 400, 80);

}

 

먼저, setup() 함수에 있는 size(640, 480);은 윈도우창의 사이즈를 가로x세로 640x480을 의미합니다.

Fill() 함수는 다음에 오는 도형 및 텍스트의 색상을 나타내며 R, G, B 컬러로 0~255까지 숫자로 표현하라 수 있습니다. Line, rect, ellipse는 대표적인 도형을 나타내는 함수이며, text() 함수는 문자 및 숫자를 특정 위치에 출력할 수 있도록 합니다.

왼쪽 상단의 실행 버튼을 누르게 되면 640x480 사이즈의 새 창에 출력된 도형과 텍스트를 확인할 수 있습니다. 이 때, draw() 함수는 내장된 함수로 계속 렌더링(rendering)을 하여 이미지를 반복적으로 출력하게 됩니다. 만약, 이미지 좌표가 이동한다면 움직이는 애니매이션도 나타낼 수 있습니다.

 

32c0322f854e201bfaa595bd77111dcf_1489709


모바일 버전으로 보기