Processing 3 || #1 삼각함수를 이용한 도형 그리기

프로세싱은 미디어아트 및 교육을 위한 오픈소스 프로그래밍 언어이다.

언어 자체의 문법은 Java 기반이지만, 객체 지향형 프로그래밍 개념이 가려져 보이지 않게 되어있어서,

얼핏보면 C언어와 상당히 유사해보인다.

프로세싱은, 코드 단 몇 줄만으로도 시각적인 표현이 가능하다는데에 큰 장점이 있다.

또한, 함수 래퍼런스 사이트도 존재해서 많은 함수들을 혼자 공부하기에도 충분하다.

https://processing.org/reference/

도형그리기를 시작하기 전에 프로세싱의 구조에 대해 간단히 알아보자.

프로세싱 3 프로그램 화면은 이렇게 생겼다.

생긴 모양이나, 사용하는 방법이나 아두이노와 유사한 감이 꽤 있다.

프로세싱에는 크게 setup() 함수와 draw()함수가 있다.

setup()함수는 프로그램이 시작할 때 한번만, draw()함수는 무한루프를 돌며 계속 실행된다.

setup()함수에서만 실행이 가능한 함수도 여럿 존재한다.

프로세싱에서 사각형을 그릴 수 있는 함수는 대표적으로 rect와 quad가 있다.

rect는 rext(x,y,width,height) 의 꼴이며, 한 좌표 (x,y)를 기준으로 x축 y축에 나란한 사각형을 그린다.

quad는 quad(x1,y1,x2,y2,x3,y3,x4,y4)의 꼴이며, 4개의 모든 꼭짓점의 좌표를 입력받아 이를 잇는 함수이다.

이는 삼각함수를 이용해 정사각형의 네 꼭짓점 좌표를 구한 모습이다.

물론 프로세싱에는 cos와 sin함수가 내장되어있어서 그냥 사용하기만 하면 된다.

이 좌표들을 그냥 quad에 대입하기만 하면 사각형이 그려진다.

배열이나 반복문 등도 프로세싱에서도 역시나 건재하기에 사용하였다.

네 점의 좌표를 삼각함수로 구하고, 이를 quad함수로 사각형으로 그려낸 모습이다.

다음으로는 이 사각형을 회전시킬것이다.

300,300을 중점으로 한 반지름이 150인 원에서 점 4개를 정해서 구했던 위의 좌표에서,

cos과 sin의 값에 계속해서 증가하는 값만 더해주면 된다.

추가된 함수는 setup()의 frameRate(60);과 draw()에서 float m=frameCount;이다.

frameRate(x)함수는 말그대로 x fps화면으로 만든다는 소리이다.

60을 넣으면 1를 60개로 쪼개 1/60초를 1프레임으로 사용하겠다는 의미이다.

frameCount는 프로그램이 시작할 때부터 frame을 세는 함수이다.

즉 지금의 경우 1초에 60씩 증가하므로, cos함수 안에 넣으면 매초 사각형이 60도 회전하게 된다.

실행한 화면의 모습이다.

삼각함수로 간단히 사각형을 그려보았고, 나는 이를 좀 더 응용해 별을 그리는 함수를 만들었다.

void setup()
{
  size(600,600);
  background(255);
  frameRate(60);
}
void draw()
{
  float m=frameCount;
  star(m,5,50,50,2);
}
void star(float m,int num,int rad1,int rad2,int speed)
{
  clear();
  background(255);
  for (int i=0;i<num;i++)
  {
  line(300+rad1*cos(radians(m*speed+360/num*i)),300+rad1*sin(radians(m*speed+360/num*i)),300+(rad1+rad2)*cos(radians(m*speed+360/num*(i)+360/num/2)),300+(rad1+rad2)*sin(radians(m*speed+360/num*i+360/num/2)));
  line(300+(rad1+rad2)*cos(radians(m*speed+360/num*i+360/num/2)),300+(rad1+rad2)*sin(radians(m*speed+360/num*i+360/num/2)),300+rad1*cos(radians(m*speed+360/num*(i+1))),300+rad1*sin(radians(m*speed+360/num*(i+1))));
  stroke(100);
  strokeWeight(5);
  }
}

사진에서 코드가 짤린다. 좌표를 지정해주는 과정이 상당히 길기 때문...

아직까지 프로세싱을 배우기 시작한지 얼마 되질 않아서인지 코드가 상당히 무식하다.

간단히, STAR라는 함수를 만들었는데, 이 함수는 인자를 여러개 받는다.

크게 별의 뾰족점 개수, 별 가운데 원의 반지름, 뾰족점 반지름, 돌아가는 속도가 있다.

가령 5개의 뾰족점, 원반지름 50, 뾰족점반지름 100, 속도는 매초 120도를 입력하면

이런 도형이 그려지게 된다.

원리는 사각형 그리기와 크게 다른점이 없다.

원을 2개 그리고, 그 원에서 원하는 뾰족점 개수만큼 균일하게 간격을 나눠 점을 찍고,

모든 점들을 선으로 적절히 잇는다.

그리고 그 점들을 똑같이 회전시킨다.

프로세싱은 이처럼 빠르게 그림을 그릴 수 있어서 이런 부분에서는 괜찮은 언어라고 생각된다.

시각적으로 바로바로 나타나 재미있기도 하고, 어떻게 활용하냐에 따라 정말 다양한 그림들이 나오기 때문.

앞으로 할 공부들이 기대가 된다.