영상처리의 기초부터 머신러닝 및 하드웨어 제어까지 영상처리를 최대로 활용하기
알파고의 등장 이후 인공지능은 4차 산업혁명의 핵심 키워드로서 현재 그리고 미래 사회에 대단한 영향력을 끼칠 것으로 예상하고 있습니다. 인공지능은 예를 들어 객체인식, 상황감지, 모션인식 등 영상처리의 최신 기술과 연계함으로써 우리의 일상생활과 더불어 산업 전반에 혁명적인 변화를 일으키고 있습니다.
본서는 영상처리의 어려운 이론부터 말하지 않습니다. P5.js 기반의 간단한 실습 예제에서 시작하여 영상처리의 단계별 실습을 제시함으로써 입문자 스스로 응용할 수 있도록 가이드해 줍니다. 본서를 통해 P5.js가 가진 쉬운 코딩 환경 및 시각적인 출력의 장점을 영상처리에 접목함으로써 누구나 쉽게 영상처리 분야에 접근할 수 있도록 진입 문턱을 낮추고 있습니다. 기하학 처리, 픽셀 처리, 필터링 등 이미지 처리의 기초에서 시작하여 동영상 파일 및 실시간 비디오 처리 등 단계별 실습을 진행합니다. 또한, ml5.js 라이브러리를 이용하여 동영상 머신러닝을 체험하고, P5.js와 아두이노와의 연동을 통해 영상처리 및 머신러닝을 하드웨어 제어와 자연스럽게 접목시키고 있습니다. 특히, 컴퓨터 가상 세계의 영상처리 결과물(→P5.js)과 실세계의 결과물(→아두이노)을 상호 연동함으로써 인간에 보다 자연스러운 영상 인터페이스 방식을 직접 실습 및 응용할 수 있습니다.
P5.js는 자바스크립트 언어로 되어 있지만, 본서에서는 특정 언어에 국한하지 않고 C, C++, 자바, 자바스크립트, 파이썬 등과 같은 여러 코딩 언어들의 공통분모 다섯 가지(→변수, 조건, 반복, 배열, 함수)를 영상처리를 위한 코딩의 기본으로 삼고 초반부에 실습합니다. 그리고 이미지 및 동영상 처리, 머신러닝, 아두이노 연동 순의 단계적인 실습을 통해 코딩 입문자도 따라올 수 있도록 점진적으로 설명하였습니다. 이를 통해 누구나 본인의 프로젝트에 영상처리를 응용하고 실현할 수 있도록 지원하는 것을 최종 목표로 삼고 있습니다.
Ⅰ 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
