P5.js 사운드처리

누구나 코딩 아티스트 13

김성일 지음

코딩북스 2024년 02월 02일 출간

작품소개

책소개

사운드처리의 기초부터 머신러닝 및 하드웨어 제어까지 사운드처리를 최대로 활용해 봅시다.

우리의 일상 생활은 항상 주위의 소리, 잡음, 음성, 음악 등 다양한 사운드에 둘러싸여 있고 우리의 삶을 지치게도 하고 활력을 불어넣기도 합니다. 이처럼 사운드는 우리의 청각기관으로 들어오는 친숙하고 중요한 자극 중 하나이지만 이를 공학적인 관점에서 분석하고, 만들고, 처리하고, 시각화하는 전 과정을 코딩으로 구현하는 방법에 대해 알려주는 서적은 국내·외로 흔하지는 않습니다. 본서에서는 코딩 입문자의 관점에서 사운드처리를 쉽게 다룰 수 있도록 기초부터 심화까지 단계적으로 안내함으로써 누구나 사운드처리를 활용할 수 있도록 지원합니다. 인공지능이나 4차 산업혁명과 연관지어 사운드처리의 중요성을 언급하기에 앞서 순수하게 사운드처리의 재미에 빠져 인생을 낭비해 보는 것도 의미있는 일이라고 생각합니다.^^

본서는 사운드처리의 어려운 이론부터 말하지 않습니다. p5.js 기반의 간단한 실습 예제에서 시작하여 사운드처리의 단계별 실습을 제시함으로써 입문자 스스로 응용할 수 있도록 가이드해 줍니다. 본서를 통해 p5.js가 가진 쉬운 코딩 환경 및 시각적인 출력의 장점을 사운드처리에 접목함으로써 누구나 쉽게 사운드처리 분야에 접근할 수 있도록 진입 문턱을 낮추고 있습니다.

본서의 Ⅰ부에서는 사운드처리를 위한 코딩의 기본으로 p5.js를 연습합니다. p5.js는 자바스크립트 언어로 되어 있지만, 본서에서는 특정 언어에 국한하지 않고 C, C++, 자바, 자바스크립트, 파이썬 등과 같은 여러 코딩 언어들의 공통분모 다섯 가지(→변수, 조건, 반복, 배열, 함수)를 코딩의 기본으로 실습합니다. Ⅱ부는 사운드처리의 기초 과정으로 사운드 입·출력, 다양한 오실레이터 및 사운드의 합성 원리를 실제 코딩해 봅니다. Ⅲ부는 사운드처리의 심화 과정으로 주파수 분석, 음향효과, 사운드 시각화 및 머신러닝을 코딩으로 구현해 봅니다. 마지막 Ⅳ부는 p5.js와 아두이노의 연동으로 사운드처리와 하드웨어 연계를 실습을 통해 구현해 봅니다. 이와 같이 기초에서 응용까지 단계별 실습을 통해 코딩 입문자도 본인의 프로젝트에 사운드처리를 적극 활용할 수 있도록 지원합니다.

목차

Ⅰ P5.js 기본

01 P5.js: 시작
1.1 p5.js란? 16
1.2 웹에디터에서 코딩 18
1.3 비주얼 스튜디오 코드에서 코딩 23
1.4 기본 표현: 캔버스 28
1.5 기본 표현: 점과 선 30
1.6 기본 표현: 원과 사각형 32
1.7 기본 표현: 문자 33
1.8 기본 표현: 색상 34
【심화1.1】 2진수 & 16진수 35
1.9 기본 표현: 원호 및 사용자 정의 도형 40

02 P5.js: 변수
2.1 변수 선언, 초기화 및 연산 46
【심화2.1】 콘솔창 사용 52
【심화2.2】 콘솔창 사용 시 유의점 및 사용 예 54
【심화2.3】 유니코드(Unicode) & 아스키코드(ASCII Code) 56
【심화2.4】 데이터형 총정리 58
2.2 변수 기반 움직임 표현 61
2.3 전역변수와 지역변수 67
2.4 시스템변수와 다양한 움직임 구현 70

03 P5.js: 조건,반복
3.1 조건: if문, if-else문, <if-else if>문 81
【심화3.1】 비교 연산자 보충 83
3.2 조건: 시스템변수, 중첩 if문 89
3.3 조건: switch문 98
3.4 반복: for문, 중첩 for문 100

04 P5.js: 배열,함수
4.1 1차원 배열 107
4.2 2차원 배열 117
4.3 함수 유형1,2 119
4.4 함수 유형3,4 125
4.5 이벤트함수 131

Ⅱ 사운드처리 기초

05 사운드 입·출력
5.1 사운드 파일 재생 139
【심화5.1】 콜백함수(Callback Function) 145
【심화5.2】 크롬 브라우저에서 오디오 자동 재생이 안 될 때 해결 방법 146
5.2 콜백/이벤트 함수 기반 사운드 파일 재생 152
5.3 사운드 진폭/파형 표현 165
【심화5.3】 사운드 진폭에 따라 크기가 변하는 3차원 입체 도형 172
5.4 사운드 진행 제어 177
【심화5.4】 사운드 파일을 선택 후 재생하는 방법 184
5.5 마이크 입력 187
【심화5.5】 사운드파일/마이크 음량과 상호작용 193
5.6 믹싱(Mixing) 199
5.7 패닝(Panning) 207
【심화5.6】 3차원 사운드 패닝 213
5.8 사운드 녹음 및 파일 저장 218
【심화5.7】 사운드 파일 재생/정지/속도/음량/팬 제어 225
【심화5.8】 p5.sound.js 라이브러리 230

