라즈이노 iOT

【 프로세싱 기초 #02】 원, 타원 그리기 II

▶ 문제 : 가로 300 x 세로 200 픽셀 영역을(그림영역) 설정하고  100,100 좌표에 30x30 픽셀의 원을 그려라.

▶ 프로그램(code) : 

▶ 다양한 색의 원 그리기 :

  fill() 채우기 함수를 이용하여 도형 내부에 명암을 입혀 보자. 

▶ 실행결과 :

 ▶ 코드 설명 : 

   -   fill() 함수는 0~255 사이의 값으로 명암을 조절 할 수 있다. 

 ▶ 코드(PDE) 다운로드 :

sketch_02_draw_circle_fill.pde

【 프로세싱 기초 #01 】 원, 타원그리기 

프로세싱 언어가 얼마나 쉽고 간결한지 아래처럼 단 한 줄 만으로도 화면에 타원을 그릴 수 있다. 

▶ 원(타원) 그리기 (실행결과) :

▶ 프로그램(code) : 

 프로세싱은 크게 두가지 형태로 나뉜다, 위처럼 간단히 처리된 결과만 보여주는 정적모드(static mode) 와 아래에 소개할 동적모드(active mode)로 나뉜다.

▶ 동적모드 프로그래밍 :

  동적모드는 출력 결과물이 동적으로 계속 움직이거나, 상호작용이 가능 하도록 작성하는 모드(mode) 이다. 이는 아두이노의 스케치 작성모드와 유사하다. 아두이노 또한 설정 영역과 계속 반복 실행되는 루틴을 가지고 있다.

우선 동적모드로 원만 그려보자 

 어디서 많이 본 것 같지 않은가?

그렇다 아두이노 스케치의 작성 형태와 매우 유사하다.  

그러기에 프로세싱을 부담없이 시작할 수 있다. 

 그리고 아래와 같은 결과를 얻을 수 있다.

 자 이제 ,  동적모드로 타원을 움직여 보도록 하자.

마우스의 움직임을(위치) 좌표로 해서 움직여 볼 것이다.

 ▶ 코드 설명 : 

   -   size (200, 200);  // 그림 영역의 크기 (가로 세로 200 픽셀)

   -   ellipse(mouseX, mouseY, 80, 80);   // 타원 그리기, mouseX : 마우스의 X좌표,  mouseY : 마우스의 Y 좌표,   가로 세로 크기가 80, 80 픽셀인 원을 그려라.

 ▶ 실행결과(동영상) :

 마우스의 움직이는 좌표에 따라 원이 이동하고 있다(실은, 새로운 원이 계속 그려지고 있음)