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 기본 표현: 문자 27
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.이미지 출력

5.1 이미지 출력 128
5.2 이미지 움직이기 139
5.3 이미지 반복 출력 146
5.4 이미지 배열 148

06.기하학 처리

6.1 이미지 이동 154
6.2 이미지의 2차원 회전 156
6.3 이미지의 3차원 회전 164
6.4 이미지 확대 및 축소 167
6.5 push() & pop() 174
6.6 이미지 텍스처 매핑 180
【심화6.1】 3차원 입체 도형 192

07.픽셀 처리Ⅰ

7.1 copy()를 사용한 픽셀 영역 복사 198
7.2 get()을 사용한 픽셀값 읽기 207
7.3 get()을 사용한 픽셀 요소값 읽기 216
7.4 get()을 사용한 이미지 처리: 점묘화 217
7.5 get()을 사용한 이미지 처리: 모자이크화 220
7.6 get(), set()을 사용한 이미지 처리: 복원 223
7.7 get(), set()을 사용한 이미지 처리: 변환 226

08.픽셀 처리Ⅱ

8.1 pixels[]를 사용한 픽셀값 읽기/쓰기 230
8.2 pixels[]를 사용한 이미지 처리: 점묘화, 선묘화 238
8.3 pixels[]를 사용한 이미지 처리: 모자이크화 245
8.4 pixels[]를 사용한 이미지 처리: 변환 247
8.5 pixels[]를 사용한 이미지 처리: 사칙 연산 255
8.6 pixels[]를 사용한 이미지 처리: 상호작용 258
【심화8.1】 캔버스를 이미지 파일로 저장 265

09.필터링

9.1 tint()를 사용한 필터링 269
【심화9.1】 RGB & HSB 컬러모드 280
9.2 filter()를 사용한 필터링 292
9.3 blend(), blendMode()를 사용한 블랜딩 302
9.4 마스크를 사용한 필터링 308

Ⅲ 동영상 처리

10.동영상 파일 처리

10.1 동영상 파일 출력 319
10.2 동영상 파일의 다양한 출력 방식 322
10.3 동영상 파일의 동작 제어 327
【심화10.1】 동영상 파일 재생/정지/속도/볼륨/재생위치 제어 331
10.4 pixels[]를 사용한 동영상 처리 334
10.5 동영상 필터링 341

11.실시간 비디오 처리

11.1 실시간 비디오 출력 351
11.2 비디오의 다양한 출력 방식 355
11.3 pixels[]를 사용한 비디오 처리 360
11.4 비디오 필터링 365

Ⅳ 머신러닝

12.ML5 머신러닝

12.1 머신러닝 실습을 위한 준비 376
12.2 이미지 및 실시간 사물 인식 379
【심화12.1】 숫자를 표현하는 다양한 메소드 384
【심화12.2】 이미지 파일 Drag & Drop 385
12.3 신체 포인트 추적 391
12.4 손가락 포인트 추적 402

13.전이학습 기반 인식

13.1 전이학습(Transfer Learning) 417
【심화13.1】 학습 완료한 모델의 재사용 425
13.2 전이학습 응용 428
13.3 티처블머신(Teachable Machine) 443

Ⅴ P5.js & 아두이노 연동

14.아두이노 설정

14.1 아두이노란? 457
14.2 아두이노 설치 460
14.3 아두이노 코딩 환경 462
14.4 아두이노 실행 463
14.5 실습 입·출력 부품 468

15.아두이노 시작

15.1 시리얼 통신으로 변숫값 확인 473
15.2 변수 기반 부품의 특성 확인 479
【심화15.1】 팅커캐드(Tinkercad) 481
【심화15.2】 초음파 센서로 거리 구하기 502
15.3 전체 회로도 503

16.영상처리 기반 P5.js & 아두이노 연동

16.1 연동 실습을 위한 준비 506
【심화16.1】 연동 시 주의사항 및 실행 순서 508
16.2 P5.js→아두이노 핸드쉐이킹 510
【심화16.2】 parseInt() & toInt() 524
16.3 아두이노→P5.js 핸드쉐이킹 525
【심화16.3】 시리얼 통신에서 문자열 송·수신 시 장·단점 537
16.4 아두이노↔P5.js 핸드쉐이킹 538
【심화16.4】 p5.WebSerial과 아두이노의 데이터 송·수신 메소드 549
【심화16.5】 p5.WebSerial & p5.SerialPort 554

17.머신러닝 기반 P5.js & 아두이노 연동

17.1 전이학습과 아두이노 연동 558
17.2 티처블머신과 아두이노 연동 571
17.3 코/손가락 포인트 추적과 아두이노 연동 577

마무리
마무리 584