はじめに

最近、クリエイティブ・コーディングをはじめました。
...というか準備環境を整えたといった感じですね。。

ループしない。一生見てられるクリエイティブコンテンツが作りたい。

自身のホームページ上で作品を公開して、お部屋のディスプレイにとかにバックグラウンドムービーがてら、おしゃれ無音アニメーションを流しておくとおしゃれかなぁというご提案がしたいという今日この頃。
YouTubeだと広告がはさまりますし、時間制限もあるじゃないですか。
映像データのループだと、画一化しちゃいますし、ちょっとづつ変化のある「一生見てられるインタラクティブアニメーション」をお届けできればいいなぁと考えています。

作品例1: Twisted scroll rings

初期値をランダムにして、一定時間経過するとリセットされるようにしています。
ちょっとリセット時間が短かったような。。まぁいいや。

こちら↓でも少し紹介していますが、とある教科書（学術参考書？）の表紙を参考に作成しました。

作品例2: Deep Sea Tree

深海の光る海藻をイメージしてゆらゆら神秘的に幽玄にたたずむ様子を表現しました。
ちょっと白色を淡くしすぎて、端末によっては真っ暗になっちゃうかもですが、お好みで輝度を調整してください!!

こちらは、今回紹介する「THE NATURE OF CODE」のコードサンプルを元に作成しています。

OpenProcessingで下書きしてます。

クリエイティブ・コーディングには「p5.js」を使っています。
その開発元が、Web上で自由に開発ができるように「OpenProcessing」というサイトを運営されています。
以下は私のアカウントです。

ホームページには掲載していない下書き作品もいくつか掲載しています。
ベタですが、太陽系の惑星運動を模した作品です。

世界中のアーティストが作品を投稿されているので、見ているだけで、とても刺激になっています！
X上でもたくさん作品が見られますね。
↓の日本のp5.jsコミュニティでは、色んな作品をリポストされていたりします！

https://twitter.com/PCD_Tokyo

"THE NATURE OF CODE"で体系的にp5.jsを学びたい

https://p5js.org/reference/

p5.jsはJavaScriptで動くので、p5.jsならではの独自記法を厳密に学ばなくても、ある程度記述できます。
実際、私はあんまりドキュメント読んでないです。。

でも、そうすると、せっかくp5.js側で気を利かせて用意をしてくれている機能を十分使いこなせないのと、車輪の再発明をしてしまうことにもなり得るので、一度p5.jsの全機能をおさらいしたいなぁとは考えていました。

"THE NATURE OF CODE"で体系的に学ぶメリット

...でも、本家ドキュメントは応用実践例が乏しく、あんまりピンときませんでした。
OpenProcessingでもコードが見れたりしますが、下手するとパクリになっちゃうので、参考までに見る感じですかね。。

もうちょい体系的に学べるチュートリアル集みたいなのないかなぁと探していたところ、下記のサイトに行き当たりました。

https://natureofcode.com/

紙版は有料（購入しないといけない）ですが、Web版は無料です！
ありがとうー!!

章立てとストーリーがおもしろい

制作者のDaniel Shiffmanさんが大学教授ということもあって、現代アートみたいな方向性ではなく、自然をシミュレーションするような科学チックな方針でまとめてあります。
個人的には、プログラミング一辺倒の本は飽きてしまうので、プログラミングの目的や背景を丁寧に説明しつつ、知的好奇心を刺激してくれる構成がホント好きです！

章立ては以下のとおり。

ランダム性

ベクトル

力

振動

粒子システム

自律エージェント

物理学ライブラリ

セルオートマトン

フラクタル

進化コンピューティング

ニューラルネットワーク

神経進化

改めてこれだけ見ると難しそうですね。。
高校生...いや、大学生向けの内容でしょうか。
最後の方は、自動で動くAIをプログラムする内容で、だいぶ複雑な課題になっています。

...っていうかNeural Evolution(神経進化)って何...!?
強化学習のことかなぁ...

サンプルコードが高度で豊富（そう考えるとフロントエンド中級者向け？）

...そんな難しい内容でも大丈夫！
サンプルコードが豊富に準備されていますので、コードをコピペして、動作を確認しながら勉強ができます。
素晴らしい...!!!

...でも抽象的な概念になればなるほど、プログラミングソースコードを見ても、「なんじゃこれ？」となりがちなので、こまめに用意されている手書きのイラストでイメージを膨らませながら学習を進めてみてください♪

また、練習問題もたくさん用意してあります！
よく大学の教科書で見る、本文の途中で問いかけて投げっぱなしにするスタイルです。
答えはないですが、いろいろ考えさせられる問題が多く、勉強になっています♪

例のごとく、練習の様子をZenn本にまとめていきます...!

基本的なp5.jsの機能については、本家ドキュメントや、参考リンクのZenn本を見てもらえばいいかなぁと思いますし、何よりこの本のサンプルコードを見てもらった方が勉強になると思います。

ということで、私は、練習問題を解いたり、本の内容を発展させた内容を考えて付け足したり、実際に作った作品を紹介したりしながら、"THE NATURE OF CODE"練習体験記みたいな位置づけでまとめていければと考えています...!

（...普通のみなさんは本が完成した時点で公開するんですよね。こんな作りかけの途中のものをまとめ感覚で作っている方は少数派ですよね。知ってた知ってた。。）

おわりに

少し始めてかけているのですが、コード書くのが楽しくてこればっかりやってしまいそう...ｗ
途中経過や作った作品などはXでつぶやいているので、そちらもチェックしていただけると、大変励みになります♪

https://twitter.com/fujiiwebworks

それでは、みなさんも良いコーディングライフをお過ごしください♪

参考リンク

Daniel Shiffman（The Nature of Codeの作者）

Processingの創設者メンバーで、大学教授さんだそうです。
おそらく運営は他のメンバーにまかせて一線は退かれたっぽいですね。
クリエイティブ・コーディングの普及に勤しんでおられます。
サイトもYouTubeチャンネルも独特で、私は好きです！

https://thecodingtrain.com/

クリエイティブコーディングの教科書@mikuさん

基本的な仕様の解説から、「こんなことがしたい！」というアイデアTipsまで、幅広くChapter100まで書き上げていらっしゃいます...!（すごい...!!!）

p5.jsを使って、codepenで実装されています。
ソースコードも公開されているので、コピペをしながら学習できます！

That Creative Code Page

Curated by: Taru & Raphaël, cover image by Manolo Gamboa Naon.

p5.jsに限らないですが、クリエイティブ・コーディングのネタ帳に！
Unity3dを使ったハイクオリティな作品が多いですかね...!ブラウザメモリェ...

Discussion