네이처 오브 코드: 자바스크립트판

자바스크립트와 p5.js로 배우는 자연계 시뮬레이션과 창의적 코딩

대니얼 시프먼(Daniel Shiffman) 지음 | 윤인성 옮김

제이펍 2025년 09월 10일 출간 국내도서 : 2025년 07월 22일 출간

작품소개

책소개

10년 이상 수많은 독자에게 영감을 준 《Nature of Code》의 자바스크립트 버전 개정판. ‘코딩 트레인’ 채널의 대니얼 시프먼이 쓴 이 혁신적인 안내서는 초보자와 숙련된 프로그래머 모두를 코드와 재미있는 창의성이 만나는 세계로 안내한다. 벡터, 뉴턴의 운동 법칙, 진동 등 자연계의 신비를 부드럽게 풀어내며, 진화와 유전 알고리즘, 신경망, 머신러닝 같은 복잡한 주제까지 친절하게 살펴본다. 직접 물리 엔진을 구현하며 코드를 예술로 바꾸는 놀라운 즐거움을 경험할 수 있다.

목차

지은이 · 감수자 · 옮긴이 소개 xii
옮긴이 머리말 xiii
베타리더 후기 xiv
추천사 xvi
감사의 글 xviii
이 책에 대하여 xxiv

CHAPTER 0 무작위성 1
0.1 랜덤 워크 2
0.2 랜덤 워커 클래스 3
0.3 확률과 비균등분포 10
0.4 무작위 숫자의 정규분포 14
0.5 무작위 숫자의 사용자 정의 분포 18
0.6 펄린 노이즈를 사용한 더 부드러운 접근 21

CHAPTER 1 벡터 33
1.1 벡터의 중요성 34
1.2 p5.js에서의 벡터 37
1.3 벡터 덧셈 40
1.4 추가적인 벡터 수학 45
1.5 벡터의 길이 50
1.6 벡터 정규화 52
1.7 벡터를 사용한 움직임 54
1.8 가속도 59

CHAPTER 2 힘 71
2.1 힘과 뉴턴의 운동 법칙 72
2.2 힘의 누적 78
2.3 질량 고려하기 80
2.4 힘 만들기 82
2.5 힘 모델링하기 88
2.6 n체 문제 110

CHAPTER 3 진동 117
3.1 각도 118
3.2 각운동 120
3.3 삼각함수 126
3.4 이동 방향 가리키기 127
3.5 극좌표와 데카르트 좌표 131
3.6 진동의 특성 134
3.7 각속도를 이용한 진동 138
3.8 파동 142
3.9 스프링 힘 147
3.10 진자 154

CHAPTER 4 파티클 시스템 165
4.1 파티클 시스템의 중요성 166
4.2 단일 파티클 168
4.3 파티클 배열 172
4.4 파티클 방출기 178
4.5 방출기의 시스템 181
4.6 상속과 다형성 184
4.7 힘을 사용하는 파티클 시스템 197
4.8 밀어내는 객체의 힘을 적용한 파티클 시스템 200
4.9 이미지 텍스처와 가산 혼합 205

CHAPTER 5 자율 에이전트 213
5.1 스스로의 의지로 선택하는 힘 214
5.2 차량과 조향 215
5.3 흐름장 232
5.4 경로 따라가기 239
5.5 복잡한 시스템 256
5.6 알고리즘 효율성: 내 프로그램은 왜 이렇게 느릴까? 273

CHAPTER 6 물리 라이브러리 285
6.1 왜 물리 라이브러리를 사용하는가? 287
6.2 Matter.js 라이브러리 읽어 들이기 289
6.3 Matter.js 개요 291
6.4 p5.js와 함께 사용하는 Matter.js 301
6.5 정적 Matter.js 바디 306
6.6 다각형과 도형 그룹 307
6.7 Matter.js 제약 315
6.8 여러 가지 힘 적용하기 323
6.9 충돌 이벤트 327
6.10 간단한 소개: 적분 331
6.11 Toxiclibs.js로 구현하는 베를레 물리 333
6.12 연체 시뮬레이션 342
6.13 인력과 척력 355

