프로세싱에 대한 이해하기(기초)

1. PROCESSING
이해하기
Moon Yong Joon

2. PROCESSING
설치
Moon Yong Joon

3. Windows 설치

4. 설치 순서 1: 다운로드
다운로드를 받고 압축을 품

5. 설치 순서 2: c 디렉토리 복사
다운로드를 받고 압축을 풀린것을 C 디렉토리에
복사

6. 설치 순서 3: 메뉴 구성
Processing을 생행하면 processing 화면이 실행
됨
로직을 구현
하기 실행버
튼을 누르면
display
window가
실행

7. 설치 순서 4: 원그리기 실행
ellipse()함수를 이용해서 좌측으로 50, 아래로
50, 폭과 높이가 80인 원을 그림
실행 버튼이
나 Ctrl+R
로 실행

8. 설치 순서 5:실행 중단
Processing을 생행하면 processing 화면이 실행
됨
로직이 실행
을 중단하면
display
window가
사라짐

9. 탭 이용하기

10. tab 기능
Tab은 코드를 분산해서 입력할 수 있게 만든 기
능
aaa 입력하면 tab 이 생김

11. 라이브러리 추가 설치

12. 라이브러리 설치 1
스케치 내의 내부 라이러리에서 라이브러리 추가
하기 선택

13. 라이브러리 설치 2
추가할 라이브러리를 검색해고 더블클릭하여 설
치가 됨

14. 모두 추가: 다른 언어 사용
Java이외의 언어로 사용시 Mode 추가 가능

15. 참고 사이트

16. 참고 사이트
http://learningprocessing.com/examples/

17. 참고 사이트
file:///C:/processing-
3.1.1/modes/java/reference/index.html

18. 참고 사이트: p5.js
자바스크립트 버전일 경우는 이를 설치해서 사
용하면 됨

19. PROCESSING
맛보기
Moon Yong Joon

20. 픽셀 이해하기

21. pixel 이해하기(2차원)
화면은 x 축과 y축을 기준으로 구성됨

22. pixel 이해하기(2차원) 점 예시
화면에서 점을 확인하기

23. pixel 이해하기(2차원) 선 예시
화면은 두점 A, B를 만나는 선을 그리기

24. pixel 이해하기(3차원)
화면은 x 축, y축, -z축을 기준으로 구성됨
2차원 3차원

25. 프로그램 구조 이해하기

26. 함수 호출
size(width, height)와 background(0) 호출시
하면 display window가 검은색으로 하나

27. 변수 처리
변수를 정해서 함수의 파라미터로 전달

28. 산식 처리
변수를 정해서 산식을 이용해서 변수를 변경후
처리

29. 실행환경 구조 알기

30. Processing 작동원리
프로그램을 호출하면 setup()함수를 한번 호출
한 후에 draw()함수를 지속적으로 호출 처리
setup()
draw()
1초에 60번 호출
프로그램 모듈 호출

31. setup 함수 : 작동원리
프로그램 시작 시 설정 함수를 한번 실행하여 실
행환경을 만듬
프로그램에 대한 하나의
설정 () 함수가 될 수 있
으며 초기 실행 후 다시
호출 할 수 없음
같은 화면 크기의 초기
환경 속성을 정의하고 프
로그램이 시작 등의 이미
지 및 글꼴 등의 미디어
를 로드하는 데 사용.

32. setup() 예시
setup 함수는 display window 세팅에 활용

33. draw 함수 : 작동원리
draw 함수를기본적을 재귀순환 호출을 처리
재귀호출해서 계속적으
로 내부 로직을 처리해서
console 창에 출력을 남
긴다

34. draw 함수 예시
draw함수를 사용해 출력하면 display window
에 출력결과가 나옴
# 변수 정의
타입 변수명 = 초기값;
타입 변수명;
변수명 = 초기값;

35. display window 생성

36. size 함수
size(width, height)를 주고 실행하면 display
window가 실행됨

37. background 함수 : 흑백
background(명도)는 0 ~ 255까지를 줄 수 있어
50을 주고 실행 0은 검은색, 255는 하얀색

38. background 함수: RGB
background(R,G,B)는 RGB를 줄 수 있어 Red를
주고 실행

39. 도형 그리기

40. rect 함수 : 사각형 하나 그리기
사각형 그리기(rect(x,y,width,height))
Y측
x측
(0,0)
(20,20)

41. ellipse 함수 : 원 그리기
원 그리기(ellipse(x,y,width,height))
Y측
x측
(0,0)
(20,20)

42. ellipse함수 : 2개의 원그리기
원에 대한 중심 좌표 이해하기 y좌표가 -100은
현재 좌표의 반대 방향
(278, -100)
(120,100)
(412, 60)

43. 출력 순서

44. 도형 위에 텍스트 처리
processing에서 Hello World를 출력

45. 도형 출력 순서
로직이 작성하는 순서대로 그림이 그려지므로
나중에 그린게 더 앞에 보임

46. 변수를 이용해서 변화시키기

47. Global 변수 지정 :
변수는 global로 지정되어야 하므로 setup과
draw 함수 밖에 지정

48. 변수 활용 : 위치 변경
변수를 이용해서 위치를 바꾸면서 도형을 그리
기

49. 변수 활용 : 속도 조정 int
좌표에 대해 변수로 정해 차이를 조정

50. 변수 활용 : 속도 조정 float
좌표에 대해 변수로 float으로 차이를 조정하므
로 더 부드럽게 움직임

51. 변수 활용 : 위치 재조정
width, height 범위를 벗어날 경우 내부로 조정
처리
범위가 오버할 경우 반대(-) 처리

52. 투명도 조정
fill로 첫번째 사각형에 색상과 투명도를 조정하여
화면을 조금 투명한 흰색으로 변경

53. Console에 출력하기

54. console 창 출력 : println
println 함수를 이용해서 출력하면 console 창으
로 출력이 됨

55. console 창 출력 : print
한줄로 console창에 출력

56. console 창 출력 : printArray
Array에 대해 console창에 index와 값이 라인
별로 출력

57. 한번 실행 하기

58. 한번 실행하기
size 함수를 이용해서 실행창 크기를 지정

