음성으로 제어하는 P5.js & 아두이노

Ⅰ P5.js 기본

01 P5.js: 시작
1.1 p5.js란? 16
1.2 p5.js 설정 18
1.3 p5.js 코딩 환경 19
1.4 기본 표현: 캔버스 22
1.5 기본 표현: 점과 선 24
1.6 기본 표현: 원과 사각형 26
1.7 기본 표현: 문자 28
1.8 기본 표현: 색상 29
【심화1.1】 2진수 & 16진수 30

02 P5.js: 변수

2.1 변수 선언, 초기화 및 연산 36
【심화2.1】 유니코드(Unicode) & 아스키코드(ASCII Code) 44
【심화2.2】 데이터형(Data Type) 총정리 46
2.2 변수 기반 움직임 표현 50
2.3 전역변수와 지역변수 55
2.4 시스템 변수와 다양한 움직임 구현 58

03 P5.js: 조건, 반복
3.1 조건: if문, if-else문, 문 69
【심화3.1】 비교 연산자 보충 71
3.2 조건: 시스템 변수, 중첩 if문 78
3.3 반복: for문, 중첩 for문 87

04 P5.js: 배열, 함수
4.1 1차원 배열 95
4.2 2차원 배열 105
4.3 함수 유형 1,2 108
4.4 함수 유형 3,4 114
4.5 이벤트 함수 120

Ⅱ 음성인식 & 음성합성

05 P5.js: 음성합성
5.1 p5.speech 라이브러리 설치 128
5.2 음성합성 (캔버스 미사용) 132
【심화5.1】 p5.Element 클래스 148
5.3 음성합성 (캔버스 사용) 153
【심화5.2】 합성음성의 속성(→Volume, Rate, Pitch) 변경 167
5.4 음성합성 응용 (캔버스 사용) 172

06 P5.js: 음성인식
6.1 p5.SpeechRec 기반 음성인식 181
6.2 음성인식 (캔버스 미사용) 189
6.3 음성인식 (캔버스 사용) 193
【심화6.1】 복수 개의 키워드 인식 218
6.4 음성인식 & 음성합성 응용 223

07 P5.js: 텍스트 & 음성인식/합성
7.1 복수 행의 텍스트 입력 231
【심화7.1】 createElement() 235
7.2 구글 웹폰트 245
7.3 눈누 웹폰트 251
7.4 구글 아이콘 257
【심화7.2】 “객체 리터럴” 기반 객체 생성 265
7.5 이모지 272

Ⅲ 아두이노 기본

08 아두이노: 시작
8.1 아두이노란? 280
8.2 아두이노 설치 282
8.3 아두이노 코딩 환경 285
8.4 아두이노 실행 286
8.5 실습 입·출력 부품 291

09 아두이노: 변수
9.1 시리얼 통신으로 변숫값 확인 296
【심화9.1】 p5.js와 아두이노의 비교: 기본 데이터형 302
9.2 변수 기반 각종 부품의 특성 확인 304
【심화9.2】 팅커캐드(Tinkercad) 307
【심화9.3】 초음파센서로 거리 구하기 327
9.3 전체 회로도 328

10 아두이노: 조건, 반복
10.1 조건: if문, if-else문 331
10.2 조건: 문, 중첩 if문 339
10.3 반복: for문, 중첩 for문 342

11 아두이노: 배열, 함수
11.1 1차원 배열 347
【심화11.1】 p5.js와 아두이노의 차이: map() 350
11.2 2차원 배열 352
11.3 함수 유형 1,2 354
【심화11.2】 p5.js와 아두이노의 차이: random() 358
11.4 함수 유형 3,4 358

12 아두이노: 시리얼통신
12.1 시리얼 통신 363
12.2 문자 송·수신 367
12.3 문자열 송·수신 369
12.4 정수 송·수신 371

Ⅳ 음성인식/합성 기반 P5.js & 아두이노 연동

13 P5.js(음성인식)→아두이노
13.1 연동 실습을 위한 준비 377
【심화13.1】 연동 실습 절차 및 주의사항 379
13.2 정수 송·수신 382
13.3 문자열 송·수신 398
13.4 복수 데이터 송·수신 404

14 아두이노→P5.js(음성합성)
14.1 정수 송·수신 415
14.2 문자열 송·수신 429
14.3 복수 데이터 송·수신 439
【심화14.1】 시리얼 통신 관련 메소드 정리 455

15 아두이노↔P5.js(음성인식/합성)
15.1 P5.js(음성인식)→아두이노 핸드쉐이킹 459
15.2 아두이노→P5.js(음성합성) 핸드쉐이킹 475
15.3 아두이노↔P5.js(음성인식 & 음성합성) 핸드쉐이킹 481

Ⅴ 종합 프로젝트

16 프로젝트1: 아이콘 랜덤 이동
16.1 마우스로 랜덤 이동하는 사각형 맞추기 495
16.2 음성합성을 이용한 랜덤 이동하는 아이콘 출력 497
16.3 음성인식을 이용한 아이콘 랜덤 이동 501
16.4 음성인식과 음성합성을 이용한 아이콘 랜덤 출력 504
16.5 음성합성과 버튼을 이용한 아이콘 랜덤 이동 507
16.6 음성인식과 부저를 이용한 아이콘 좌우 반사 510

17 프로젝트2: 이모지 랜덤 출력
17.1 마우스를 누를 때마다 토글되는 주사위 516
17.2 음성합성을 이용한 이모지 랜덤 출력 517
17.3 음성인식을 이용한 이모지 랜덤 출력 520
17.4 음성인식과 음성합성을 이용한 이모지 랜덤 출력 522
17.5 음성합성과 초음파센서를 이용한 이모지 랜덤 출력 524
17.6 음성인식과 LED를 이용한 이모지 랜덤 출력 527

18 프로젝트3: 택시를 따라가는 자전거
18.1 아이콘을 이용한 “택시를 따라가는 자전거” 533
18.2 음성합성을 이용한 “택시를 따라가는 자전거” 536
18.3 음성인식을 이용한 “택시를 따라가는 자전거” 538
18.4 음성인식과 음성합성을 이용한 “택시를 따라가는 자전거” 542
18.5 음성합성, 버튼, 가변저항 두 개를 이용한 “택시를 따라가는 자전거” 545
18.6 음성인식/합성, RGB LED 및 버튼을 이용한 “택시를 따라가는 자전거” 549

마무리
마무리 556