つらねの日記

プログラムの進捗やゲームをプレイした感想などを書き連ねる日記。

p5pchat 〜p5.js でpaint chat〜

Processing

この記事はProcessing Advent Calendar 2015の15日目の記事です。

前置き

昔，幾つかお絵かきソフトを作った．
turanegaku.hateblo.jp
turanegaku.hateblo.jp
せっかくだから通信したいと考えたのだが，
processing.netのServerとClientを使うとなるとちょっと面倒くさい．
どうせならsocket.ioを使って楽々やりたいと考えた．

ということでp5.js, node.js, socket.ioを使って，お絵かきチャットソフトを作った．

p5pchat



下記の説明通りに作業を行うと簡単に通信を行うことができる．
github.com

つくりかた

当初の予定以上にただ持ってくるだけだったので，どうやってつくったのかを書くぞ!!!

目標

herokuにupしてlocalじゃなく，socket.ioで動く，paint chatを作成する．

nodeを使える環境を整える

anyenvがあると他の環境を作るときも死ぬほど楽．
github.com
ndenvでnodeをいれる．
github.com

$ git clone https://github.com/riywo/anyenv ~/.anyenv
$ echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc
$ echo 'eval "$(anyenv init -)"' >> ~/.zshrc
$ exec $SHELL -l
$ anyenv install ndenv

$ ndenv install v0.12.7
$ ndenv global v0.12.7

サンプルを持ってくる

p5.js, node.js, socket.io · processing/p5.js Wiki · GitHub
の末尾の"the full example"を落としてくる．
適当なディレクトリにいれておく．

都合が悪い部分を変える．
index.html
@@ -3,10 +3,13 @@

 <head>
   <meta charset="utf-8" content="text/html">
 </head>

-<script language="javascript" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.2.9/p5.min.js"></script>
+<script language="javascript" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.19/p5.js"></script>

なんかよくわからないけど動かなかった．まあ新しいほうがいいでしょう．

server.js
@@ -12,9 +12,10 @@ var path = require('path');
 var fs = require('fs');

 var server = http.createServer(handleRequest);
-server.listen(8080);
+var port = process.env.PORT || 3000;
+server.listen(port);

-console.log('Server started on port 8080');
+console.log('Server started on port '+port);

 function handleRequest(req, res) {
   // What did we request?

herokuにあげるときに不都合が生じるのでportを可変にしておく．

sketch.js
@@ -8,7 +8,8 @@ function setup() {
   background(0);
   // Start a socket connection to the server
   // Some day we would run this server somewhere else
-  socket = io.connect('http://localhost:8080');
+  socket = io();
   // We make a named event called 'mouse' and write an
   // anonymous callback function

socket.ioは賢いので自動で先を決めてくれるよ．

socket.ioをいれておく

$ npm install socket.io
$ npm init

npm initしてpackage.jsonつくっておくとnpm startで実行したり色々楽になる．

ちょっとテストとかしてみる

$ npm start

http://localhost:3000
にいくとめっちゃ簡単なpaint chatが動いてるかもしれない．

localで動くだけでいいならここまででもよい

herokuを使えるようにする

アカウントを作る

www.heroku.com

heroku-toolbeltを入れる
$ brew install heroku-toolbelt
$ heroku login
git initとかする
$ git init
$ git add .
$ git commit -m 'Initial commit'

herokuはgitでupしたりするのでgit管理下に置いておく

アプリをつくってupload
$ heroku create
$ git push heroku master
$ heroku open

まとめ

そんなかんじでほぼもってくるだけで簡単に使えるんで，みなさんもp5.jsを使うときには是非通信してなにかするのを書いてみて欲しいと思います．