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

# はじめに
[processingアドベントカレンダー](https://qiita.com/advent-calendar/2019/processing)の16日目です。
滑り込みです。

# P5LIVEとは
https://teddavis.org/p5live/
github:https://github.com/ffd8/P5LIVE

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

## ライブコーディングとは？
[アルゴリズムで踊れ、演奏するプログラミング・ライブコーディングとは？(1)](https://www.youtube.com/watch?v=FdApLf-WSy8&feature=emb_logo)

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

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

## その他ライブコーディングのツール
https://github.com/toplap/awesome-livecoding
ここのページではかなりの数が紹介されています。
この中からP5LIVE以外でいいなって思ったもの、代表的なものをピックアップします。

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

### LiveCodeLab
https://livecodelab.net/
web上でかける音とビジュアルのライブコーディングツール
AutoCode機能があって、おもしろい
以下のgifでは`box`が`ball`に勝手になったりしている
[![Image from Gyazo](https://i.gyazo.com/8bb9017efa287f95506761056221d86a.gif)](https://gyazo.com/8bb9017efa287f95506761056221d86a)

### ISF
https://www.interactiveshaderformat.com/

コメントの部分で右側のGUIが作れちゃう！
[![Image from Gyazo](https://i.gyazo.com/91012b51fc7051625820a4504934f3f8.gif)](https://gyazo.com/91012b51fc7051625820a4504934f3f8)

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

![https___qiita-image-store.s3.amazonaws.com_0_78212_3c00b062-c50c-7a98-2411-53a2ba4f23d6.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76572/19269ebb-faf6-e325-8a3b-4dde25f4a39f.jpeg)

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

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

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

- [Algorave](https://algorave.com/)

## 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`も必要です。ダウンロードは[ここ](https://nodejs.org/ja/)から

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

そしてブラウザで`localhost:5000`

## 一部編集

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

```js: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内に入れられ実行されているそうです。
そこにグローバルな変数を置いておきます。
そうすると

[![Image from Gyazo](https://i.gyazo.com/303a85d1eed1fe86297193ff545c6979.gif)](https://gyazo.com/303a85d1eed1fe86297193ff545c6979)

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

これをclassでやると

[![Image from Gyazo](https://i.gyazo.com/f15726bef1e0cfbd6b99a282cc16a517.gif)](https://gyazo.com/f15726bef1e0cfbd6b99a282cc16a517)

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

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

# 最後に
明日は[@bw_mole](https://qiita.com/bw_mole)さんです！