ワタタクp5.jsの基本的な書き方は覚えたけど、もっと「生きている」ような表現や、自然現象のような美しいアートを作りたい…！
そう思ったとき、多くの人が手に取るのが、クリエイティブコーディングのバイブル『The Nature of Code』です。
でも、この本、正直言ってかなり手強い……。
パラパラッとめくると、ベクトル、力、三角関数…といった数学・物理のオンパレード。「うっ、苦手かも…」と、そっと本を閉じてしまった経験はありませんか？（僕はあります！）
だけど、この本がもたらす表現力は計り知れないと思うんです。だからこそ、「どうすれば挫折せずに学びきれるか？」を真剣に考え、僕なりの学習ロードマップを作成しました。
このロードマップのメリットはこちらです。
- 学習の全体像を把握し、目的を明確にできる
- 効率よく学習することができる
- 挫折を予防しやすくなる
ワタタクこの記事が、これから『The Nature of Code』という広大な世界へ旅立つあなたの、心強い羅針盤になれば嬉しいです。
- クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
- コンセプトは「クリエイティブコーディング1万時間の歩き方」
- 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）
- NATURE OF CODEは2025年7月21日（日）より開始
実際に取り組んでいるNATURE OF CODEはこちら。
ポチップ
この記事の中で紹介している『The Nature of Code』で学習計画を書いているバインダーとリフィル。予定と合わせて書けたり、作品のプロジェクトごとにまとめやすいプロジェクトシートなどもあるので便利です。
ポチップ
ポチップ
数学・物理が苦手でも大丈夫！『The Nature of Code』挫折しないための学習ロードマップ
【STEP1：準備編】旅の前に、装備と地図を整える
いきなりコードを書き始める前に、まずは旅の準備を万全にします。ここを丁寧に行うことが、挫折を防ぐ最大の鍵。
1.本の全体像を掴み、目的を自分の中に刻む
まずはウォーミングアップ。焦らず、以下の順番で本と向き合います。
- 序文を読む： 著者がこの本に込めた想いや目的を理解。
- 目次を読む： これからどんな冒険が待っているのか、地図を眺めるように確認。
- 全体をパラパラめくる： 「へぇ、こんな面白そうな作例があるんだ！」と、ワクワクする気持ちを大切に、最後までざっと目を通す。
その上で、「あなた自身が、なぜこの本を学ぶのか？」という目的（ゴール）を、手帳やノートに書き出してみましょう。僕のゴールはこれ。
- 世界をアルゴリズムで考え、必要なコードが思い浮かぶようにする
- 作品に自然現象を取り入れ、生きているアートを作れるようにする
- 好きなレザーバインダー（システム手帳）のPLOTTERに、アルゴリズム、概念やコードをさっとメモできるようになる
- 学習、思考、作品の質を向上させる
- 本を始めたときより、完璧主義をやめ、実験と考える。その日のベストを尽くせばいいと思って、どんどん作り、試し、失敗を気にしぎずに発見を楽しむ自分になる
ワタタクこの目的が、うわ、挫折しそうなときに乗り越えるための道標となります。
2.学習環境を整える
スムーズに学習を進めるための環境を準備をします。
- サンプルコードのページをお気に入り登録： 本に載っているコードは、全文が乗っていないことが多いです。なので公式のサンプルコードページは必須アイテム。すぐにアクセスできるようにブックマークしておくと効率がいいです。
- The Nature of Code 公式サイト→（https://natureofcode.com/）
- Processingのサンプルコードのリンク→https://github.com/nature-of-code/noc-examples-processing
- p5.jsのサンプルコードのリンク→https://github.com/nature-of-code/noc-book-2
- 記録用のノートか手帳を用意する： 学んだことや発見を記録する「航海日誌」を用意します。僕はレザーバインダーのPLOTTERのA5サイズを使っていますが、デジタルならNotionなどもおすすめ。
使用しているPLOTTERのA5サイズ。
【STEP2：実践編】実験と発見を繰り返しながら学ぶ
準備が整ったら、いよいよ実践。
ワタタク大切なのは「完璧な理解」よりも「実験と発見」を楽しむ姿勢です。
1. 焦らず、コードの「なぜ？」を考える
進捗が遅くても気にしないこと。大切なのは、以下のような思考を巡らせることです。
- 暗記ではなく、原理を理解することを目指す。
- 「なぜこのコードで、こんな動きになるんだろう？」と問いを持つ。
- まずはサンプルコードを動かしてみる。
- 次に、数値を少し変えてみる。「ここの数字を変えたら、動きがどう変わるかな？」と実験を繰り返す。
ワタタク「難しそう」で止まるのではなく、「どうなってるんだろう？」という好奇心を原動力にする！間違いや失敗は、最高の学びのチャンスだと思うこと。
2. 自分だけの「アルゴリズム・ライブラリ」を創る
この学習法の核となるのが、自分だけのアルゴリズム事典を作ることです。学んだ概念やコードを、決まったフォーマットで記録していきます。強力な武器になると思います。
【アルゴリズム事典の例】
- パターン名: 例：「減衰する波紋」
- 観察対象: 例：「雨の日の水たまり」
- ルール（日本語）: 例：「クリック地点から円が時間差で発生。円は拡大し、透明度は下がる」
- 関連キーワード:
sin,alpha,配列,class - 参照スケッチ: （自分が書いたProcessing、p5.js Web Editorなどのリンク）
ワタタク上記を書くことによって、「上達の可視化」することができ、見返した時の成長を感じることができます。
【STEP3：習慣化編】学びを日常に溶け込ませる
最後のステップは、この学びを特別なイベントではなく、日常の習慣にすること。
1. 学習をスケジュールに組み込む
「時間があるときにやろう」では、なかなか続かないので「毎週〇曜日の夜はNATURE OF CODEの日」というように、具体的にスケジュールに組み込むこと。
ワタタク僕はPLOTTER A5サイズのChart Grid(チャートグリッド)にどの曜日に何をするのかを書いているよ。
Plotter A5 Chart Gridの公式ページ→https://www.plotter-japan.com/products/notepad/chart-grid
2. アウトプットを前提とする
学んだことは、ブログやSNSで発信することを前提にNATURE OF CODEに取り組むこと。
僕もこのブログで「#NOCプロジェクト」として、学びの過程を定期的にアウトプットしていきます。
ワタタク人に説明しようとすることで、理解が格段に深まる。
3. 日常のすべてを観察対象にする
メモ帳を常に持ち歩き、風に揺れる木々、群衆の動き、雨粒の波紋など、日常に潜む「コードの種」を見つけたらすかさずメモ。
ワタタクNATURE OF CODEの学習が進めば進むほど、世界が少し違って見えてくるはず。
まとめ：NATURE OF CODEの世界へ、ようこそ！
文系出身で数学・物理に苦手意識のあった僕が、これからこの壮大な本に挑みます！
簡単じゃない。
でも、やりきった先には、今とは比べ物にならない表現力と、新しい自分に出会えると思う。
このブログを読んでくれているあなたも、ぜひ一緒にこの旅に出てみませんか？
まずは第一歩として、あなただけの学習計画を立ててみてください。
僕もX（旧Twitter）で「#クリエイティブコーディングロード」「#NOCプロジェクト」のハッシュタグで進捗を発信します。もしよければ、あなたの目標や進捗も、ぜひこのハッシュタグで投稿してみてください。一緒に頑張る仲間がいると、もっと楽しくなりますよ！
ワタタクそれでは今日も、レッツワクワクコーディング！
実際に取り組むNATURE OF CODEはこちら。
ポチップ
この記事の中で紹介している『The Nature of Code』で学習計画を書いているバインダーとリフィル。予定と合わせて書けたり、作品のプロジェクトごとにまとめやすいプロジェクトシートなどもあるので便利です。
ポチップ
ポチップ