Skip to main content

5 posts tagged with "processing"

View All Tags

· 2 min read

Frame

frameRate 함수는 초당 frame 수를 설정하기 위해 사용

(ex : frameRate(30) 은 초당 30 frame)

기본적으로 frameRate은 60이지만 draw 함수 수행시간에 따라 달라지고 frameRate에 설정되는 값은 최대값을 의미한다.

 

Random

random 함수는 임의의 수를 생성하는데 이용되고 float 타입으로 return.

두 개의 인자로 생성되는 수의 범위 지정 가능

 

Timer

millis 함수는 프로그램 시작과 동시에 흘러가는 ms 단위의 count 값을 돌려주는데 이를 이용해서 timer 처럼 사용 가능

 

Circular

sine, cosine 연산을 위한 sin, cos 함수가 제공되며 인자는 radian, 리턴은 float 형태.

 

Translate, Rotate, Scale

좌표계 자체를 이동시키는 translate (인자는 x, y 이동하는 값)

회전 시키는 rotate (인자는 radian)

scaling을 위한 scale 함수 제공

· 2 min read

Ch.8 부터 Ch.10 까지는 각각 함수, 객체, 배열 생성과 사용에 대한 내용이 기술되어 있는데 기본 java 문법과 동일하다.

Ch.11에서 다루고 있는 확장에 대한 내용은 다른 library들을 사용하는 방법들에 대해 설명.

 

Download 가능한 library 경로

http://processing.org/reference/libraries

download 후 processing menu에서 import해 사용

 

3D

3D를 사용하기 위해서는 사용할 renderer를 선택해줘야 하며 z 좌표에 대한 값도 모든 함수에 추가된다.

화면 크기를 결정할 때 호출하는 size 함수에서 renderer를 선택한다.

(ex : size(440, 220, OPENGL)은 440x220 사이즈의 화면에서 OpenGL을 사용)

기본적으로 processing에서 2D는 JAVA2D renderer를 사용하고 있는데, quality를 낮추고 좀 더 빠르게 rendering 하고자 하면 P2D를 이용할 수 있고 3D를 위해서는 P3D 혹은 OpenGL 사용 가능

 

Image Export

현재 보여지고 있는 화면을 image 파일로 저장하기 위한 기능

saveFrame 함수를 사용하면 되는데 (인자는 저장할 파일 이름), draw 함수 내에서 사용할 경우 인자에 # (hash mark)를 붙이면 자동으로 현재의 frame number로 대체된다. 기본으로 png, jpg, tif 형태로 저장 가능.

· 4 min read

Ch.4는 변수 선언과 기본 연산, for loop에 대한 내용 (Java와 동일)

1. Ch.4에서 소개된 예약어

width : 화면의 가로 크기

height : 화면의 세로 크기

 

 

Ch.5 Response

Ch.5는 주로 interaction을 위해 알아야 하는 함수와 예약어, 방법들을 소개

mouse를 움직일 때 좌표를 알 수 있는 방법 (mouseX, mouseY)과

다른 좌표값들과의 비교 방법, keyboard 입력은 어떻게 구분할 수 있는지를 설명하고 있다.

소개된 일부 함수들은 굳이 사용이 필요없을 수도 있으나

연산의 편의성을 위해 제공하는 것으로 보임

 

1. draw 함수

화면을 구성하는 매 frame 마다 호출되는 함수

 

2. setup 함수

프로그램의 시작 시점에만 한 번 호출되는 함수 (보통 초기화에 이용)

 

3. mouseX, mouseY (예약어)

mouse의 현재 좌표를 의미함 (이동할 경우 변경됨)

 

4. background 함수

화면을 초기화하는 기능이 있으므로 draw에 이용할 경우 잔상없는 이미지 표현 가능

 

5. pmouseX, pmouseY

이전 frame에서의 mouse 좌표를 저장하고 있는 변수 (예약어)

 

6. dist 함수

이전 좌표와 현재 좌표의 거리 차이를 자동 연산하는 함수

 

7. map 함수

좌표를 수식에 의해 매번 변경해야 할 때 자동으로 매핑해주는 함수

 

Example)

float mx = map(mouseX, 0, width, 60, 180);

//의미 : mouseX가 최소 0에서 width까지 변화할 때 mx는 60에서 180까지 연산해서 할당

 

