OpenProcessingとp5.jsでお手軽Socket.io体験

はじめに

クリエイティブコーディングに用いられるp5.jsに、複数台のデバイスで同じ作業をする時に使われるSocket.ioを組み合わせれば、p5.jsの世界が更に広がるぞ！
Socket.ioを使いたいだけでもp5.jsの枠組みを使えば、プログラミング初心者にも動作の流れがわかりやすい！
OpenProcessingを用いればNode.jsを書かなくても気軽にSocket.io体験を楽しめる！

Socket.ioとは

Webでリアルタイムに複数のデバイス間で情報のやりとりをすることができるWebSocketという仕組みを利用したNode.jsのライブラリです。
おそらく皆さん知っていると思う（かつ僕はふんわりとしか分かってない）ので詳しい説明は省きます。
詳しくは公式サイト（ https://socket.io/ ）を見てください。

p5.jsとは

ProcessingというJavaベースの、グラフィックに特化した言語があります。
特徴としては、setupとdrawとその他イベント用の関数によってわかりやすく管理ができることが上げられます。
ソースコードはこんな感じ。

hoge.pde

void setup(){  //この関数の内部は実行時の最初に一度だけ行われる
    size(400,400);  //400*400のウインドウができる
    background(255);  //背景を白く塗る
}
void draw(){  //この関数の内部はsetupの後に無限に繰り返される
    fill(255,0,0);  //以下の図形は赤色で塗りつぶす
    ellipse(mouseX,mouseY,200,200); //マウス座標に200*200の円を描画する
}
void mousePressed(){  //この関数の内部はマウスがクリックされる度に呼び出される
    background(0); //背景を黒く塗る
}

JavaScriptでもProcessingライクに書けるライブラリとして組まれたのがp5.jsです。
HTML5のCanvas上にグラフィックを描画します。
上のコードをp5.jsにコンバートするとこうなります。

hoge.js

function setup(){
    createCanvas(400,400);
    background(255);
}
function draw(){
    fill(255,0,0);
    ellipse(mouseX,mouseY,200,200);
}
function mousePressed(){
    background(0);
}

構造がわかりやすいので初心者にも簡単にインタラクティブなビジュアルコーディングが楽しめます。

OpenProcessingとは

p5.jsのコードを書いて実行し、共有することが出来るWebサイトです。
p5.js専用のエディタと実行環境のあるSNSのようなものと考えると良いかもしれません。
無料版でも使えるライブラリの中にSocket.ioのライブラリも含まれています。
Node.jsの部分を一切書かなくても使えるように、Socket.ioのライブラリをオンにするとテンプレートが表示されます。
今回はOpenProcessingを使って行きたいと思います。

Socket.ioに接続する

main.js

var socket=io.connect(":30000?sketch=491237");
//491237の部分は今書いているOpenProcessingのidを書く。

テンプレートの部分をコピペしてきて貼り付けます。
idはURLの最後の6桁の数列ですが、作成してから一度も保存されていないsketchはidの部分がcreateになっているため、一度保存してください。

Socket.ioに送信する

main.js

function mousePressed(){
    var data={
        x:mouseX,
        y:mouseY
    };  //dataの中身は自分の送りたいものを指定する。
    socket.emit("mouse",data);  //"mouse"の部分は任意の文字列
}

mousePressed関数など、自分がデータを送りたいタイミングでsocket.emitを呼び出してください。
データはオブジェクトを生成して送信していますが、文字列を送ることも可能です。
今回p5.jsを推している理由として、イベント駆動を簡単に作れるという点が上げられます。
キャンバス上でマウスが押されたとき、キーボードが押されたとき、などのイベント駆動のプログラムが簡単に作れます。

Socket.ioから受信する

main.js

function setup(){
    //書き加える
    socket.on("mouse",function(data){  //"mouse"の部分は送信したときに指定した文字列
                //"mouse"が指定されて送られたデータをがこの関数の内部で処理される
        fill(255);
        ellipse(data.x,data.y,20,20);  //dataの中からxとyを取り出してその座標に白い円を描く
    });
}

Socket.ioから受信できる状態になったら呼び出すものがsocket.onです。
これが呼び出されたら、その後socketが送られてきる度にこの内部に書かれた関数が動かされます。
setup内で呼び出すのが間違いなくて良いと思います。
少しだけ気になっているのが、socket.onの中身の関数はdrawより前に呼ばれるのではないかということです。
自分で試してみたときには大方こうなったので、ここの部分は少しだけ工夫が要ると思います。

できあがったものがこちらになります

main.js

var socket=io.connect(":30000?sketch=491237");

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(100);
    socket.on("mouse",function(data){
        fill(255);
        ellipse(data.x,data.y,20,20);
    });
}

function draw(){
}

function mousePressed(){
    var data={
        x:mouseX,
        y:mouseY
    };
    socket.emit("mouse",data);
}

OpenProcessingで開くと実際に遊ぶことが出来ます。
https://www.openprocessing.org/sketch/491237
ウインドウを二つ開いて片方からたたくともう片方に送られてくるのが見えるよ。
Node.js一行も書かなくても実行できるOpenProcessingすげえ！

まとめ

• p5.jsの構造はわかりやすいのでSocket.ioの流れを確認しやすい！
• OpenProcessingではSocket.ioを使ったクリエイティブコーディングが更に簡単に楽しめる！

一度OpenProcessingで試してみて、もっと深くコーディングしてみたいと思ったらNode.jsを書いて自分の環境で開発するという流れで進めてみても良いかもしれないですね。