59. 한번만 실행하기 : noLoop
setup함수 내에 noLoop()를 실행하면 draw함
수가 한번만 실행됨

60. 반복 실행하기

61. 반복해서 실행하기 :event 처리
mousePressed함수에 noLoop를 하면 실행창
에 마우스를 누르면 멈추고 release하면 다시 실
행

62. 반복해서 실행하기 : noLoop/loop
setup함수 내에 noLoop()를 실행하면 draw함수가
작동하지 않으면 마우스 작동 event가 행해지면
loop 처리

63. 반복해서 실행하기 : redraw
setup함수 내에 noLoop()를 실행하면 draw함수가
작동하지 않으면 마우스 작동 event가 행해지면
redraw 함수 처리
Mouse를 클릭할
때마다 선이 좌측
으로 이동

64. 실행 후 종료하기

65. 실행 후 종료하기: exit()
exit 함수를 이용해서 실행한 후 특정 이벤트 처
리시 종료처리
결과창에 마우
스를 실행하면
실행창이 닫힘

66. PROCESSING
문법적 특징
Moon Yong Joon

67. Processing 특징

68. 언어의 특징 : 기호
JVM상에서 작동하므로 Java 언어의 특징을 그대
로 사용
문장 끝
{ } (brace) 처리, 문장끝에 세
미콜론은 붙이지 않는다.
복합 문장
; (세미콜론) 처리

69. 언어의 특징 : 함수와 객체
자바 언어와 다른 점은 함수를 기본으로 제공
함수
Class 정의 후 new를 이용해
서 객체를 생성해서 사용
객체
기본 내장 함수들을 제공하며
함수를 정의 후에 사용 가능

70. 언어의 특징 : 재귀 loop
함수형 언어처럼 재귀호출로 실행하므로 loop를
조정할 수 있도록 설정됨
Draw 함수
noLoop, loop로 순환 제어
기능 구현 가능
Loop 제어
Draw 함수가 지정되면 기본
재귀호출로 순환 처리

71. 변수 정의 및 초기화

72. 변수 정의 및 초기화
변수를 정의하고 사용하려면 정의하고 초기화처
리가 필요
# 변수 정의
타입 변수명 = 초기값;
타입 변수명;
변수명 = 초기값;

73. 함수정의

74. 함수 정의 및 호출
함수나 메소드 정의 후에 호출해서 처리
# 함수 정의
Return Data Type 함수명(파라미터) {
Return 결과값
}
# 함수 호출
함수명(인자);

75. 클래스 정의

76. 클래스 정의
클래스는 속성, 생성자, 메소드를 정의 함
class ClassName {
속성들;
생성자;
메소드;
}
class HLine {
float ypos, speed;
HLine (float y, float s) {
ypos = y; speed = s;
}
void update() {
ypos += speed;
if (ypos > height) {
ypos = 0;
}
line(0, ypos, width, ypos);
}
}

77. 클래스 생성자
클래스를 객체로 만들어서 활용
변수 타입 변수명 = new 생성자
(파라미터)
// Declare and construct two objects (h1, h2)
// from the class HLine
HLine h1 = new HLine(20, 2.0);
HLine h2 = new HLine(50, 2.5);

78. 클래스 속성 사용하기
클래스를 객체로 만들고 객체의 속성과 메소드를 호
출해서 활용
객체명.속성
객체명.메소드
// Declare and construct two objects (h1, h2)
// from the class HLine
HLine h1 = new HLine(20, 2.0);
HLine h2 = new HLine(50, 2.5);
void setup()
{
size(200, 200);
frameRate(30);
}
void draw() {
background(204);
h1.update();
h2.update();
}

79. PROCESSING
문법 : 기호, 키워드,
연산자
Moon Yong Joon

80. 주요 기호

81. ( ) : 표현식, 함수 파라미터
표현식 묶거나 함수 파라미터 처리에 사용

82. , : 변수선언, array, 함수 파라미터
변수 선언이나 array 또는 함수 파라미터

83. . : 객체 속성 호출
객체 속성 호출
Class 정의
객체 호출
객체 생성

84. 주석
line/mulitline과 doc 주석을 구분해서 사용

85. ; : 문장의 끝 표현
모든 문장의 끝을 ;(semi-colon)으로 표시해야
함

86. = : 할당
문장에서 할당연산자로 사용

87. [ ] : array 정의 및 접근
array 정의 및 접근을 위해 사용

88. { }: array 할당 및 복합문 정의
array 할당 및 함수, 클래스 등 복합문을 만들 때
사용

89. Keyword

90. true/false
boolean 타입의 값으로 키워드로 지정해서 사용

91. void : return 값이 없음
함수 실행시 실제 결과값이 없을 경우 사용되는
키워드

92. private/public
클래스 내의 속성과 메소드에 대한 접근을 정의
할 때 사용

93. final
값, 클래스 또는 메소드가 변경 될 수 없는 상태로 사용하는 키
워드
final 변수는 프로그램 내에서 변경되지 않는 상수로 사용
final 클래스는 하위 클래스로 사용할 수 없고,
함수나 메소드를 정의에 사용하면 서브 클래스에 의해 오버라이
드 (override) 할 수 없음

94. return : 함수나 메소드 결과값
값내부의 함수나 메소드에 대한 결고값을 처리.
Return을 사용시 void 대신 결과값을 함수명 앞
에 정의해야 함

95. import : 라이브러리 모듈
processing 내부의 video 라이브러리를 로딩

96. class : 클래스 정의
클래스의 선언을 나타내기 위해 사용
클래스 이름의 첫 글자는 일반적으로 다른 종류의 변수와
구분하기 위해 대문자
클래스 정의

97. static : 클래스/클래스 멤버
클래스가 객체 정의없이 사용이 가능하도록 사용
하는 키워드
클래스 정의

98. extends : 클래스의 상속
클래스를 상속할 경우 상속되는 클래스를 위해
정의

99. implements: 인터페이스 구현
interface에 대한 클래스 내부에 정의시 사용

100. new: 새로운 객체 생성 하기
새로운 객체를 생성하려면 new와 생성자를 같이
사용함
새로운 객체
를 생성

101. this: 현재 객체 참조
this 는 video 모듈이 객체를 참조생성

102. super: 부모 객체 참조
class 상속일 경우 부모 클래스 참조