CHAPTER 7 셀룰러 오토마타 359
7.1 셀룰러 오토마타란 무엇인가? 360
7.2 기초 셀룰러 오토마타 362
7.3 울프럼의 분류 체계 380
7.4 생명 게임 382
7.5 객체지향적인 셀 만들기 391
7.6 전통적인 셀룰러 오토마타의 변형 394

CHAPTER 8 프랙털 399
8.1 프랙털이란? 400
8.2 재귀 403
8.3 코크 곡선 414
8.4 나무 422
8.5 L-시스템 430

CHAPTER 9 진화적 컴퓨팅 439
9.1 유전 알고리즘: 자연의 지혜 440
9.2 왜 유전 알고리즘을 사용할까? 441
9.3 유전 알고리즘의 작동 원리 444
9.4 유전 알고리즘 코딩하기 452
9.5 유전 알고리즘 맞춤 설정하기 464
9.6 진화하는 힘: 스마트 로켓 471
9.7 대화형 선택 484
9.8 생태계 시뮬레이션 489

CHAPTER 10 신경망 499
10.1 인공 신경망 소개 501
10.2 퍼셉트론 505
10.3 신경망에 ‘네트워크’ 추가하기 521
10.4 ml5.js를 사용한 머신러닝 524
10.5 제스처 분류기 만들기 532

CHAPTER 11 신경진화 545
11.1 강화 학습 547
11.2 신경망의 진화: NEAT 알고리즘 552
11.3 플래피 버드 코딩하기 553
11.4 신경진화하는 플래피 버드 557
11.5 신경진화로 조향하기 568
11.6 신경진화하는 생태계 576

맺음말 587
부록: 생명체 디자인 589
도판 출처 593
찾아보기 596

책 속으로

토요일 아침입니다. 상쾌하게 조깅을 하고, 맛있는 시리얼을 먹은 뒤, 따뜻한 캐모마일 차와 함께 조용히 컴퓨터 앞에 앉았습니다. 달력을 보니 곧 오랜 친구의 생일이라 p5.js로 축하 카드를 만들기로 했습니다. 색종이를 날리는 축하 카드는 어떨까요? 보라색, 분홍색 색종이, 별 모양, 네모 모양 색종이, 빠르게 날리는 색종이, 천천히 떨어지는 색종이 등 여러 가지 모양과 움직임을 가진 색종이들이 한꺼번에 화면에서 터지는 축하 카드를 만들어보기로 했습니다. / 이는 파티클 시스템입니다. 색종이 조각(confetti)이라는 파티클을 다루는 파티클 시스템입니다. Particle 클래스를 다시 설계해서 색상, 모양, 움직임 등을 저장하는 변수를 넣을 수 있습니다. (185쪽)

지금까지 만든 플래피 버드 게임은 마우스 클릭으로 조작했습니다. 이제는 컴퓨터가 직접 게임을 플레이하도록 만들고, 신경진화를 통해 게임하는 방법을 학습시켜보겠습니다. ml5.js에는 신경진화 기능이 내장되어 있어서, 비교적 쉽게 구현할 수 있습니다. 첫 번째 단계는 새에게 ‘뇌’를 심어서 스스로 날갯짓을 할지 말지 결정할 수 있게 만드는 것입니다. (557쪽)

좋은 무작위 숫자 생성기는 서로 연관성이 없고 규칙성이 보이지 않는 숫자들을 만듭니다. 하지만 자연스럽고 생동감 있는 움직임을 프로그래밍할 때는 약간의 무작위성만 있으면 충분합니다. 오히려 완전히 균일한 무작위성은 부자연스러울 수 있습니다. 켄 펄린(Ken Perlin)이 만든 펄린 노이즈(Perlin noise) 알고리즘은 이러한 부분을 고려해 만들어졌습니다. 이 알고리즘은 연속해서 나오는 숫자들이 서로 비슷한 값을 갖도록 합니다. 이렇게 하면 숫자들 사이의 변화가 부드러워져서, 완전히 무작위인 경우보다 더 자연스러운 느낌을 줍니다. 그래서 펄린 노이즈는 구름, 풍경, 대리석 무늬 같은 자연스러운 패턴을 만드는 데 많이 사용됩니다. (21쪽)

