프로세싱을 활용해서 도형(원, 선) 그리기

프로세싱은 그래픽 적인 요소가 뛰어나다.

그리고 언어 기반은 자바이다.

그리고 API와 마찬가지로 화면 창의 좌측 상단좌표가 원점이다.

아두이노와 통신도 가능하다. 

다운받는 방법은 구글에서 프로세싱이라고 검색하고 홈페이지에서 다운 받으면 된다.

주소는 여기이다.

processing.org/download/

 

그리고 자신의 OS에 맞게 설치를 하면 된다.

원하는 위치에 압축을 풀고 폴더 내로 들어가 보자.

위와 같은 파일이 보일 것이다. 이 파일을 실행하자.

아래와 같은 창이 뜨는데, 아두이노 스케치와 많이 유사함을 볼 수 있다.

이 곳에 코딩을 하면 된다.

 

 

임의의 위치에 원 그리기

원의 반지름을 50이라고 가정한다.

ellipse함수는 타원을 그리는 함수인데,

첫 두 매개변수는 렌더할 위치를 의미하는데 이 위치는 원의 좌측 상단을 의미하고

두 번째 두 매개변수는 이 좌측상단좌표를 중심으로 가로와 세로 사이즈를 의미한다.

두 번째 두 매개변수를 (100,100)으로 설정하면 이는 원을 그릴 수 있다.

소스 코드

void setup()
{
  size(800,400);  //  set size width and height. render screen
}

int x = 0;  //  left x pos of ellipse
int y;      //  left y pos of ellipse

void draw()
{
  background(250);
  
  ellipse(random(50,750),random(50,350),100,100);
  
  delay(20);
}

 

 

직선을 그리기

직선을 그리는 함수는 line함수로 렌더를 한다.

소스 코드

int x = 0;

void setup()
{
  size(800,400);  //  set size width and height. render screen
}

void draw()
{
  background(250);
  
  line(200,300, 200 + x,300);
  
  x += 10;
  
  if (x == 200)
    x = 0;
  
  delay(100);
}

 

 

직선을 회전 원운동하게 만들기

원의 방정식을 반지름과 각으로 매개변수화하면,

x = r * cos(theta)

y = r * sin(theta)

와 같다.

소스 코드

final int centerX = 200;  //  center x pos of circle
final int centerY = 100;  //  center y pos of circle
final int radius = 100;
float theta = 0;

void setup()
{
  size(800,400);  //  set size width and height. render screen
}

void draw()
{
  background(250);
  
  line(centerX,centerY,
  centerX + radius*cos(theta),
  centerY + radius*sin(theta)
  );
  
  //  rotate theta
  theta += 5;
  
  if (theta > 360)
      theta -= 360;
      
  delay(100);
}

 

아래의 소스도 분석해보고 결과를 예측해보자.

소스 코드

import processing.serial.*;

Serial port;

int x1 = 10;    //  constant x pos
int y1 = 300;   //  constant y pos

int x2 = 10;    //  cur x pos
int y2 = 300;   //  cur y pos

void setup()
{
  size(800,400);
  port = new Serial(this, "COM6", 9600);
  line(x1, y1, x2, y2);
}

void draw()
{
  x2 += 1;    //  shift right like time
  y2 -= 100;
  line(x1, y1, x2, y2);
  delay(10);
  
  x2 += 1;    //  shift right like time
  y2 += 100;
  line(x1, y1, x2, y2);
  delay(10);
}