103. try/catch: 오류처리
오류, 예외 처리를 위해 작성하는 키워드

104. 연산자

105. 산술연사자
두 개의 표현식을 산술한 결과를 표현
% Module
* multiply
*= multiply assign
+ addition
++ increment
>= greater than or equal to
+= add assign
- minus
-- decrement
-= subtract assign
/ divide
/= divide assign

106. 관계연사자
두 개의 표현식을 비교
!= inequality
< less than
<= less than or equal to
== equality
> greater than
>= greater than or equal to

107. 논리연사자
두 개의 표현식을 논리적으로 판단
! logical NOT
&& logical AND
|| logical OR

108. 비트연사자
두 개의 표현식을 바이너리 연산
& bitwise AND
<< left shift
>> right shift
| bitwise OR

109. 제어문

110. ? 문
조건식을 판단해서 참과 거짓을 판단해서 실행하
는 문
test ? expression1 : expression2
int s = 0;
for (int i = 5; i < 100; i += 5) {
s = (i < 50) ? 0 : 255;
stroke(s);
line(30, i, 80, i);
}

111. if 구문 처리
변수를 정해서 산식을 이용해서 변수를 변경후
처리
if(표현식) {
Statements;
}
if(표현식) {
Statements;
} else if (표현식) {
statements;
}

112. if 문(단일)
조건식을 판단해서 참일 경우만 처리
if (test) {
statements
}
for (int i = 5; i < height; i += 5) {
stroke(255); // Set the color to white
if (i < 35) {
// When 'i' is less than 35...
stroke(0);
//...set the color to black
}
line(30, i, 80, i);
}

113. else 문(복합조건)
조건식을 판단하고 거짓이면 else문을 다시 판단
하면 처리
if (expression) {
statements
} else if (expression) {
statements
} else {
statements
}
for (int i = 5; i < 95; i += 5) {
if (i < 35) {
line(30, i, 80, i);
} else if (i < 65) {
line(20, i, 90, i);
} else {
line(0, i, 100, i);
}
}

114. switch 문(복합조건)
조건식을 판단해서 조건이 맞는 case를 처리되나
없을 경우는 default에 정의된 것을 처리
switch(expression) {
case label:
statements
case label: // Optional
statements
default:
statements
}
char letter = 'N';
switch(letter) {
case 'A':
println("Alpha"); // Does not execute
break;
case 'B':
println("Bravo"); // Does not execute
break;
default: // Default executes if the case labels
println("None"); // don't match the switch parameter
break;
}

115. break, continue 문
순환문 및 제어문에서 로직을 중단할 것인지 계
속할 것인지에 따라 break/continue문을 이용
for (int i = 0; i < 100; i += 10) {
if (i == 70) { // If 'i' is 70,
continue; // skip to the next iteration,
} // therefore not drawing the line.
line(i, 0, i, height);
}

116. 순환문

117. for 문
조건식에 따라 순환하는 것과 array를 순환하는
2가지
for (init; test; update) {
statements
}
for (datatype element : array) {
statements
}
for (int i = 0; i < 40; i = i+1) {
line(30, i, 80, i);
}
int[] nums = { 5, 4, 3, 2, 1 };
for (int i : nums) {
println(i);
}

118. for 문 이해
시작 조건, 테스트 조건, 업데이트조건이 참일 경
우 문장이 처리되고 거짓일때는 종료

119. for 문 예시 : 단일 순환
일렬로 나열된 것을 for문으로 순환을 처리

120. for 문 예시 : 2 개 순환
높이와 너비에 각각 for문으로 처리

121. for 문 예시 : 중첩 순환
이중으로 중첩된 for문에 대한 처리

122. while 문
조건식에 따라 순환
while (expression) {
statements
}
int i = 0;
while (i < 80) {
line(30, i, 80, i);
i = i + 5;
}

123. PROCESSING
문법 : 데이터 타입
Moon Yong Joon

124. 기본 데이터 타입

125. null
데이터 타입이 없음. 특히 array 선언하고 할당
을 안 할 경우 null 값을 갖음

126. boolean
boolean은 true와 false로 구성된 데이터 타입

127. byte
127에서 -128에 숫자 값을 저장하는 정보의 8
비트 값을 처리하기 위한 타입

128. character
각 문자의 길이는 두 바이트 (16 비트)이며 작은
따옴표로 주변에 의해 구별된다. 문자 이스케이
프는 또한 문자로 저장

129. color
색상 값을 저장하기 위한 데이터 유형.
색상은 GET ()와 color() 또는 # FFCC00 또는
0xFFFFCCOO으로 16 진법을 사용하여 직접 지정
가능
색상값으로 할당 가능

130. float
부동 소수점 숫자 3.40282347E + 38만큼 크고
-3.40282347E + 38 정도로 낮을 수있다. 그들
은 정보는 32 비트 (4 바이트)로 저장하는 데이터
타입

131. double
float에 저장 될 수있는 것보다 64 비트 값을 저
장하는 데이터 타입

132. int
소수점이없는 숫자 정수이며 2,147,483,647만
큼 크고 -2,147,483,648 작은 값을 32 비트의
정보로 저장하는 데이터 타입

133. long
9,223,372,036,854,775,808 최소 값 (64 비트
저장) 9,223,372,036,854,775,807의 최대 값
을 갖는 데이터 타입

134. 타입변환 내장함수

135. binary()
데이터 타입을 바이너리 타입으로 변경, 함수호
출시 기준을 주면(16진수, 8진수로 변환이 가능)

136. boolean()
문자열 객체를 받아서 boolean 타입으로 변환

137. byte()
boolean, byte, char, color, double, float, int,
,long 가능하며 -128 and 127이 값으로 변환

138. char()
boolean, byte, char, color, double, float, int,
,long 가능하며 대신 문자 표현이어야 함

139. float()
문자열(숫자값), 숫자에 대한 값 변환

140. hex()
hex값으로 전환가능하고 두번째 인자에 숫자표
현 자리수 값을 넣을 수 있음
6자리 출력
표시

141. int()
문자열(숫자값), 숫자에 대한 값 변환

142. str()
숫자, boolean, 문자에 대해 문자열로 변환

