자바스크립트로 코딩을 배우며 풀어보는 자연계의 신비 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)로 바꾸고 내용을 추가한 최신 개정판입니다. 벡터의 개념으로 시작해 뉴턴의 운동 법칙, 진동, 삼각법을 통해 자바스크립트로 간단한 물리 엔진을 직접 만들어봅니다. 이를 토대로 복잡계, 조향력, 무리 지어 다니기를 시뮬레이션하고, 나아가 진화와 유전 알고리즘에서 신경망, 머신러닝, 신경진화 시스템 등 복잡한 주제까지 이해하기 쉽게 설명합니다. 주위에서 흔히 볼 수 있는 자연계의 현상을 객체지향 프로그래밍을 활용해 시각적으로 멋진 하나의 작품으로 완성해내는 과정은 정말 짜릿합니다. 책의 예제 코드는 모두 책의 공식 웹사이트에서 바로 돌려볼 수 있습니다. 모두 ‘코딩 트레인’에 탑승해서 창의적 코딩의 특별한 모험을 시작하세요. 코딩의 기본을 익히는 동시에 코드를 예술로 바꾸는 즐거움을 발견할 수 있습니다. 자연을 새로운 방식으로 바라보고 그 경이로움에서 창작물에 영감을 얻게 될 것입니다. 초보자이든 숙련된 프로그래머이든, 이 책이 여러분을 코드와 창의성이 만나는 놀라운 세계로 안내할 것입니다. 주요 내용물리 엔진: 중력의 밀고 당김을 시뮬레이션합니다.무리 지어 다니기: 새 떼의 매혹적인 군무를 연출해보세요.가지를 치는 나무: 생생하고 유기적인 나뭇가지 구조를 만들어봅니다.신경망: 학습하고 적응하는 지능형 시스템을 제작하세요.셀룰러 오토마타: 자기 조직화 패턴의 마법을 발견하세요.진화 알고리즘: 코드에서 자연선택을 직접 체험해보세요.