다음 그림은 이 책의 내용을 바탕으로 생태계를 만들 때 도움이 될 만한 아이디어를 제공하는 그림입니다. 새로운 개념과 기술을 배울 때마다 이 그림이 어떻게 발전하는지 살펴보세요. / 이 책의 주된 목적은 알고리즘과 행동 원리를 보여주는 것이기 때문에, 예제들은 대부분 원 같은 간단한 도형 하나로만 이루어져 있습니다. 하지만 여러분은 이보다 더 창의적인 생각을 가지고 있을 거예요. 그러니 여러분이 그린 요소들로 디자인에 도전해보세요. 만약 디자인을 코드로 옮기는 게 처음이라면, 이 책의 일러스트레이터인 재나 마시가 쓴 가이드를 참고해보세요. 부록에 있는 이 가이드는 코드로 그림을 그리는 방법을 알려줍니다. (32쪽)

attract() 메서드의 코드를 다시 살펴보세요. 나누기 기호가 보이나요? 나누기 연산은 할 때마다 ‘만약 거리가 아주 작거나 (더 심각하게는!) 0이 되면 어떻게 될까?’라는 질문을 해봐야 합니다. 0으로 나누는 것은 불가능하고, 0.0001 같은 아주 작은 수로 나누면 사실상 10,000을 곱하는 것과 같습니다! 이는 실제 중력 공식에서는 문제가 없을 수 있지만, p5.js는 실제 세계가 아닙니다. p5.js에서는 mover가 attractor에 너무 가까워질 수 있고, 그러면 힘이 너무 강해져서 mover가 화면 밖으로 날아갈 수 있습니다. / 반대로, mover가 attractor에서 500픽셀 떨어져 있다고 가정해봅시다. 거리를 제곱하기 때문에 이는 힘을 250,000으로 나누는 셈이 됩니다. 그러면 힘이 너무 약해져서 거의 효과가 없어 보일 수도 있습니다. (106쪽)

시에르핀스키 삼각형만큼 흥미롭지는 않습니다. 앞서 언급했던 것처럼 256개의 기초 규칙 집합의 대부분은 그다지 멋진 패턴을 만들지 못합니다. 하지만 두 가지 상태만 가진 단순한 셀들로도 자연에서 볼 수 있는 놀라운 패턴을 만들어낼 수 있다는 사실은 정말 신기합니다. 예를 들어 그림 7.18의 고둥 껍질은 울프럼의 규칙 30이 만드는 패턴과 비슷한 모양을 가지고 있습니다. 이를 통해 셀룰러 오토마타가 자연의 패턴을 모방하고 새로운 패턴을 만드는 데 얼마나 유용한지 알 수 있습니다. / 그럼 다양한 규칙 집합이 만드는 결과를 더 자세히 살펴보기 전에, p5.js로 울프럼의 기초 셀룰러 오토마타를 만들고 화면에 표시하는 방법을 배워보겠습니다. (369쪽)

출판사 서평

세계에서 가장 웃긴 코딩 유튜버 대니얼 시프먼과 함께하는 특별한 모험경외심을 불러일으키는 새들의 군무 패턴이나 반딧불이의 최면 같은 춤을 코딩으로 재현할 수 있다면 어떨까요? 인기 유튜브 채널 ‘코딩 트레인’의 대니얼 시프먼이 쓴 《The Nature of Code》는 수많은 독자를 크리에이터로 변화시켜 과학, 예술, 기술 간의 장벽을 허물고 코드를 단순한 작업 도구가 아닌 무한한 창의성을 위한 캔버스로 인식하도록 유도했습니다. 이번에 출간된 《네이처 오브 코드(자바스크립트판)》은 예제 코드 언어를 프로세싱에서 자바스크립트(p5.js)로 바꾸고 내용을 추가한 최신 개정판입니다.