06 오실레이터Ⅰ
6.1 오실레이터 생성 및 제어 236
6.2 오실레이터 배열 249
6.3 오실레이터 파형 표시 254
6.4 ADSR 포락선 263
【심화6.1】 ADSR 포락선 시뮬레이션 272
6.5 노이즈 생성 276

07 오실레이터Ⅱ
7.1 p5.MonoSynth 기반 미디음 생성 286
【심화7.1】 사운드의 속성 293
【심화7.2】 미디번호-주파수 상호 변환 295
【심화7.3】 음이름으로 코딩 시 유의점 302
7.2 p5.MonoSynth 기반 가상 피아노 306
7.3 p5.PolySynth 기반 화음 생성 316
7.4 p5.PolySynth 기반 멜로디 생성 321
【심화7.4】 음 순차 재생의 다양한 방법 330
【심화7.5】 리듬(Rhythm) 만들기 337
7.5 p5.SoundLoop 기반 멜로디 생성 339

08 사운드 합성 원리
8.1 주전원(Epicycles) 355
8.2 톱니파형 생성 361
【심화8.1】 푸리에급수 & 푸리에변환 365
8.3 다양한 파형 생성 370
【심화8.2】 톱니파 & 구형파 & 삼각파의 분해 및 합성 374

Ⅲ 사운드처리 심화

09 주파수 분석
9.1 스펙트럼(Spectrum) 380
【심화9.1】 파형 & 스펙트럼 & 스펙트로그램 380
9.1.1 오실레이터의 스펙트럼 385
【심화9.2】 오실레이터의 주파수 스펙트럼 및 시간 파형 표시 (버튼 제어) 394
9.1.2 사운드 파일의 스펙트럼 398
9.1.3 마이크 입력 신호의 스펙트럼 403
9.2 스펙트럼 에너지 405
9.2.1 오실레이터의 스펙트럼 에너지 405
9.2.2 사운드 파일의 스펙트럼 에너지 409
9.2.3 마이크 입력 신호의 스펙트럼 에너지 412
9.3 스펙트로그램(Spectrogram) 414
9.3.1 오실레이터의 스펙트로그램 414
【심화9.3】 컬러모드(Clolor Mode) 419
9.3.2 사운드 파일의 스펙트로그램 421
9.3.3 마이크 입력 신호의 스펙트로그램 424

10 음향효과
10.1 지연효과: p5.Delay() 427
10.2 잔향효과: p5.Reverb() 438
10.3 왜곡효과: p5.Distortion() 447
10.4 필터링효과: p5.Filter() 454
【심화10.1】 저역/고역/대역 통과필터를 생성하는 클래스 458
【심화10.2】 음향효과용 객체 연결 방식 466

11 사운드 시각화
11.1 시간파형 시각화-1 470
11.2 시간파형 시각화-2 477
【심화11.1】 시간 파형 시각화의 다양한 표현 방식 482
11.3 스펙트럼 시각화-1 489
11.4 스펙트럼 시각화-2 499

12 ML5 머신러닝
12.1 머신러닝 실습을 위한 준비 507
12.2 K-Means Clustering 기반 사운드 군집화 510
12.3 Neural Network 기반 사운드 영역 분류 524
【심화12.1】 학습 완료된 모델의 재사용 536
【심화12.2】 화살표함수(Arrow Function)를 사용한 음 영역 표시 540
12.4 Neural Network 기반 사운드 영역 추정 546

Ⅳ P5.js & 아두이노 연동

13 아두이노 설정
13.1 아두이노란? 559
13.2 아두이노 설치 562
13.3 아두이노 코딩 환경 563
13.4 아두이노 실행 565
13.5 아두이노 입·출력 부품 569

14 아두이노 시작
14.1 시리얼 통신으로 변숫값 확인 574
14.2 변수 기반 부품의 특성 확인 580
【심화14.1】 아두이노 시뮬레이션 582
【심화14.2】 초음파 센서로 거리 구하기 600
14.3 전체 회로도 601

15 사운드처리 기반 P5.js & 아두이노 연동
15.1 연동 실습을 위한 준비 604
【심화15.1】 연동 시 주의사항 및 실행 순서 606
15.2 P5.js→아두이노 핸드쉐이킹 608
15.3 아두이노→P5.js 핸드쉐이킹 629
15.4 P5.js↔아두이노 핸드쉐이킹 645
【심화15.2】 p5.WebSerial의 데이터 송·수신 메소드 654
【심화15.3】 시리얼 통신에서 문자열 송·수신 시 장·단점 658

16 머신러닝 기반 P5.js & 아두이노 연동
16.1 K-Means Clustering & 아두이노 연동 661
16.2 Neural Network 분류 & 아두이노 연동 668
16.3 Neural Network 추정 & 아두이노 연동 676

마무리
마무리 691

출판사 서평

[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공학과에 재직 중입니다.