P5LIVEでclassを利用したライブコーディング
はじめに
processingアドベントカレンダーの16日目です。
滑り込みです。
P5LIVEとは
https://teddavis.org/p5live/
github:https://github.com/ffd8/P5LIVE
ブラウザ上でprocessing(p5js)を使って手軽にライブコーディングができる!
ライブコーディングとは?
アルゴリズムで踊れ、演奏するプログラミング・ライブコーディングとは?(1)
一般的(?)には会議とかで指摘された部分をリアルタイムに修正していくことだったりすることでしょうか。
しかし上の動画はそのイメージとは全然違いますね。
広義ではプログラミング実行後の結果を見て、すぐさまコードの修正していき、さらにその修正するコード(姿)も見せていくって感じでしょうか。
コードを書いていく姿、そのソースコードのビジュアルがかっこいいって感覚はエンジニアとそうじゃない人で違う感覚のような気もしますよね。
その他ライブコーディングのツール
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
pure data
https://puredata.info/
パッチを繋いでやるやつ
NodeBox
https://www.nodebox.net/
これも繋いでいくやつだけどもビジュアル
こういうコードを書かないものもライブコーディングするときエラーとかでないのでうれしい
人前で書くと考えたときにエラーでたら恥ずかしいし、緊張する場面で簡単なエラーだしちゃうだろうなぁ
Unity
https://www.youtube.com/watch?v=Xwmdl4sbsjY
いわずもがなのゲームエンジンですが、ほんとうに色々なことができます。
その他
動画のyoppaさんが大学でライブコーディングの授業もしていて、その資料も公開しています。
本もだしています。
https://yoppa.org/
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行目あたりに以下を追加しました。
// 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さんです!
Author And Source
この問題について(P5LIVEでclassを利用したライブコーディング), 我々は、より多くの情報をここで見つけました https://qiita.com/tkyko13/items/42c70b4a1d2c0f1378cf著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .