P5.js & 아두이노 연동

누구나 코딩 아티스트 6

김성일 저자(글)

코딩북스 · 2023년 03월 01일

책 소개

전공 불문 코딩 입문자, 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!

작가정보

저자(글) 김성일

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

목차

• 01 시작
  1.1 코딩 학습 방법 15
  1.2 p5.js란? 20
  1.2.1 p5.js 설정 23
  1.2.2 p5.js 코딩 환경 24
  1.2.3 p5.js 실행 27
  【심화1.1】 p5.js와 프로세싱의 차이점 28
  1.3 아두이노란? 32
  1.3.1 아두이노 설치 34
  1.3.2 아두이노 코딩 환경 36
  1.3.3 아두이노 실행 38
  
  02 표현
  2.1 p5.js: 표현 42
  2.1.1 출력 화면의 크기 42
  2.1.2 점과 선의 표현 46
  【심화2.1】 함수의 사용법 검색 48
  2.1.3 원과 사각형의 표현 49
  【심화2.2】 원과 사각형을 그릴 때의 기준점 설정 50
  2.1.4 문자의 표현 51
  2.1.5 색상의 표현 53
  【심화2.3】 2진수 & 16진수 55
  【심화2.4】 비트(Bit) & 바이트(Byte) 56
  2.1.6 원호의 표현 60
  2.2 아두이노: 표현 63
  2.2.1 입·출력 부품 63
  2.2.2 입·출력 부품의 핀번호 설정 64
  2.2.3 LED 점멸 66
  
  03 변수
  3.1 p5.js: 변수 71
  3.1.1 변수 선언과 초기화 71
  【심화3.1】 p5.js 또는 자바스크립트의 키워드(Keyword) 74
  3.1.2 변수와 연산 75
  【심화3.2】 유니코드(Unicode) & 아스키코드(ASCII Code) 78
  【심화3.3】 p5.js의 문자 표현 81
  【심화3.4】 한글 표현 방법 85
  【심화3.5】 데이터형(Data Type) 총정리 86
  【심화3.6】 var & let & const 91
  【심화3.7】 컬러 표현 94
  3.1.3 변수 기반 움직임 표현 97
  3.1.4 전역변수와 지역변수 104
  3.1.5 시스템변수와 다양한 움직임 구현 106
  【심화3.8】 frameRate() & frameRate(프레임수) 109
  3.2 아두이노: 변수 118
  3.2.1 시리얼 통신으로 변숫값 확인 118
  【심화3.9】 p5.js와 아두이노의 비교: 기본 데이터형 124
  3.2.2 변수 기반 각종 부품의 특성 확인 126
  【심화3.10】 const와 #define 비교 129
  【심화3.11】 팅커캐드(Tinkercad) 129
  【심화3.12】 초음파센서로 거리 구하기 151
  3.2.3 전체 회로도 152
  3.2.4 변수 기반 제어 154
  【심화3.13】 p5.js와 아두이노의 차이: map() 155
  【심화3.14】 아두이노의 입·출력 함수 정리 162
  【심화3.15】 부저의 tone() 함수와 서보모터 사용 시 유의사항 165
  
  04 조건
  4.1 p5.js: 조건 167
  4.1.1 if문 167
  【심화4.1】 비교 연산자 보충 169
  4.1.2 if-else문 175
  4.1.3 <if-else if>문 176
  4.1.4 if문과 시스템 변수 179
  4.1.5 중첩 if문 186
  4.1.6 switch문 188
  4.2 아두이노: 조건 191
  4.2.1 if문, if-else문 191
  【심화4.2】 p5.js와 아두이노의 차이: boolean 194
  【심화4.3】 p5.js와 아두이노의 차이: if문 196
  【심화4.4】 채터링(Chattering) 204
  4.2.2 <if-else if>문 213
  4.2.3 중첩 if문 214
  4.2.4 switch문 217
  
  05 반복
  5.1 p5.js: 반복 224
  5.1.1 for문 224
  5.1.2 while문, do-while문 228
  5.1.3 for문과 상호작용 231
  5.1.4 중첩 for문 233
  5.2 아두이노: 반복 235
  5.2.1 for문 235
  【심화5.1】 아두이노와 p5.js의 형변환 및 문자열 더하기 243
  5.2.2 while문, do-while문 244
  5.2.3 중첩 for문 245
  
  06 배열
  6.1 p5.js: 배열 250
  6.1.1 1차원 배열 250
  6.1.2 배열과 반복문 255
  6.1.3 2차원 배열 264
  6.2 아두이노: 배열 267
  6.2.1 1차원 배열 267
  6.2.2 배열과 반복문 269
  【심화6.1】 p5.js와 아두이노의 차이: 배열 270
  6.2.3 2차원 배열 282
  
  07 함수
  7.1 p5.js: 함수 285
  7.1.1 함수 유형 285
  7.1.2 함수 유형1 288
  7.1.3 함수 유형2 290
  7.1.4 함수 유형3 293
  7.1.5 함수 유형4 296
  【심화7.1】 함수 만들기 연습 299
  7.1.6 이벤트 함수 300
  7.2 아두이노: 함수 308
  7.2.1 함수 유형1 308
  7.2.2 함수 유형2 310
  7.2.3 함수 유형3 313
  7.2.4 함수 유형4 314
  【심화7.2】 P5.js와 아두이노의 함수 유형 비교 316
  7.2.5 함수 유형 응용 319
  【심화7.3】 p5.js와 아두이노의 차이: random() 327
  【심화7.4】 p5.js와 아두이노의 차이: randomSeed() 328
  
  08 비트
  8.1 비트 연산 335
  【심화8.1】 진수 변환 337
  【심화8.2】 논리연산자 & 비트연산자 340
  【심화8.3】 p5.js의 비트 연산 341
  8.2 비트 처리 343
  【심화8.4】 bitRead() 350
  
  09 시리얼 통신
  9.1 시리얼 통신 354
  9.2 문자 송·수신 358
  9.3 문자열 송·수신 361
  【심화9.1】 시리얼 통신에서 수신된 문자열 중 정수 추출 365
  9.4 정수 송·수신 367
  
  10 P5.js→아두이노
  10.1 연동 실습을 위한 준비 378
  【심화10.1】 p5.SerialPort 라이브러리를 사용하는 또 다른 방법 380
  【심화10.2】 연동 실습 절차 및 주의사항 382
  10.2 정수 송·수신1 384
  【심화10.3】 폴링 방식에서 while문 & if문 392
  【심화10.4】 p5.js에서의 송신 빈도 조절: frameRate() 400
  10.3 정수 송·수신2 401
  【심화10.5】 아두이노에서 정숫값 수신 시 데이터형 407
  10.4 문자열 송·수신 408
  10.5 복수 데이터 송·수신 411
  【심화10.6】 findUntil() 419
  
  11 아두이노→P5.js
  11.1 정수 송·수신1 423
  【심화11.1】 p5.SerialPort 시리얼 통신 관련 이벤트 429
  【심화11.2】 아두이노에서의 송신 빈도 조절: delay() 434
  【심화11.3】 Serial.write() & Serial.print() 비교 437
  11.2 정수 송·수신2 440
  11.3 문자열 송·수신 450
  11.4 센서값 분리 송·수신 455
  【심화11.4】 highByte() & lowByte() 462
  11.5 복수 센서값 송·수신1 463
  11.6 복수 센서값 송·수신2 473
  11.7 파일 처리 480
  【심화11.5】 파일 끌어당겨 놓기(Drag & Drop) 494
  【심화11.6】 p5.js의 시간 관련 함수 495
  【심화11.7】 아스키코드값 확인 497
  
  12 아두이노↔P5.js
  12.1 P5.js→아두이노 핸드쉐이킹(Handshaking) 501
  【심화12.1】 핸드쉐이킹의 특징 505
  12.2 아두이노→P5.js 핸드쉐이킹(Handshaking) 512
  12.3 아두이노↔P5.js 핸드쉐이킹(Handshaking) 527
  【심화12.2】 출력 화면 크기 최대 설정 535
  【심화12.3】 아두이노 & p5.js 언어 비교 536
  【심화12.4】 비주얼 스튜디오 코드에서 p5.js 실행 및 아두이노 연동 542
  
  마무리
  마무리 552

기본정보

1:1 문의

ISBN	9791198184634
발행(출시)일자	2023년 03월 01일
쪽수	552쪽
크기	210 * 297 mm