Compact P5.js & 아두이노 연동

누구나 코딩 아티스트 10

김성일 지음

코딩북스 2023년 08월 15일 출간

작품소개

책소개

전공 불문 코딩 입문자, S/W 및 H/W를 연동하고 싶은 자를 위한 책

미래의 교육방식으로 흔히 STEM 교육을 말합니다. 즉, 과학(Science), 기술(Technology), 공학(Engineering), 수학(Mathematics)을 융합한 교육을 의미합니다. P5.js(→프로세싱의 웹 버전)와 아두이노는 원래 코딩에 익숙하지 않은 디자인이나 예술 전공의 학생들을 위하여 각각 시각적, 물리적 상호 작용에 중점을 둔 S/W 및 H/W 코딩 언어로 탄생하였습니다. 그러므로 P5.js와 아두이노는 STEM에 인문학과 예술을 의미하는 Art를 더한 STEAM 교육에 적합한 코딩 언어입니다.

Art 즉, 인문학과 예술은 인간의 창의성을 개발할 수 있는 수단으로서 인간만이 가능한 의미 있는 영역이라고 말할 수 있을 뿐만 아니라 창의적인 교육의 핵심 요소 중 하나입니다. 그 이유로, 인문학과 예술에는 해답이 하나 이상 또는 해답이 없는 문제가 대부분이므로 창의적인 사고가 무엇보다 필요하기 때문입니다. 창의적 사고를 촉진하는 교육 효과를 누리는 동시에 과학, 기술, 공학, 수학과 예술 사이의 절묘한 접점을 직접 체험하고 싶다면 P5.js와 아두이노를 연동한 피지컬 컴퓨팅(Physical Computing)으로 시작하는 것은 좋은 선택이 될 수 있습니다. P5.js와 아두이노를 배우는 과정은 이러한 융합과 창의의 핵심을 체득하는 시간이 될 것입니다. 그리고 무엇보다 재미있습니다.^^ For Fun!

목차

01 시작
1.1 코딩과 피지컬 컴퓨팅 13
1.2 p5.js란? 16
1.2.1 p5.js 개요 16
1.2.2 웹 에디터에서 코딩 19
1.2.3 비주얼 스튜디오 코드에서 코딩 24
1.3 아두이노란? 30
1.3.1 아두이노 개요 30
1.3.2 아두이노에서 코딩 32

02 표현
2.1 p5.js: 표현 40
2.1.1 캔버스의 크기 40
2.1.2 점과 선의 표현 43
2.1.3 원과 사각형의 표현 45
2.1.4 문자의 표현 46
2.1.5 색상의 표현 47
【심화】 비트(Bit) & 바이트(Byte) 49
2.2 아두이노: 표현 53
2.2.1 입·출력 부품 53
2.2.2 입·출력 부품의 핀번호 설정 54
2.2.3 LED 점멸 56

03 변수
3.1 p5.js: 변수 61
3.1.1 변수 선언과 초기화 61
3.1.2 변수와 연산 64
【심화】 유니코드(Unicode) & 아스키코드(ASCII Code) 68
【심화】 console.log() 또는 print() 사용 시 유의점 및 사용 예 71
【심화】 콘솔창에서 결과 확인 72
3.1.3 변수 기반 움직임 표현 73
【심화】 전역변수 & 지역변수 77
3.1.4 시스템 변수와 다양한 움직임 구현 80
3.2 아두이노: 변수 90
3.2.1 변수 기반 다양한 부품의 특성 확인 90
【심화】 p5.js와 아두이노의 비교: 기본 데이터형 90
【심화】 팅커캐드(Tinkercad) 94
【심화】 시리얼 통신 관련 함수(=메소드) 및 시리얼 모니터 101
3.2.2 전체 회로도 117
3.2.3 변수 기반 제어 119
【심화】 p5.js와 아두이노의 차이: map() 120
【심화】 아두이노의 입·출력 함수 정리 123
【심화】 부저의 tone() 함수와 서보모터 사용 시 유의사항 124


04 조건
4.1 p5.js: 조건 127
4.1.1 if문 127
4.1.2 if-else문 130
4.1.3 <if-else if>문 132
4.1.4 if문과 시스템 변수 133
4.2 아두이노: 조건 141
4.2.1 if문, if-else문 141
4.2.2 <if-else if>문 145

05 반복
5.1 p5.js: 반복 148
5.1.1 for문 148
5.1.2 while문 151
5.1.3 for문과 상호작용 153
5.2 아두이노: 반복 156
5.2.1 for문 156
5.2.2 while문 158

06 배열
6.1 p5.js: 배열 160
6.1.1 배열의 선언 및 초기화 160
6.1.2 배열과 반복문 164
6.2 아두이노: 배열 169
6.2.1 배열의 선언 및 초기화 169
6.2.2 배열과 반복문 170

07 함수
7.1 p5.js: 함수 176
7.1.1 함수 유형 176
7.1.2 함수 유형1,2 177
7.1.3 함수 유형3,4 182
7.1.4 이벤트 함수 186
7.2 아두이노: 함수 191
7.2.1 함수 유형1,2 191
7.2.2 함수 유형3,4 194
【심화】 P5.js와 아두이노의 함수 유형 비교 197

08 P5.js→아두이노
8.1 시리얼 통신 202
【심화】 시리얼(Serial) 통신 202
8.2 연동 실습을 위한 준비 207
【중요】 연동 시 주의사항 및 실행 순서 209
8.3 정수 송·수신1 211
【심화】 createButton() & p5.Element 217
【심화】 아두이노의 폴링(Polling) & 인터럽트(Interrupt) 218
8.4 정수 송·수신2 223
8.5 문자열 송·수신 225
8.6 복수 데이터 송·수신 228

09 아두이노→P5.js
9.1 정수 송·수신1 236
【심화】 p5.js의 폴링(Polling) & 인터럽트(Interrupt) 239
9.2 정수 송·수신2 242
9.3 문자열 송·수신 247
9.4 복수 데이터 송·수신 252

10. 아두이노↔P5.js
10.1 P5.js→아두이노 핸드쉐이킹 261
【심화】 핸드쉐이킹 방식의 특징 265
10.2 아두이노→P5.js 핸드쉐이킹 271
【심화】 시리얼 통신에서 문자열 송·수신의 장·단점 276
10.3 아두이노↔P5.js 핸드쉐이킹 277

마무리
마무리 288

출판사 서평

[1] 시리얼 통신 기반 가상(P5.js)과 현실(아두이노)을 연동
P5.js와 아두이노의 핵심 공통분모 다섯 가지(변수, 조건, 반복, 배열, 함수)에 집중하여 구성하였고 시리얼 통신으로 연동함으로써 상상을 현실로 구현합니다.

[2] 동적, 시각적, 물리적 놀이를 통한 자연스러운 학습
시각적, 물리적 출력으로 코딩 학습을 쉽고 빠르고 재미있게∼! 연동을 통해 기존의 S/W 코딩과 H/W 코딩의 한계를 뛰어넘어 초보자도 S/W 및 H/W 코딩에 친숙해질 수 있도록 도와줍니다.

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

[4] 실전 코딩이 우선! 이론은 따라오는 것
기존 대다수의 코딩 서적들이 따르는 방식인 이론 설명 후 코드를 소개하는 방식이 아니라, 질문의 [예제]를 우선 실행해 보고 코드 [설명]으로 의미를 확인한 후, [심화]를 통해 좀 더 심층적인 내용을 살펴볼 수 있도록 설계하였습니다. 즉, [예제] → [설명] → [심화]

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

작가정보

저자(글) 김성일

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