벡터의 개념으로 시작해 뉴턴의 운동 법칙, 진동, 삼각법을 통해 자바스크립트로 간단한 물리 엔진을 직접 만들어봅니다. 이를 토대로 복잡계, 조향력, 무리 지어 다니기를 시뮬레이션하고, 나아가 진화와 유전 알고리즘에서 신경망, 머신러닝, 신경진화 시스템 등 복잡한 주제까지 이해하기 쉽게 설명합니다. 주위에서 흔히 볼 수 있는 자연계의 현상을 객체지향 프로그래밍을 활용해 시각적으로 멋진 하나의 작품으로 완성해내는 과정은 정말 짜릿합니다. 책의 예제 코드는 모두 책의 공식 웹사이트에서 바로 돌려볼 수 있습니다.

모두 ‘코딩 트레인’에 탑승해서 창의적 코딩의 특별한 모험을 시작하세요. 코딩의 기본을 익히는 동시에 코드를 예술로 바꾸는 즐거움을 발견할 수 있습니다. 자연을 새로운 방식으로 바라보고 그 경이로움에서 창작물에 영감을 얻게 될 것입니다. 초보자이든 숙련된 프로그래머이든, 이 책이 여러분을 코드와 창의성이 만나는 놀라운 세계로 안내할 것입니다.

주요 내용물리 엔진: 중력의 밀고 당김을 시뮬레이션합니다.무리 지어 다니기: 새 떼의 매혹적인 군무를 연출해보세요.가지를 치는 나무: 생생하고 유기적인 나뭇가지 구조를 만들어봅니다.신경망: 학습하고 적응하는 지능형 시스템을 제작하세요.셀룰러 오토마타: 자기 조직화 패턴의 마법을 발견하세요.진화 알고리즘: 코드에서 자연선택을 직접 체험해보세요.

인물정보

저자(글) 대니얼 시프먼(Daniel Shiffman)

창의적 코딩을 재미있고 친근한 방식으로 전 세계와 공유하는 것을 사명으로 삼고 있다. 구독자 174만 명의 유튜브 채널 ‘코딩 트레인’에 자바스크립트(p5.js)와 자바(프로세싱) 같은 프로그래밍 언어의 기초부터 물리 시뮬레이션, 머신러닝, 데이터 시각화를 위한 알고리즘까지 다양한 주제의 동영상 튜토리얼을 게시하고 있다. 뉴욕 대학교 티시 예술대학의 ITP/IMA에서 부교수로 일하며, 여가 시간에는 반려 닭인 판초, 루이스, 빌보를 돌본다. 《러닝 프로세싱(2판)》(비제이퍼블릭, 2016)의 저자이기도 하다.

번역 윤인성

출근하기가 싫어서 책을 집필하기 시작했다. 현재 직업 특성상 집에서 나갈 이유가 별로 없다는 것에 굉장히 만족하고 있다. 홍차와 커피를 좋아하며, 기타와 가야금 연주, 그림 그리기, 스컬핑 등이 취미다. 저서로는 《쉽게 배우는 C# 프로그래밍(3판)》, 《HTML5 웹 프로그래밍 입문(4판)》, 《혼자 공부하는 파이썬(개정판)》, 《자바스크립트 프로그래밍 입문(2판)》, 《C# 프로그래밍(3판)》 등이 있으며, 역서로는 《블렌더 VFX》, 《만들면서 배우는 블렌더 3D 입문》, 《문제 해결을 위한 알고리즘 with 수학 알고리즘》, 《내 코드가 그렇게 이상한가요?》, 《이펙티브 코틀린》 등이 있다. 이번 책은 78번째 책이다.