はじめに

P5LIVEとは

https://teddavis.org/p5live/
github:https://github.com/ffd8/P5LIVE

ブラウザ上でprocessing(p5js)を使って手軽にライブコーディングができる！

ライブコーディングとは？

一般的(?)には会議とかで指摘された部分をリアルタイムに修正していくことだったりすることでしょうか。
しかし上の動画はそのイメージとは全然違いますね。

広義ではプログラミング実行後の結果を見て、すぐさまコードの修正していき、さらにその修正するコード(姿)も見せていくって感じでしょうか。
コードを書いていく姿、そのソースコードのビジュアルがかっこいいって感覚はエンジニアとそうじゃない人で違う感覚のような気もしますよね。

その他ライブコーディングのツール

https://github.com/toplap/awesome-livecoding
ここのページではかなりの数が紹介されています。
この中からP5LIVE以外でいいなって思ったもの、代表的なものをピックアップします。

sonic pi

http://sonic-pi.net/
rubyで書く音のライブコーディングツール
yoppaさんのワークショップなんかでもよく使われる
以前はラズパイにプリインストールされていて、自作楽器っぽいのが簡単に作れそうで楽しそう

LiveCodeLab

https://livecodelab.net/
web上でかける音とビジュアルのライブコーディングツール
AutoCode機能があって、おもしろい
以下のgifではboxがballに勝手になったりしている

ISF

コメントの部分で右側のGUIが作れちゃう！

pure data

https://puredata.info/
パッチを繋いでやるやつ

NodeBox

https://www.nodebox.net/
これも繋いでいくやつだけどもビジュアル
こういうコードを書かないものもライブコーディングするときエラーとかでないのでうれしい
人前で書くと考えたときにエラーでたら恥ずかしいし、緊張する場面で簡単なエラーだしちゃうだろうなぁ

Unity

https://www.youtube.com/watch?v=Xwmdl4sbsjY
いわずもがなのゲームエンジンですが、ほんとうに色々なことができます。

その他

動画のyoppaさんが大学でライブコーディングの授業もしていて、その資料も公開しています。
本もだしています。
https://yoppa.org/
Algorave

P5LIVEではどんなことができるの

https://github.com/ffd8/P5LIVE
こちらにまとまってますが、自分が注目するのがCOCODING
自分はやったことないですが、複数人とコーディングできるそうです
URLを共有すると遠隔でもできるそう
(本日ずっとサイトにアクセスできず試せていない…アドベントカレンダーは当日書くものじゃないですね…)

なので今回、以下で紹介するものはP5LIVEだからこそってわけじゃないですが、自分が提唱するものとその始め方を紹介します。

P5LIVEでオブジェクティブレイブ

https://www.youtube.com/playlist?list=PLYbrsOhmRXej6IJsF2kpsYfd9Md1TqQda
これは自分が提唱しようとしているやつです

オブジェクト指向でレイブですね。
それをP5LIVEでできるようにしてみます。
また、音のライブコーディングにある徐々に音が加わっていったり、編集されていくグラデーション感があるのですが、ヴィジュアルでそれを表現できたらなというのが目標です。

ちなみにP5LIVEのバージョンは1.2.2です

githubからクローン

自分のPCでP5LIVEが動く環境を作ります
gitコマンドももちろんですが、nodeも必要です。ダウンロードはここから

git clone https://github.com/ffd8/P5LIVE.git
cd P5LIVE
npm i
node server.js

そしてブラウザでlocalhost:5000

一部編集

index.html内このバージョンだと2457行目あたりに以下を追加しました。

index.html

// hardCompile
sketchLoaded = false;
let el = p5frameTemplate.cloneNode(true);
let iFrameBody = el.getElementsByTagName('head')[0];//el.document.getElementsByTagName('body')[0];

// 追加
let sc = document.createElement("script");
sc.type = "text/javascript";
sc.innerHTML = "const __myCache={};";
iFrameBody.appendChild(sc);
// 追加ここまで

エディタに書いたコードはiFrame内に入れられ実行されているそうです。
そこにグローバルな変数を置いておきます。
そうすると

こんな風に実行後途中から変化させることができました。

これをclassでやると

これで音のライブコーディングのようにグラデーション的に変化させるというヴィジュアルライブコーディングができました！

追記

編集後のプロジェクトをgithubにあげました
https://github.com/tkyko13/P5LIVE

最後に

明日は@bw_moleさんです！

P5LIVEでclassを利用したライブコーディング