New P5.js & 아두이노 연동

01 시작
1.1 코딩과 피지컬 컴퓨팅 16
1.2 p5.js란? 21
1.2.1 p5.js 개요 21
1.2.2 웹 에디터에서 코딩 24
1.2.3 비주얼 스튜디오 코드에서 코딩 29
【심화1.1】 p5.js와 프로세싱의 차이점 34
1.3 아두이노란? 38
1.3.1 아두이노 개요 38
1.3.2 아두이노에서 코딩 40

02 표현
2.1 p5.js: 표현 48
2.1.1 캔버스의 크기 48
2.1.2 점과 선의 표현 52
【심화2.1】 함수의 사용법 검색 54
2.1.3 원과 사각형의 표현 55
【심화2.2】 원과 사각형을 그릴 때의 기준점 설정 56
2.1.4 문자의 표현 57
2.1.5 색상의 표현 59
【심화2.3】 2진수 & 16진수 61
【심화2.4】 비트(Bit) & 바이트(Byte) 62
2.1.6 원호의 표현 66
2.2 아두이노: 표현 69
2.2.1 입·출력 부품 69
2.2.2 입·출력 부품의 핀번호 설정 70
2.2.3 LED 점멸 72

03 변수
3.1 p5.js: 변수 77
3.1.1 변수 선언과 초기화 77
【심화3.1】 p5.js 또는 자바스크립트의 키워드(Keyword) 80
3.1.2 변수와 연산 81
【심화3.2】 유니코드(Unicode) & 아스키코드(ASCII Code) 84
【심화3.3】 p5.js의 문자 표현 86
【심화3.4】 콘솔창 사용 89
【심화3.5】 콘솔창 사용 시 유의점 및 사용 예 91
【심화3.6】 폰트 설정 방법 93
【심화3.7】 데이터형 총정리 94
【심화3.8】 var & let & const 99
【심화3.9】 컬러 표현 102
3.1.3 변수 기반 움직임 표현 104
3.1.4 전역변수와 지역변수 111
3.1.5 시스템 변수와 다양한 움직임 구현 114
【심화3.10】 frameRate() & frameRate(프레임수) 116
3.2 아두이노: 변수 125
3.2.1 시리얼 모니터에서 아두이노 송신값 확인 125
【심화3.11】 p5.js와 아두이노의 비교: 기본 데이터형 130
3.2.2 변수 기반 다양한 부품의 특성 확인 133
【심화3.12】 const와 #define 비교 135
【심화3.13】 팅커캐드(Tinkercad) 135
【심화3.14】 초음파센서로 거리 구하기 156
3.2.3 전체 회로도 157
3.2.4 변수 기반 제어 159
【심화3.15】 p5.js와 아두이노의 차이: map() 160
【심화3.16】 아두이노의 입·출력 함수 정리 167
【심화3.17】 부저의 tone() 함수와 서보모터 사용 시 유의사항 169

04 조건
4.1 p5.js: 조건 172
4.1.1 if문 172
【심화4.1】 비교 연산자 보충 174
4.1.2 if-else문 180
4.1.3 문 181
4.1.4 if문과 시스템 변수 183
4.1.5 중첩 if문 190
4.1.6 switch문 193
4.2 아두이노: 조건 196
4.2.1 if문, if-else문 196
【심화4.2】 p5.js와 아두이노의 차이: boolean 199
【심화4.3】 p5.js와 아두이노의 차이: if문 201
【심화4.4】 채터링(Chattering) 208
4.2.2 문 217
4.2.3 중첩 if문 218
4.2.4 switch문 221

05 반복
5.1 p5.js: 반복 228
5.1.1 for문 228
5.1.2 while문, do-while문 232
5.1.3 for문과 상호작용 235
5.1.4 중첩 for문 237
5.2 아두이노: 반복 239
5.2.1 for문 239
【심화5.1】 아두이노와 p5.js의 형변환 및 문자열 더하기 246
5.2.2 while문, do-while문 248
5.2.3 중첩 for문 249

