クリエイティブコーディング学習の最適解「ルートB」としてのp5.js
はじめに
これはProcessing Advent Calendar 2018の3日目の記事です．
昨年のProcessing Advent Calendar 2017では「クリエイティブコーディング学習の最適解としてのProcessingと，デイリーコーディングのススメ」というエントリを書きました．このエントリは「Processingは短いコードを書きやすく，日々のコーディング学習に最適」という主旨をまとめたものです．
その後，現在担当しているプログラミングに関する授業での開発環境について検討するうちにp5.jsの多々ある長所や魅力に気が付き，現在p5.jsでのクリエイティブコーディングを中心に授業を行っているところです．なので僕が感じているp5.jsの素晴らしさをこのエントリを通じて少しでも多くの人に知ってもらいたいと思っています．はい，結論は「p5.jsもProcessingと同じくらい最高」で，楽しいコードハイキングのルートBとしておすすめできるものだということです．
Processingとp5.js
ProcessingはJavaをベースにした，簡便な記述でコンピュータグラフィックスを中心とした様々なプログラムが作成できる環境です．その歴史や解説はこれまでのAdvent Calendarで多くの魅力的なコードとともに示されてきました．学習リソースも豊富なので，そういった説明はそれらエントリに譲りますが，今回紹介するp5.jsはLauren McCarthyさんが2013年から開発している，Javascriptのライブラリとしてクリエイティブコーディングを行える環境です．Processingの影響を色濃く受けながら開発が進められています．
実際にp5.jsがLOGOやDesign By Numbers(DBN)，Processingなどの系譜上でその派生として発展してきた歴史はいくつかの資料でまとめられています．そういった説明の中で僕が最も腑に落ちたものはNature of Codeの著者としても知られる（今だともうCoding TrainのShiffman先生という方が知られているのかも）Daniel ShiffmanさんがYouTubeのチャンネルの中で視聴者からの質問にアンサーしているものでした．
この動画でShiffmanさんは「p5.jsは実行環境そのものをJavaからJavaScriptへポーティング（置き換え）しているのではなく，Processingが備えているオープンネスやフレンドリーさ，アクセシビリティ，アートやデザイン，ビジュアルに関する様々な基本的な理念をJavascriptという環境でポーティングしている」と説明しています．このようにオープンネスやフレンドリーさを中心としたクリエイティブコーディングの基本理念をp5.jsは現代的な形で継承しています．その例としていくつか僕が感じているものについて紹介していきたいと思います．
開発環境・実行環境の構築の容易さ
p5.jsはHTMLで読み込むことでブラウザから実行可能です．裏を返すとHTML/CSS，JavaScriptといったウェブプログラミングに関する基本知識が前提となるのでは，と思われるかもしれません．しかし，今年9月にアルファ版から正式公開されたp5.jsのウェブ・エディタはURLにアクセスするだけでp5.jsが読み込まれたテンプレートファイルとともにコードが実行可能な環境を開きます．書き始めるのにインストールも設定も必要ありません．アカウントを作成することで誰でもコードを保存したり，公開，埋め込み用のembedコードを作成することができます．Lint機能もついているので，Processingでコーディングをしたことがあれば容易に移行が可能なはずです．また画像や音・映像など様々なメディアファイルのアップロードや，テンプレートとして用意されているHTMLやCSSにもエディタ内で編集が可能なため，p5.js以外の様々なライブラリも読み込むことが可能です．
そのほか，教育的見地に立つとインストールや特別な環境構築を行うことなく，インターネットとウェブブラウザだけで授業やワークショップが行えることはp5.jsのとても良いところです．
公開することを前提としたコーディングとOpenProcessing
僕のような日々ちょっとしたコードを書いている人間にとって，気軽にコーディングができるという状態は日々のプログラミングではとても重要だということに最近気が付きました．p5.jsはウェブで公開を前提としている，というかブラウザで動作するので，思いついて→コーディング→公開までの手数が非常に少なくて済みます．例えばブラウジングしていたり，Qiitaで記事を読んだり，Twitterで面白そうなGIFアニメーションを見つけたときに，「これってどんなふうに書くのかな」と考えてからウェブエディタを開いてコードを書き始めるまでの流れが，アプリケーションを切り替えたり起動する必要がなく，とてもスムースということです．
そうやって「プログラミングを始めるまでのステップが少なくなること」が，プログラミング自体が特別な行為ではなく，インターネットやブログを書くことのような日常に混ざっていくことだと感じています．
書いたコードを公開する手段には，ウェブエディタのリンクやembedコード＋ブログエントリ以外に，OpenProcessingがあります．OpenProcessingはp5.jsやProcessing(Processing.jsとして)で書かれたコードを実行することができます．またOpenProcessingにはp5.jsのウェブ・エディタにはないコミュニティとしての機能が多くあり，面白いコーダーをフォローしたり，誰かのコードをFork（改変）することが簡単に行えます．
その他の機能として有料会員限定ではありますが，クラスルームを開設することで，クラスルームのメンバーへ課題を自由に提出させることが可能です．これは余談ですが，私は授業で資料をもとにウェブエディタ上でコーディングを行いながら，期限を設けて設定された課題をもとに自由にコーディングを行い，提出されたコードにコメント・添削してアンサーするということをやっています．特に初学者にとってはメンターのような立場から，コードを理解して適切な書き方やアドバイスを受けることが上達の近道だとしたら，そのタッチポイントをいかに増やせるかが重要だと思い，現在はそういった形で試行錯誤しながら進めています．
洗練された簡便なコード記述
// 万華鏡ライクなドローイングアプリ，ドラッグで描画，sで画像保存．
//エントリ冒頭の画像はこれで作成しました．
p5.jsの多くの命令はProcessingと共通しています．しかし，一部改変されているものもあります．例えば座標変換のコードはp5.jsでは以下のように記述できます．
angleMode(DEGREES); push(); translate(mouseX,mouseY); rotate(frameCount); rect(0,0,100,33); pop();
このコードの中でProcessingではpushMatrix()，popMatrix()と記述する箇所をp5.jsではpush()，pop()というような簡潔な記述に置き換えられています．またコード内の角度についても，angleMode(DEGREES)を使うことで角度指定で通常の0〜360の度数法を使うことが可能です．これは初学者にとっては0〜TWO_PIで角度を表す弧度法（ラジアン）への変換を使わなくて良いため，より直感的に回転について理解することができます．またこれまで同様radians()，degrees()といった関数も用意されているので，コードのポーティングも容易です．
Emoji，ウェブフォント，DOM
// チェックボックスのシーケンサー，※音でます．注意．
//1-8でチェックのon/off，Deleteキーで全チェックをオフ．（PCのみ，埋め込みなので領域にカーソルをフォーカスしてください）
p5.jsでは簡単にEmojiを扱うことができるので，いわゆるインターネットぽいグラフィカルな要素をプログラミングに組み込めます．あるいは，ウェブフォントとしてはGoogle Fontでは900以上のフォントが公開されており，これらは商用／個人ともに無料で自由に使うことが可能です．具体的にはGoogle Fontからダウンロードしたttfやotfファイルをアップロードして読み込むことで，美麗なタイポグラフィを作成することもできます．もう一つp5.jsのとても良い機能としてDOMの操作があります．スライダーやボタン，チェックボックスといったDOM要素をプログラムに組み込み呼び出すことができるため，GUI要素としても，それ以外の造形的要素としてもDOMを扱うことができます．EmojiやDOMといった見慣れたオブジェクトを新しい素材として再構成できる，ということを意味します．
最後に
このエントリを読んでp5.jsが気になった方はウェブエディタを開いてクリエイティブコーディングを楽しんでみてください．今だとドットインストールのp5.js入門を通しでやったり，田所さんの授業資料，Coding TrainのCoding Challengeを観ながらコーディングなんかがいい季節かもしれませんね．そして，ぜひそうやってできたコードをシェアしてください．
明日は@v_ohjiさんがp5.jsでコーディングということです．楽しみですね，それでは，また．ハッピーコーディング！！
