Compact P5.js & 아두이노 연동

01 시작
1.1 코딩과 피지컬 컴퓨팅 13
1.2 p5.js란? 16
1.2.1 p5.js 개요 16
1.2.2 웹 에디터에서 코딩 19
1.2.3 비주얼 스튜디오 코드에서 코딩 24
1.3 아두이노란? 30
1.3.1 아두이노 개요 30
1.3.2 아두이노에서 코딩 32

02 표현
2.1 p5.js: 표현 40
2.1.1 캔버스의 크기 40
2.1.2 점과 선의 표현 43
2.1.3 원과 사각형의 표현 45
2.1.4 문자의 표현 46
2.1.5 색상의 표현 47
【심화】 비트(Bit) & 바이트(Byte) 49
2.2 아두이노: 표현 53
2.2.1 입·출력 부품 53
2.2.2 입·출력 부품의 핀번호 설정 54
2.2.3 LED 점멸 56

03 변수
3.1 p5.js: 변수 61
3.1.1 변수 선언과 초기화 61
3.1.2 변수와 연산 64
【심화】 유니코드(Unicode) & 아스키코드(ASCII Code) 68
【심화】 console.log() 또는 print() 사용 시 유의점 및 사용 예 71
【심화】 콘솔창에서 결과 확인 72
3.1.3 변수 기반 움직임 표현 73
【심화】 전역변수 & 지역변수 77
3.1.4 시스템 변수와 다양한 움직임 구현 80
3.2 아두이노: 변수 90
3.2.1 변수 기반 다양한 부품의 특성 확인 90
【심화】 p5.js와 아두이노의 비교: 기본 데이터형 90
【심화】 팅커캐드(Tinkercad) 94
【심화】 시리얼 통신 관련 함수(=메소드) 및 시리얼 모니터 101
3.2.2 전체 회로도 117
3.2.3 변수 기반 제어 119
【심화】 p5.js와 아두이노의 차이: map() 120
【심화】 아두이노의 입·출력 함수 정리 123
【심화】 부저의 tone() 함수와 서보모터 사용 시 유의사항 124


04 조건
4.1 p5.js: 조건 127
4.1.1 if문 127
4.1.2 if-else문 130
4.1.3 문 132
4.1.4 if문과 시스템 변수 133
4.2 아두이노: 조건 141
4.2.1 if문, if-else문 141
4.2.2 문 145

05 반복
5.1 p5.js: 반복 148
5.1.1 for문 148
5.1.2 while문 151
5.1.3 for문과 상호작용 153
5.2 아두이노: 반복 156
5.2.1 for문 156
5.2.2 while문 158

06 배열
6.1 p5.js: 배열 160
6.1.1 배열의 선언 및 초기화 160
6.1.2 배열과 반복문 164
6.2 아두이노: 배열 169
6.2.1 배열의 선언 및 초기화 169
6.2.2 배열과 반복문 170

07 함수
7.1 p5.js: 함수 176
7.1.1 함수 유형 176
7.1.2 함수 유형1,2 177
7.1.3 함수 유형3,4 182
7.1.4 이벤트 함수 186
7.2 아두이노: 함수 191
7.2.1 함수 유형1,2 191
7.2.2 함수 유형3,4 194
【심화】 P5.js와 아두이노의 함수 유형 비교 197

08 P5.js→아두이노
8.1 시리얼 통신 202
【심화】 시리얼(Serial) 통신 202
8.2 연동 실습을 위한 준비 207
【중요】 연동 시 주의사항 및 실행 순서 209
8.3 정수 송·수신1 211
【심화】 createButton() & p5.Element 217
【심화】 아두이노의 폴링(Polling) & 인터럽트(Interrupt) 218
8.4 정수 송·수신2 223
8.5 문자열 송·수신 225
8.6 복수 데이터 송·수신 228

09 아두이노→P5.js
9.1 정수 송·수신1 236
【심화】 p5.js의 폴링(Polling) & 인터럽트(Interrupt) 239
9.2 정수 송·수신2 242
9.3 문자열 송·수신 247
9.4 복수 데이터 송·수신 252

10. 아두이노↔P5.js
10.1 P5.js→아두이노 핸드쉐이킹 261
【심화】 핸드쉐이킹 방식의 특징 265
10.2 아두이노→P5.js 핸드쉐이킹 271
【심화】 시리얼 통신에서 문자열 송·수신의 장·단점 276
10.3 아두이노↔P5.js 핸드쉐이킹 277

마무리
마무리 288