143. unbinary()
숫자(바이너리), 문자열(바이너리)로 표시할 경우
이를 숫자 변환

144. unhex()
문자열(바이너리)로 표시할 경우 이를 숫자 변환

145. PROCESSING
문법:STRING
Moon Yong Joon

146. String

147. String : 생성자
문자열 생성자는 byte나 char array를 파라미터
로 받아 문자열로 생성
String 변수명 = “ 문자열” 로 직접 생성도 가능

148. String 생성 예시
Char array를 정의하고
String 생성자에 파라미터로
전달

149. String : 메소드
제공된 내장 메소드

150. String 처리 함수

151. join
join(list, separator)은 String[]: array of
Strings을 list 인자로 받아서 문자열을 합

152. match
match(str, regexp) 함수는 문자열을 정규표현
식과 비교해서 매치되는 곳이 문자열 결과를 처
리
<tag></tag> 사이이
content 문자열을 추출

153. matchAll
match(str, regexp) 함수는 문자열을 정규표현
식과 비교해서 매치된 결과를 String[][]으로 처리
String[i][0] = 매칭된 전체 문자열
String[i][1] = 매칭된 내부 결과 문자열

154. nf
숫자를 문자열로 format 처리하는 함수
nf(num)
nf(num, digits)
nf(num, left, right)
num : int[], float[], float, or int
digits : 0를 포함한 숫자의 길이
left: 소수점 이상 수
right:소수점이하 수

155. nfc
숫자를 문자열로 format 처리하는 함수 특히 1000
단위로 ,를 붙임
nf(num)
nfc(num, right)
num : int[], float[], float, or int
right:소수점이하 수

156. nfp
숫자를 문자열로 format 처리하는 함수. 부호를 표시
nfp(num, digits)
nfp(num, left, right)
num : int[], float[], float, or int
digits : 0를 포함한 숫자의 길이
left: 소수점 이상 수
right:소수점이하 수

157. nfs
숫자를 문자열로 format 처리하는 함수. 양수일 경우
는 부호가 blank이고 음수일 경우 표시
nfp(num, digits)
nfp(num, left, right)
num : int[], float[], float, or int
digits : 0를 포함한 숫자의 길이
left: 소수점 이상 수
right:소수점이하 수

158. split
문자열로 쪼개서 문자열 array로 분리 하는 함수
split(value, delim)
value : string
delim : char

159. splitTokes
문자열로 token들로 문자열 array로 분리 하는 함수
splitTokens(value)
splitTokens(value, delim)
value : string
delim : char
“, “: ,와 blank를 제거하라
는 뜻

160. trim
문자열내의 좌우 공백을 제거하는 함수
trim(str)
trim(array)
str : string
array : string array

161. PROCESSING
문법: ARRAY
Moon Yong Joon

162. Array

163. array 정의
array는 데이터타입[] 변수명으로 생성하고 할당
연산자을 이용해서 값을 할당
자료형[] 변수명 = new 자료형 [개수];

164. array 생성/초기값 할당 1
array를 생성하고 array에 초기값 하나씩 할당해
서 출력

165. array 생성/초기값 할당 2
array를 생성하면서 바로 초기값 할당해서 출력

166. Array 처리 함수

167. append
array에 원소를 추가하기
append(array, value)
array : Object, String[], float[], int[],
char[], or byte[]
value : Object, String, float, int, char,
or byte

168. arrayCopy
array에서 array로 원소를 카피하는 함수
arrayCopy(src, srcPosition, dst,
dstPosition, length)
arrayCopy(src, dst, length)
arrayCopy(src, dst)
src, dst : array
srcPosition, dstPosition : array 위치
length : 총 copy 할 길이

169. concat
array와 array를 하나의 array로 합하는 함수
concat(a, b)
a, b : Object, String[], float[], int[],
char[], byte[], or boolean[]

170. expand
기존 array의 사이즈를 확장하는 함수
expand(list, newsize)
list : Object, String[], double[], float[],
long[], int[], char[], byte[], or boolean[]
Newsize : 정수로 사이즈 지정
데이터 타입을 지정시 확장도 지
정된 데이터 사이즈 만큼 처리

171. reverse
기존 array를 역으로 sort 하는 함수
reverse(list)
list Object, String[], float[], int[], char[],
byte[], or boolean[]: booleans[], bytes[],
chars[], ints[], floats[], or Strings[]

172. shorten
기존 array를 앞에서 한 원소씩 삭제하는 함수
shorten(list)
list : Object, String[], float[], int[],
char[], byte[], or boolean[]

173. sort
기존 array를 sort 하는 함수
sort(list)
Sort(list, count)
list :
String[], float[], int[], char[], or byte[]
count : number of elements to sort,
starting from 0

174. splice
기존 array를 index 위치부터 insert 하는 함수
splice(list,value,index)
list :
Object, String[], float[], int[], char[],
byte[], or boolean[]
value : Object, String[], String, float[],
float, int[], int, char[], char, byte[], byte,
boolean[], or boolean

175. subset
기존 array를 시작점 부터 부분 array를 추출하는 함
수
subset(list,start)
subset(list,start,count)
list :
Object, String[], float[], int[], char[],
byte[], or boolean[]

176. PROCESSING
문법:SETTING
함수
Moon Yong Joon

177. size()/width/height

178. size syntax
화면에 대한 size 지정하고 renderer 파리미터에
P2D, P3D를 지정 가능
P2D : OpenGL을 호환 그래픽 하드웨어를 사용
P3D : OpenGL을 호환 그래픽 하드웨어를 사용

179. P3D render 처리
화면에 대한 size에서 3D로 지정해서 처리
2차원 3차원
x,y,z 측을 가운데에 지정
z을 이동시키므
로 점점 커진다

180. size함수
픽셀 단위의 디스플레이 윈도우 폭 및 높이의 치
수를 정의. setup () 함수 내 첫줄에 표시

181. width 변수
디스플레이 윈도우의 폭을 저장하는 시스템 변수.
이 값은 size () 함수의 첫 번째 파라미터에 의해
설정된다.

182. height 변수
디스플레이 윈도우의 폭을 저장하는 시스템 변수.
이 값은 size () 함수의 두번째 파라미터에 의해
설정된다.