06 배열
6.1 p5.js: 배열 254
6.1.1 1차원 배열 254
6.1.2 배열과 반복문 259
6.1.3 2차원 배열 267
6.2 아두이노: 배열 270
6.2.1 1차원 배열 270
6.2.2 배열과 반복문 272
【심화6.1】 p5.js와 아두이노의 차이: 배열 273
6.2.3 2차원 배열 285

07 함수
7.1 p5.js: 함수 288
7.1.1 함수 유형 288
7.1.2 함수 유형1 291
7.1.3 함수 유형2 292
7.1.4 함수 유형3 295
7.1.5 함수 유형4 299
【심화7.1】 함수 만들기 연습 302
7.1.6 이벤트 함수 303
7.2 아두이노: 함수 310
7.2.1 함수 유형1 310
7.2.2 함수 유형2 312
7.2.3 함수 유형3 315
7.2.4 함수 유형4 316
【심화7.2】 P5.js와 아두이노의 함수 유형 비교 318
7.2.5 함수 유형 응용 321
【심화7.3】 p5.js와 아두이노의 차이: random() 329
【심화7.4】 p5.js와 아두이노의 차이: randomSeed() 330

08 비트
8.1 비트 연산 337
【심화8.1】 진수 변환 339
【심화8.2】 논리연산자 & 비트연산자 342
【심화8.3】 p5.js의 비트 연산 343
8.2 비트 처리 345

09 시리얼 통신
9.1 시리얼 통신 356
【심화9.1】 시리얼(Serial) 통신 360
9.2 문자 송·수신 361
9.3 문자열 송·수신 364
【심화9.2】 수신 문자열에서 정수 추출 368
9.4 정수 송·수신 370

10 P5.js→아두이노
10.1 연동 실습을 위한 준비 383
【심화10.1】 시리얼 통신 라이브러리 파일(p5.webserial.js) 업로드 방법 385
【심화10.2】 연동 시 주의사항 및 실행 순서 388
10.2 정수 송·수신1 390
【심화10.3】 폴링 방식에서 while문 & if문 400
【심화10.4】 p5.js에서의 송신 빈도 조절: frameRate() 408
10.3 정수 송·수신2 409
【심화10.5】 아두이노에서 정숫값 수신 시 데이터형 417
【심화10.6】 숫자를 표현하는 다양한 메소드 417
10.4 문자열 송·수신 419
10.5 복수 데이터 송·수신 423
【심화10.7】 findUntil() 432

11 아두이노→P5.js
11.1 정수 송·수신1 436
【심화11.1】 p5.WebSerial 라이브러리의 이벤트 444
【심화11.2】 아두이노에서의 송신 빈도 조절: delay() 446
【심화11.3】 Serial.write() & Serial.print() 비교 449
11.2 정수 송·수신2 452
11.3 문자열 송·수신 464
11.4 센서값 분리 송·수신 469
【심화11.4】 highByte() & lowByte() 479
11.5 복수 센서값 송·수신1 480
11.6 복수 센서값 송·수신2 490
11.7 파일 처리 498
【심화11.5】 파일 끌어당겨 놓기(Drag & Drop) 513
【심화11.6】 p5.js의 시간 관련 함수 514
【심화11.7】 아스키코드값 확인 515

12 아두이노↔P5.js
12.1 P5.js→아두이노 핸드쉐이킹 520
【심화12.1】 핸드쉐이킹 방식의 특징 531
12.2 아두이노→P5.js 핸드쉐이킹 536
【심화12.2】 핸드쉐이킹 방식에서 port.readLine() 사용 시 유의점 556
【심화12.3】 시리얼 통신에서 문자열 송·수신의 장·단점 557
12.3 아두이노↔P5.js 핸드쉐이킹 558
【심화12.4】 p5.WebSerial과 아두이노의 송·수신 메소드 비교 572
【심화12.5】 p5.WebSerial & p5.SerialPort 576
【심화12.6】 캔버스 크기 최대 설정 579
【심화12.7】 아두이노 & p5.js 언어 비교 580

마무리
마무리 586