p5.js大好き 楽だから
←8日目 | 10日目→
これはKCS AdventCalendar2020 9日目の記事です．
こんにちは，KCS音楽班のRinjuです． 今年は，音楽から離れて，Java Scriptのライブラリであるp5.jsが楽しかったお話をしようと思います．
p5.jsの大元はProcessingというプログラミング言語です(図1)．「P」roce「5」5ing+「J」ava 「S」criptでp5.jsという名前なのだと思います．僕は最初Java Scriptのライブラリだと思わず，p5.jsという言語だと勘違いしていたので，「不思議な名前だなぁ，カッコイイ！」などと思っていました．Processingはよく目にする単語なのであまり心が滾らなかったのです．
Processingをやった感想としては，図形やアニメーションを描画して表示させるのがめっちゃ簡単です．独自の開発環境(IDE．下図)に付いてる再生ボタンを押すだけで表示してくれます。また，アプリ化も超簡単に一瞬でできます．ファイル→アプリケーションとしてエクスポート を選択するだけです．あとめっさ短くて簡単なコードでいろいろできる…気がします．
ライブラリを導入することで音声処理もできます(図1の「Minim」がそのライブラリ)。．基本的にはJavaを簡略化したような書き方をするようです．Javaを書いたことがないのでわからないんですが……．一方で，エディタにはPythonモードが搭載されており，Pythonのような書き方でProcessingを書くこともできます．いずれにせよ，元の言語であるJavaやPythonよりはシンプルになるようです．
元々は音楽と映像を絡めて、僕が兼ねてより取り組んでいる物語音楽の新しい表現媒体を探る過程で発見した言語でしたが、興味のある研究室で使われていること、仕様が超簡単なことから、よっしゃあやってみようじゃあないか、ということになりました。
さて，Processingには一つ不満点があります．それはIDEの起動に時間がかかることです．若干ストレッシブです．また，作品の共有にもう少しスピード感が欲しいです．アプリ化してGoogle Driveに置いたのを某所でリンク貼りしてみたのですが，恐らく誰もダウンロードしていません．
そこで，p5.jsの出番となります．
Webサイト「p5.js Web Editor」でコードを書くと，何とリアルタイムで結果を表示してくれるのです(図3)．Processingとの違いは，今のところ「void」が「function」になっているくらいかなと思います．まだやったことはありませんが，p5.jsで書いたものをProcessingに書き写すときには，Microsoft Wordなどで一気に置換してしまえばいいのかな，とぼんやり考えています．
また，p5.js Web Editorにコードを保存できるので，作品の共有はリンクを貼るだけで済みます．左に表示されるコードが表現上邪魔に感じる場合は，OpenProcessingという以下のサイトに保存します．僕は基本的にここに保存してやっています．
RinjuのOpenProcessingアカウント：https://www.openprocessing.org/user/247718#sketches
ところで，WebサイトというのはHTMLとCSSとJava Scriptの3つを使って作るそうです．p5.js Web Editorにせよ，OpenProcessingにせよ，Java Scriptによる作品がWebサイト上で動かされているわけですから，HTMLとCSSもどこかにありそうですよね．
実際，HTMLとCSSが自動生成されているので，これをGithubなどにコピペすればプラットフォーム抜きに作品を公開することができます(図6をクリックすると当該Webサイトに飛びます)．
Creative Coderの田所淳さんが東京藝術大学にて行ったオンライン授業「メディアアート・プログラミングⅠ」をYouTubeにアップロードして下さっているので，僕はそれを見て勉強しています．2020年春学期の授業なので鮮度バッチリです．田所淳さん自身のWebページにて参考文献なども提示して下さっているので，より深く勉強することもできるのではないでしょうか．
「メディアアート・プログラミングⅠ」のプレイリスト
「メディアアート・プログラミングⅠ」の概要
そんなところで，今回はこれにて終了したいと思います．
最後に，p5.jsによる素晴らしい作品を紹介して終わります．音声が出るのでご注意下さい．PCのみ対応だと思います．Naoki Kanazawaさんがお作りになった「Graphic Beats」です．ツイート内のリンク「graphicbeats.net」から飛んで下さい．楽しいタイピングゲームです！
←8日目 | 10日目→
Posted on: 2020年12月10日, by : Rinju