183. clear 함수
mousePressed()를 호출시 도형의 이미지가
clear 됨

184. 윤곽선 조정

185. smooth 함수 syntax
도형 선에 대한 모서리를 부드럽게 처리하는
smooth

186. 도형 윤곽선 조정:smooth
도형 선에 대한 모서리를 부드럽게 처리하는
smooth

187. noSmooth 함수 syntax
도형 선에 대한 모서리를 부드럽게 처리하지 않
음

188. 도형 윤곽선 조정:noSmooth
도형 선에 대한 모서리를 부드럽게 미처리하는
noSmooth

189. 윤곽선

190. stroke() syntax
storke 함수를 이용해서 흑백이나 칼라색로 윤
곽선을 표시

191. 도형 윤곽선 : stroke()
storke 함수를 이용해서 흑백이나 칼라색로 윤
곽선을 표시

192. 도형 윤곽선 : noStroke()
noStorke 함수를 이용해서 윤곽선 표시를 제거

193. 도형 윤곽선 : strokeWeight()
윤곽선에 대한 가중치 주기

194. 도형 윤곽선가중치 예시
윤곽선을 smooth 및 strokeWeight를 이용해서
강조

195. 도형 윤곽선 : strokeCap()
윤곽선에 끝부분에 대한 처리 ROUND, SQUARE,
PROJECT 사용 default는 ROUND

196. 도형 윤곽선cap 예시
윤곽선 끝부분에 대한 strokeCap 처리
square round

197. 도형 윤곽선 : strokeJoin()
윤곽선이 만나는 부분에 대한 선처리 MITER,
BEVEL, and ROUND사용 default는 MITER.

198. 도형 윤곽선 join 예시
윤곽선이 만나는 부분을 strokeJoin을 이용해서
처리
round bevel

199. 흑백 색상 선택

200. 흑백색깔에 대한 숫자표시
색상은 0부터 255까지 숫자로 표시하면 0이 가
장 짙고 숫자가 높아질수록 엷어짐

201. 흑백 색상 선택하기 1
fill 함수에 하나의 숫자 파라미터를 넣으면 흑백
색상이 선택됨

202. 흑백 색상 선택하기 2
fill 함수에 하나의 숫자 파라미터를 넣으면 흑백
색상이 선택됨

203. 흑백 색상 선택하기 3
fill/noFill/noStroke 함수를 이용해서 원을 그리
면 3개의 원 중에 2개만 보임
noStorke를
stroke로 변
환시 원 그림
이 보임

204. 칼라 색상 선택

205. 칼라색에 대한 숫자표시
색상은 R,G,B에 대해 0부터 255까지 숫자로 표
시하면 혼합된 색을 표시

206. 칼라색 예시
RGB, HSB, HEX 값 예시

207. RGB 색상 선택하기
도구에 색상선택하기를 누르고 실제 R, G, B를
확인해서 입력하면 색상을 선택할 수 있음
실행된 결과

208. 도형에 색 입히기

209. 모형에 색 입히기
배경(background), 모형 외곽선(stroke), 모형
내부(fill)의 색을 함수를 이용함
background()
stroke()
fill()

210. background함수 syntax
배경에 색과 이미지를 처리하는 함수
alpha : 배경의 투명도

211. Background 함수 예시
배경(background)에 파라미터를 넣고 배경색이
나 배경이미지를 처리할 수 있음

212. fill() 함수 syntax
fill 함수를 이용해서 흑백,RGB/HSB/HEX 등의
값을 입히기
alpha : 배경의 투명도

213. 내부 도형 채우기 : fill()
fill 함수를 이용해서 내부 도형에 대해 색을 채움
fill(rgb)
fill(rgb, alpha)
fill(gray)
fill(gray, alpha)
fill(v1, v2, v3)
fill(v1, v2, v3, alpha)
alpha : 배경의 투명도

214. Color 색 입히기 : RGB 1
fill 함수에서 R,G,B를 선택
red + green = yellow

215. Color 색 입히기 : RGB 2
fill 를 이용해서 RGB 색 입히기
255가 기본이고 점점 작은 수일 수록 짙은 색

216. Color 색 입히기 : HEX
backgroun/fill 를 이용해서 hex색 입히기
#818257/#AEDD3C를 처리

217. noFill() 함수
noFill 함수는 내부 도형의 색을 채우지 않음

218. colorMode 이용하기

219. colorMode 함수
colorMode () 함수는 색을 지정하기 위해 사용
되는 수치 범위를 변경하고, 컬러 시스템을 전환
하기 위해 사용됨
colorMode(mode)
colorMode(mode, max)
colorMode(mode, max1, max2, max3)
colorMode(mode, max1, max2, max3, maxA)
mode
int: Either RGB or HSB, corresponding to Red/Green/Blue
and Hue/Saturation/Brightness
max float: range for all color elements
max1
float: range for the red or hue depending on the current col
or mode
max2
float: range for the green or saturation depending on the cu
rrent color mode
max3
float: range for the blue or brightness depending on the cur
rent color mode
maxA float: range for the alpha

220. colorMode : HSB/RGB 비교
HSB(hue, saturation and brightness)와 RGB
모드별 값 비교

221. colorMode : HSB 예시 1
Mode를 변화주고 실행

222. colorMode : HSB 예시 2
Mode를 지정하고 stroke에 hsb값을 주고 자
인 처리

223. colorMode : RGB 예시 1
Mode를 변화주고 실행

224. colorMode : RGB 예시 2
Mode를 지정하고 stroke에 r,g,b 값을 주고 자
인 처리

225. Rect Mode처리

226. rectMode()
사각형이 위치에 대해 지정

227. rectMode() : CORNER
시작점(2,3)을 포함하여 너비가 5, 높이가 4인
사각형 표시

228. rectMode() : CORNERS
시작점(5,5)과 끝점(8,7) 내의 사각형을 그림

229. rectMode() : CORNER/CORNERS
CORNERS로 지정하면 rect()함수의 3,4번째 파
라미터를 1,2번째로 대체해서 효과 즉
top(25,25), bottom(50,50)으로 처리
rect함수를 처리가 동일

230. rectMode() : CENTER
센터점(3,3)을 포함한 너비가 5, 높이가 5인 사각
형 표시

