UNIST 로봇동아리 피노키오 프로세싱 수업 1강: 프로세싱이란?

1. Processing…
피노키오 13 교육부 김송현

2. Processing:
▪https://processing.org/
▪미디어 아트/교육용으로 사용되는 오픈소스 프로그래밍 언어
▪ Java 기반이지만, 객체지향 개념을 몰라도 쉽게 쓸 수 있다
▪ Python/CoffieScript/JavaScript 등으로도 작성 가능
▪시리얼 통신 가능!!!
▪ 아두이노와 연동할 수 있다

3. Before Beginning:
▪Java와 C의 다른 점
▪ 주소 개념을 사용하지 않는다 == 포인터가 없다
▪ 배열을 선언할 때
▪ int arr1[3];(x) int[] arr1 = new int[3];(o)
▪ int arr2[3][3];(x) int[][] arr2 = new int[3][3];(o)
▪ 자기보다 큰 자료형의 값을 대입할 땐 명시적 형 변환 필수!
▪ long num1; int num2 = num1; (x)
▪ long num1; int num2 = (int)num1; (o)
▪ bool(x) boolean(o)
▪ 논리 연산에는 무조건 boolean만 사용해야 한다
▪ 정수형과 호환 안 됨(시무룩)
▪ const 대신 final

4. Before Beginning:
▪좌표 읽는 법
x
y
O
← y좌표의 방향에 주의!
(a, b)
a
b

5. 0th Program:
▪아무것도 안 한다

6. 1st Program:
▪원하는 크기/배경색의 창을 띄워보자
void setup()
{
size(600, 400);
background(20, 20, 20);
}

7. 1st Program:

8. 1st Program:
▪void setup()
▪ 아두이노의 setup()과 비슷한 기능
▪ 프로그램이 시작될 때 단 한 번 실행됨
▪ 초기화할 때 사용함
▪void size(width, height)
▪ 화면의 사이즈를 지정해줄 수 있다(단위: pixel)
▪void background(R, G, B)
▪ 화면의 배경색을 설정할 수 있다(0<=R,G,B<=255, 정수)

9. 2nd Program:
▪ 화면 정중앙에 사각형을 그려보자
void setup()
{
size(600, 400);
rectMode(CENTER);
}
void draw()
{
rect(width/2, height/2, 100, 100);
// draw()를 사용하긴 했지만, 여기서는 setup()에 작성해도 상관없다
}

10. 2nd Program:

11. 2nd Program:
▪width, height
▪ 화면 사이즈에 따라 알아서 값이 바뀌는 시스템 변수
▪void draw()
▪ 아두이노의 loop()와 비슷
▪void rect(x, y, w, h)
▪ 직사각형 그리는 함수
▪ x, y: 원점 좌표
▪ w, h: 너비, 높이
▪ 사실 옵션이 더 있는데, 패스합니다…

12. 2nd Program:
▪void rectMode(mode)
▪ mode에 따라 rect()의 표현방식이 달라진다
↑ 똑같은 프로그램을 mode만 바꿔서 그려보았다
CENTER CORNER
(기본값)
CORNERS
RADIUS
h
w w
h
w
h
원점(x, y)
다른 점(w, h)

13. 2nd Program: Going Further
▪도형의 윤곽선을 없애고 싶어요!
▪ rect()를 사용하기 전에 noStroke();를 추가해 보세요
▪윤곽선 말고 안쪽 색을 없애고 싶어요!
▪ rect()를 사용하기 전에 noFill();을 추가해 보세요
▪ noStroke();와 같이 쓰지 않도록 주의!
▪도형의 색깔을 바꾸고 싶어요!
▪ rect()를 사용하기 전에 fill(R, G, B, opacity);를 추가해 보세요
▪ 0<=opacity<=255 (값이 작을수록 투명해짐, 실수)
▪선 색깔은 바꿀 수 없나요?
▪ rect()를 사용하기 전에 stroke(R, G, B, opacity);를 추가해 보세요

14. 2nd Program: Going Further
▪사각형 말고 다른 건 못 그리나요?
▪ 그릴 수 있습니다. 레퍼런스를 참조하세요
▪ 특히 quad()나 ellipse(), arc() 정도는 알아두는 것이 좋습니다
▪ quad(): 그냥 사각형(직사각형 말고)
▪ ellipse(): 원/타원
▪ arc(): 부채꼴/활꼴
▪사각형 그릴 때는 몰랐는데, 원을 그리니까 선이 깨져요ㅠ
▪ smooth() 함수를 이용해 보세요. 반대는 noSmooth()입니다

15. Assignment:
▪이 정도는 껌인 여러분을 위한 과제:
이거 해 보셈ㅋ
(단, 너비/높이가 달라져도 똑같이 동작할 것!)

16. Assignment:
▪아직까진 할만한 여러분을 위한 과제:
이건 좀 어려울걸
(hint : 세 부분으로 나누어 생각해 보자)