P5.js 코딩 기초편

누구나 코딩 아티스트 4

김성일 지음

코딩북스 2022년 03월 02일 출간

작품소개

책소개

전공 불문 코딩 입문자, 코딩을 포기하고 싶지 않은 자를 위한 책:

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

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

목차

01 시작
1.1 p5.js란? 14
1.2 코딩 학습 방법 17
1.3 p5.js 코딩 환경 19

02 표현
2.1 출력 화면의 크기 44
2.2 점과 선의 표현 49
2.3 원과 사각형의 표현 51
2.4 문자의 표현 56
2.5 색상의 표현 60
2.6 원호 및 사용자 정의 도형 71
2.7 미니 프로젝트 81
2.8 정리 83

03 변수Ⅰ
3.1 변수의 선언과 초기화 87
3.2 변수와 연산 92
3.3 변수 기반 움직임 표현 127
3.4 전역변수와 지역변수 140
3.5 미니 프로젝트 146
3.6 정리 149

04 변수Ⅱ
4.1 변수 기반 다양한 움직임 구현 152
4.1.1 속도 152
4.1.2 가속도 156
4.1.3 마찰 162
4.1.4 진동 163
4.1.5 회전 운동 179
4.1.6 불규칙 운동 183
4.2 시스템 변수 기반 상호 작용 198
4.3 감속 212
4.4 미니 프로젝트 215
4.5 정리 218

05 조건Ⅰ
5.1 if문 221
5.2 if-else문 253
5.3 <if-else if>문 258
5.4 미니 프로젝트 269
5.5 정리 272

06 조건Ⅱ
6.1 if문과 시스템 변수 275
6.2 중첩 if문 290
6.3 switch문 302
6.4 미니 프로젝트 308
6.5 정리 310

07 반복Ⅰ
7.1 for문 313
7.2 while문 339
7.3 do-while문 347
7.4 미니 프로젝트 350
7.5 정리 352

08 반복Ⅱ
8.1 for문과 시스템 변수 354
8.2 중첩 for문 368
8.3 미니 프로젝트 376
8.4 정리 378

09 배열Ⅰ
9.1 1차원 배열 380
9.2 배열과 반복문 390
9.3 미니 프로젝트 414
9.4 정리 416

10 배열Ⅱ
10.1 배열과 시스템 변수 420
10.2 2차원 배열 440
10.3 미니 프로젝트 450
10.4 정리 452

11 함수Ⅰ
11.1 함수 유형 454
11.2 함수 유형1 459
11.3 함수 유형2 465
11.4 함수 유형3 474
11.5 함수 유형4 484
11.6 미니 프로젝트 499
11.7 정리 503

12 함수Ⅱ
12.1 이벤트 함수 506
12.2 함수와 배열 529
12.3 미니 프로젝트 554
12.4 정리 556

마무리
마무리 558

출판사 서평

<1> 자바스크립트 기초 코딩의 핵심 다섯 가지에 집중
다양한 코딩 언어들의 핵심 공통분모 다섯 가지 (변수, 조건, 반복, 배열, 함수)에 집중하여 구성하였고 사용 빈도가 높은 함수들과 시각적 표현 도구를 선별, 활용하였습니다.

<2> 동적, 시각적 놀이를 통한 자연스러운 학습
동적, 시각적 출력으로 코딩 학습을 쉽고 빠르고 재미있게∼! 지루하고 흥미가 떨어지는 텍스트 출력 방식이 아닌 동적, 시각적 놀이를 통해 코딩 언어에 친숙해질 수 있도록 도와줍니다.

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

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

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

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

작가정보

저자(글) 김성일

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