231. rectMode() : RADIUS/CENTER
CORNERS로 지정하면 rect()함수의 3,4번째 파
라미터를 반으로 처리
동일한 값으로 인식

232. ellipse Mode처리

233. ellipseMode : CORNER
시작점을 포함하여 너비와 높이가 4인 원을 표시
시작점(3,3)
너비 4
높이 4

234. ellipseMode : CENTER
중심점을 포함한 너비와 높이가 5인 원을 표시
중심점(3,3)
너비 5
높이 5

235. ellipseMode : CORNERS
시작점과 끝점을 내부에 원을 표시
시작점(5,5)
끝점(8,7)

236. PROCESSING
문법: 2D
도형 함수
Moon Yong Joon

237. 점과 선

238. 점과 선 이해
라인, 점 등을 그릴 때 각 픽셀의 위치에 따라 그
림

239. 점과 선그리기
라인(line), 점(point) 등을 그릴 수 있음
시작점은 앞의 두자리
끝점은 뒤에 두자리

240. line에 색 입히기
strokeWeight를 주고 stroke에 색상 처리

241. 사각형

242. 사각형 그리기
특정 좌표와 너비과 높이로 그리기

243. 사각형 그리기 예시
size는 실행 창 크기, background는 실행결과
창이 배경색, fill은 실행결과 내의 색입히기, rect
은 사각형 그리기

244. 원

245. 원 그리기
원도 좌표와 너비와 높이로 그리기

246. 원 그리기 예시
size는 실행 창 크기, background는 실행결과
창이 배경색, nofill은 실행결과 내에 채우기 없기,
ellipse은 원 그리기

247. 삼각형

248. 삼각형 그리기
세개 좌표를 받아서 표시
triangle(x1, y1, x2, y2, x3, y3)

249. 마름모꼴(quad)

250. 마름모꼴 그리기
네개 좌표를 받아서 표시
quad(x1, y1, x2, y2, x3, y3, x4, y4)

251. 마름모꼴 그리기 예시
마름모꼴과 삼삭형 2개를 같이 그리기

252. 호(arc)

253. 호 그리기
두개의 좌표와 호의 폭과 높이를 받아서 호를 표
시
arc(a, b, c, d, start, stop)
arc(a, b, c, d, start, stop, mode)

254. 호 그리기 예시 1
두개의 좌표와 호의 폭과 높이를 받아서 호를 표
시

255. Radian과 degree 이해하기
radian 값과 degree 값에 대한 위해

256. 호 그리기 파이값으로 이해하기
radian의 값을 HALF_PI로 호 표시
0
HALF_PI

257. 호 그리기 각도로 이해하기
radian은 degree(90)를 넣고 호 표시
0
90

258. 호 그리기 예시 : radians 값
두개의 좌표와 호의 폭과 높이를 받아서 호를 표
시

259. 호 그리기 예시 : radians 함수
두개의 좌표와 호의 폭과 높이를 받아서 호를 표
시

260. PROCESSING
문법 : VERTEX
Moon Yong Joon

261. Vertex 함수

262. vertex 란
사용자 정의에 의해 도형을 그리는 방법

263. vertex syntax
두개의 좌표와 호의 폭과 높이를 받아서 호를 표
시

264. vertex 구성 예시
beginShape와 endShape 사이에 vertex 점들
로 구성되 모양을 구성
beginShape();
vertex();
……
endShape();

265. vertex 간의 점 연결방식
vertex(x,y)들간의 연계 점을 잇는 선을 그리고
처리
(30,20)
(85,20)
(30,75)
(85,75)

266. vertex 내의 점 연결 예시
vertex(x,y)들간의 연계 점을 잇는 선에 색을 입
히기
도형 전체에 선 색을 입히
려면 endShape(CLOSE)
로 지정

267. vertex 내의 색 입히기
vertex(x,y)들간의 연계 점을 잇는 선에 색을 입
히기

268. curveVertex 함수

269. curveVertex syntax
curveVertex는 x,y,z 측 좌표에 만나는 점을 지
정

270. curveVertex 그리는 법
시작점c1과 종료점 c2을 control point로 인식
하고 그 사이에 있는 점만 선으로 연계해서 처리

271. curveVertex 예시
시작점과 종료점을 정하고 내부 점들을 3개 표시
해서 curve를 처리
c1 c2

272. Vertex 시작 함수

273. beginShape 함수
beginShape 함수에 kind에 파라미터를 넣으면
점, 선, 삼각형, 사각형 등을 그릴 수 있음

274. vertex 로 점 그리기: POINTS
beginShape(POINTS)를 정의하고 vertex(x,y)
들의 점만 표시하면 점들만 생성

275. vertex 로 선 그리기: LINES 1
beginShape(LINES)를 정의하고 vertex(x,y)들
의 점만 표시하면 선을 생성

276. vertex 로 선 그리기: LINES 2
beginShape(), endShape()에 파라미터를 지정
하지 않으면 vertex(x,y)들의 점만 표시하면 선을
생성

277. vertex 로 삼각형 : triangles
beginShape(TRIANGLES)를 정의하고
vertex(x,y)들의 점만 표시하면 삼각형을 생성

278. vertex 삼각형 : TRIANGLE_STRIP
beginShape(TRIANGLE_STRIP)를 정의하고
vertex(x,y)들의 점만 표시하면 연결된 삼각형을
생성

279. vertex 삼각형 : TRIANGLE_FAN
beginShape(TRIANGLE_FAN)를 정의하고
vertex(x,y)들의 점만 표시하면 삼각형을 생성

280. vertex 사각형 : QUADS
beginShape(QUADS)를 정의하고 vertex(x,y)들
의 점만 표시하면 사각형들을 생성

281. vertex 삼각형 : QUAD_STRIP
beginShape(QUAD_STRIP)를 정의하고
vertex(x,y)들의 점만 표시하면 사각형들을 생성

282. vertex 다각형 : 임의의 도형
endShape(CLOSE)를 정의하고 vertex(x,y)들의
점만 표시하면 임의의 도형들을 생성
여섯개의 점을 전부 연
결해서 도형을 만듬

283. Vertex 끝 함수