8. mousePressed

예약어로 mouse 버튼이 클릭되었는지 여부를 저장하는 변수 (boolean)

 

9. mouseButton

예약어. 마우스의 어떤 버튼이 클릭되었는지 저장하는 변수 (LEFT or CENTER or RIGHT)

 

커서의 현재 위치가 왼쪽인지 오른쪽인지 도형 내부에 있는지 외부에 있는지 알기 위해서는

각각 도형의 x, y, width, height 등의 수치와 mouseX, mouseY의 크고 작음을 비교해서 연산해야 함

 

10. keyPressed

예약어. 키보드 버튼이 눌렸는지 여부를 저장하는 변수 (boolean)

 

11. key

예약어. 눌려진 key 값을 저장하는 변수 (CODED인 경우는 특수 키로 keyCode(LEFT, RIGHT, ALT, SHIFT, ...)로 비교해야함

· 4 min read

 

 

Processing study.

교재 : Getting Started with Processing

 

Chapter 1, 2는 PDE (Processing Develop Environment) 기본사용과 Processing 소개 내용.

Chapter 3. Draw

 

Screen size가 200 x 200 이라면 좌표는 (0, 0) ~ (200, 200)까지임

 

1. Window 그리기

size(800, 600);

 

2. Point 그리기

size(800, 600);

point(240, 60);

//x = 240, y = 60

 

3. Line 그리기

size(800, 600);

line(20, 50, 420, 110);

//x1 = 20, y1 = 50, x2 = 420, y2=110 (두 좌표)

 

4. Triangle 그리기

triangle(x1, y1, x2, y2, x3, y3);

//꼭지점 세 개 좌표

 

5. Quad 그리기 (사각형)

quad(x1, y1, x2, y2, x3, y3, x4, y4);

//네 개 점의 좌표

 

6. Rectangle 그리기 (직사각형)

rect(x, y, width, height);

//x, y가 기준점, width : 기준점으로부터의 너비 (오른쪽), height : 기준점으로부터의 높이 (아래로)

 

7. Ellipse 그리기 (원 or 타원)

ellipse(x, y, width, height);

//x, y가 원점, width는 가로 지름, height는 세로 지름

 

8. Arc 그리기 (호)

arc(x, y, width, height, start, stop);

//x, y가 원점, width는 가로 지름, height는 세로 지름, start는 시작 각도(radian), end는 끝나는 지점의 각도(radian)

//시계에서 3이 가리키는 위치가 0이고 시계 반대방향으로 각이 증가함 (6시 방향 : HALF_PI, 9시 방향 : PI, ...)

//degree와 radian 변환을 위한 radians 라는 함수 제공. HALF_PI = radians(90);

 

9. Drawing Order

Layer 쌓듯이 나중에 호출한 함수로 인해 그려지는 도형이 상위에 놓임

 

10. Smooth

smooth() 함수 제공 (선의 끝을 부드럽게 만듬, 반대는 noSmooth())

 

11. Stroke weight

선 굵기를 위한 strokeWeight 함수.

strokeWeight(8); //선의 굵기가 8 pixel

 

12. Stroke 속성

strokeJoin : 선이 만나는 지점의 속성

strokeCap : 선의 시작과 끝 모양

strokeJoin(ROUND); //만나는 지점을 둥글게

strokeJoin(BEVEL); //만나는 지점을 Bevel로

strokeCap(SQUARE); //선의 시작과 끝을 사각형으로

strokeJoin(ROUND); //선의 시작과 끝을 둥글게

 

13. Color

background, fill, stroke 함수로 색상 조절 가능

Black & White는 0 ~ 255로 (0이 Black, 255가 White)

 

마찬가지로 같은 함수를 이용해 RGB 값을 순서대로 설정 가능

background(0, 26, 51); //Dark blue (R : 0, G : 26, B : 51)

 

투명도는 fill, stroke 함수로 설정 가능하며 0 ~ 255의 값으로 설정 (0이 투명, 255가 불투명)

 

14. Custom shapes

임의의 도형을 그리기 위해 beginShape, endShape, vertex 함수를 사용

begineShape로 도형을 그리는 시작을 알리고 vertex(x, y)로 점을 그림, 완료되면 endShape를 호출