P5.js 영상처리

누구나 코딩 아티스트 8

김성일 지음

코딩북스 2023년 02월 01일 출간

작품소개

책소개

영상처리의 기초부터 머신러닝 및 하드웨어 제어까지 영상처리를 최대로 활용하기

알파고의 등장 이후 인공지능은 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문, <if-else if>문 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

출판사 서평

[1] 이미지/동영상 처리에서 머신러닝/아두이노 연동까지 누구나 P5.js 영상처리 전문가
P5.js 코딩의 기초에서 이미지, 동영상 처리, 머신러닝을 거쳐 하드웨어 제어까지 P5.js 영상처리를 활용한 인터페이스로 상상과 현실을 연동합니다.

[2] 영상처리의 기초부터 다양한 활용까지 영상처리를 쉽고 재미있게
P5.js 코딩의 기초, 이미지 및 동영상 처리, 머신러닝, 아두이노 연동 순의 단계적인 실습을 통해 코딩 입문자도 영상처리의 응용까지 쉽게 따라올 수 있도록 점진적으로 안내하고, 누구나 영상처리를 응용하고 구현할 수 있도록 지원합니다.

[3] 쉬운 코딩 환경, 간결한 코딩 문법
쉬운 코딩 환경과 간결한 문법으로 동적, 시각적 결과물을 쉽게 도출함으로써 코딩하는 재미가 살아있습니다!

[4] 실전 코딩이 우선! 이론은 따라오는 것
[예제] → [설명] → [수정] 기존 대다수의 코딩 서적들이 따르는 방식인 이론 설명 후 코드를 소개하는 방식이 아니라, [예제]를 우선 실행해 보고 코드 [설명]으로 의미를 확인한 후, 예제를 [수정]해 보며 코딩의 원리를 재확인할 수 있도록 설계하였습니다.

[5] 블랜디드 러닝에 최적화된 구성
전체적인 흐름을 빠르게 파악하고 싶다면 [질문]→[설명] 순으로 실습합니다. 전체적인 흐름을 파악한 후 내실을 다지고 싶다면 [수정]→[심화] 순으로 실습합니다!

소스코드 다운로드: www.codingbooks.co.kr
관련 동영상: YouTube “코딩아티스트”

작가정보

저자(글) 김성일

자연언어(일본어, 중국어, 영어, 한국어)와 컴퓨터언어(C, C++, Java, JavaScript, Python, Processing, P5.js 등), 그리고 S/W와 H/W 연계 교육에 관심이 많습니다. 음성인식 관련 논문으로 박사 학위를 받았으며 현재 경남대학교 전자SW공학과에 재직 중입니다.