284. endShape 함수
endShape 함수에 mode에 파라미터를 넣으면
shape가 만들어지고 종료

285. vertex 로 사각형 그리기: CLOSE
vertex(x,y)들간의 연계 점을 잇는 선을 그리고
endShape(CLOSE) 처리하면 사각형이 그려짐

286. PROCESSING
문법: MOUSE 사용
Moon Yong Joon

287. Mouse 상태 처리
mouse를 상태(클릭 등)을 확인해서 console 창
에 처리 결과를 출력

288. mouseButton 변수
mouse를 클릭 input을 받을 경우 draw 함수를
재호출되어 처리
왼쪽 버튼 가운데 버튼 오른쪽 버튼

289. mouseClicked 함수
mouse클릭을 input으로 받아 draw 함수를 재
호출되어 처리
최초 값
0
마우스 클릭
255
마우스 클릭
0

290. mouseDragged 함수
mouse 클릭한 후 drag를 input으로 받아
draw 함수를 재호출되어 처리
마우스를 클릭 한 후
드래그하면 값이 변화

291. mouseMoved 함수
mouse 움직임을 input으로 받아 draw 함수를
재호출되어 처리(마우스 클릭 후 이동은
mouseDragged를 사용)
마우스 움직임

292. mousePressed 함수
mouse 버튼을 누르면 draw 함수를 재호출되어
처리
마우스 누르기

293. mousePressed 변수
mouse 버튼을 누르면 draw 함수가 재호출되어
mousePressed 상태를 확인
마우스 누르면
검은색으로 변경

294. mouseReleased 함수
mouse 버튼을 클릭한 후 해체시 draw 함수를
재호출되어 처리
마우스 클릭한 후
release시 변경

295. mouseWheel 함수
mouse wheel을 움직임에 따라 -1 또는 1이 값
을 출력
마우스 의 wheel을
움직임

296. mouseX
mouse를 X측 이동에 따라 자동으로 인식해서
선을 그림
마우스 움직임에 따
라 선이 움직임

297. mouseY
mouse를 Y측 이동에 따라 자동으로 인식해서
선을 그림
마우스 움직임에 따
라 선이 움직임

298. pmouseX
mouseX와의 차이점은 이전 프레임이 정보를 가
지고 있어 빨리 이동시 선에 대한 표시가 조금 차
이가 생김
마우스 움직임에 따
라 선이 움직임

299. pmouseY
mouseY와의 차이점은 이전 프레임이 정보를
가지고 있어 빨리 이동시 선에 대한 표시가 조금
차이가 생김
마우스 움직임에 따
라 선이 움직임

300. PROCESSING
문법: KEYBOARD
사용
Moon Yong Joon

301. key 변수
키보드 입력에 대한 정보를 관리하는 변수
키보드에서 b/B 입
력시 변경

302. keyCode 변수
key값이 CODED 일 경우 keyCode 변수에서
방향키를 인식해서 처리
방향키 처리
key keyCode
Alt ALT
Ctrl CONTROL
Shift SHIFT
← LEFT
→ RIGHT
↑ UP
↓ DOWN
Page Up PAGE_UP
Page Down PAGE_DOWN
Home HOME
End END

303. keycode 값 : 1
key key code
Backspace 8
Tab 9
Enter 10
Shift 16
Control 17
Alt 18
Caps Lock -
Escape 27
Space 32
Page up 33
Page down 34
End 35
Home 36
Left 37
Up 38
Right 39
Down 40
Delete 127
key key code
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
key key code
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121
f11 122
f12 123

304. keycode 값 : 2
key key code
a 65
b 66
c 67
d 68
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
key key code
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
key key code
Semicolon (;) 186
Colon (:) 186
Plus (+) 187
Equals sign (=) 187
Comma (,) 188
Less than sign (<) 188
Minus (-) 189
Underscore (_) 189
Period (.) 190
Greater than sign (>) 190
Question mark (?) 191
Forward slash (/) 191
Backtick (`) 192
Tilde (~) 192
Opening square bracket ([) 219
Opening curly bracket ({) 219
Backslash () 220
Pipe (|) 220
Closing square bracket (]) 221
Closing curly bracket (}) 221
Single quote (') 222
Double quote (") 222

305. keyPressed 함수
keyboard를 누르면 값이 변하는 것을 인식해서
처리
Keyboard 입력할 수록
값이 변화

306. keyPressed 변수
keyboard를 누르고 있는 상태에서만 값이 변경
되고 key press가 끝나면 원 상태로 돌아감
Keyboard 누르고 있을
동안 색이 변경

307. keyReleased 함수
keyboard를 누르고 있다 해제하면 값이 변하는
것을 인식해서 처리
Keyboard 누르고 있다
가 해제하면 값이 변화

308. PROCESSING
문법: TIME & DATE
사용
Moon Yong Joon

309. day/month/year
현재의 연/월/일을 검색해서 text로 보여주기

310. hour/minute/second/millis
현재의 시/분/초/밀리초를 검색해서 text로 보
여주기

311. PROCESSING
문법:TYPOGRAPHY
처리
Moon Yong Joon

312. text 함수 형식
글자를 출력할 수 있는 함수

313. text 함수 활용
글자에 대해 처리를 세팅해서 처리

314. PROCESSING
문법:TRANSFORM
Moon Yong Joon

315. transform 처리?
화면 위에 캔버스를 놓고 캔버스를 이동시키면
캔버스 내의 도형이 움직이는 것을 만들 수 있음
캔버스
화면

316. 캔버스 삽입

317. pushMatrix()
화면에 캔버스를 갖다놓는 함수

318. transform : pushMatrix()
화면 위에 캔버스를 pushMatrix함수로 올리기
하고 그림을 그림

319. 캔버스 변환

320. translate() syntax
이 함수의 파라미터는 x:좌우, y:위아래, z: 앞뒤
처리를 가지면 z가 있으면 size함수에 P3D를 넣
어야 함

321. translate()
캔버스를 그려진 그림을 이동시키는 함수

322. transform : translate()
화면 위에 캔버스를 그려진 그림을 이동하기 위
해 translate 함수를 호출

323. rotate()
화면을 시기키 위해 파라미터로 회전각이나
radian을 받아 처리

324. transform : rotate()
화면 위에 캔버스를 그려진 그림을 회전하기 위
해서는 rotate함수를 호출

325. scale() syntax
화면 위에 캔버스를 그려진 그림에 대한 확대 및
축소에 대한 비율로 처리

326. scale()
화면 위에 캔버스를 그려진 그림에 대한 크기확
대 및 축소

327. transform : scale()
화면 위에 캔버스를 그려진 그림에 대한 크기 확
대를 위해 scale함수 호출

328. 캔버스 제거

329. transform : popMatrix() 전
화면 위에 캔버스를 제거하는 popMatrix 호출전에
그림을 그리면 캔버스에 그려지고 후에 그리면 다른
화면에 그려짐
X측
Y측

330. transform : popMatrix() 후
화면 위에 캔버스를 제거하는 popMatrix 호출
후에 그림을 그리면 다른 곳에 그려짐

331. PROCESSING
문법: 삼각함수
Moon Yong Joon

332. 삼각함수 기초 이해

333. 직각 삼각형 용어
hypotenuse, adjacent, opposite은 보통 빗변,
밑변, 높이

334. 빗변의 길이
피타고라스 정리에 따라 계산
빗변**2 = 4**2 + 3**2
= 16 + 9
= 25
= 5 **2
빗변은 5

335. 삼각비 이용한 정의
sin, cos, tan 값 계산
5 cm

336. sin15 값 구하기
sin 계산
피타고라스 정리에 따른 빗변 구하기
sin15도 구하기

337. 각도와 빗변으로 변 계산
각도와 빗변이 있을 경우 삼각함수를 이용해서
밑변과 높이를 계산
= r
= x
밑변 계산하기

338. 원을 이용한 정의
원을 이용한 삼각함수
반지름이 1인 경우

339. 원을 이용해 좌표 이해
x축은 반지름*코사인 각도, Y축은 반지름*사인
각도로 원위의 점의 좌표를 알 수 있음

340. 원을 이용한 정의
원을 이용한 삼각함수

341. degrees와 radians 변환
단위원을 이용하여 degrees와 radians 변환
Degrees와 Radians 변환 규칙

342. degrees 에서 radians 변환
단위원을 이용하여 degrees와 radians 변환

343. degrees와 radians 변환 기준
2ㅠ는 360도, 1radian은 57.3도

344. cos

345. cosine syntax
코사인함수에 angle을 넣어 값을 계산.

346. cosine 그래프
수평선의 길이를 코사인 값을 표시.

347. cosine 함수 예시
일사분면만을 표시되어 있어 그림은 반대방향

348. sin

349. sine syntax
사인함수에 angle을 넣어 값을 계산.

350. sine 그래프
수직선의 길이를 코사인 값을 표시.

351. sine 함수 예시
일사분면만을 표시되어 있어 그림은 반대방향

352. tan

353. tan syntax
탄젠트 함수에 angle을 넣어 값을 계산.

354. tangent 그래프
수직선의 길이를 코사인 값을 표시.

355. tangent 함수 예시
일사분면만을 표시되어 있어 그림은 반대방향

356. radian 상수

357. radian 상수
PI, TWO_PI, HALF_PI, PI 에 대해 상수로 관리
HALF_PI

358. radians & degrees

359. 함수 예시
degrees를 radians으로 전환, 파라미터 값은
float로 산출해야 함

360. arc 길이 계산

361. acos, asin, atan 함수
cos, sin, tan 값에 대한 arc 길이를 계산

362. PROCESSING
문법: MATH
함수
Moon Yong Joon

363. 수학적 그래프 이해

364. 함수 그래프 : 양수
수학 함수 그래프 기준이 반대 방향이면 1사면쪽
만 표시

365. 함수 그래프 : x**4
수학 함수 그래프 기준이 반대 방향이면 1사면쪽
만 표시

366. 함수 그래프 : 음수
수학 함수 그래프 기준이 반대 방향이면 1사면쪽
만 표시

367. Math 함수 정리

368. math 함수 1
수학 함수들
abs(n) 절대값
ceil(n) Int 값에 가까운 곳으로 절상
constrain(amt, low, high)
low와 high의 값 사이로 제한, low보다 작으면 low,
high보다 크면 high
dist(x1, y1, x2, y2)
dist(x1, y1, z1, x2, y2, z2)
거리구하기
exp(n)
Returns Euler's number e (2.71828...) raised to the
power of the n parameter
floor(n) 값을 절사(int)
lerp(start, stop, amt)
선형보간(Linear Interpolation). start에서 stop 사이
를 amt(0~1) 기준으로로 선형보간
log(n) 로그값 산출
mag(a, b)
mag(a, b, c)
벡터에 대한 크기(길이) 계산
map(value, start1, stop1,
start2, stop2)
Start1과 stop1 범위의 값을 확인하고 start2와 stop2
의 값으로 리턴

369. math 함수 2
수학 함수들
max(a, b)
max(a, b, c)
max(list)
최대값 구하기
min(a, b)
min(a, b, c)
min(list)
최소값 구하기
norm(value, start, stop)
Normalizes a number from another range into a valu
e between 0 and 1.
pow(n, e) e 승만큼 구하기
round(n) 숫자를 증가하거나 버리기
sq(n) 제곱승
sqrt(n) 제곱근 구하기

370. Lerg 함수

371. lerp함수 처리기준
선형보간(Linear Interpolation). start에서
stop 사이를 amt(0~1사이의 값) 기준으로 선
형보간

372. lerp함수 이용 라인그리기
선형보간(Linear Interpolation). start에서
stop 사이를 amt로 선형보간

373. Mag/dist

374. 벡터의 크기
벡터의 길이를 계산하는 함수

375. mag/dist 함수
벡터의 길이를 계산하는 함수

376. mag/dist 함수 처리 예시
벡터의 길이를 계산하는계산

377. Map 함수

378. map함수 syntax
map(value, start1, stop1, start2, stop2)를 이용
하면 두 값이 target 범위에 맞춰 이동

379. map함수 예시
map(value, start1, stop1, start2, stop2)를 이용
하면 두 값이 target 범위에 맞춰 이동

380. norm

381. norm 함수
들어온 값을 범위의 값으로 나눠서 0~1 사이
의 값으로 전환