クラウド上のアプリ開発環境である Monacaクラウド を利用して、p5.js をスマホアプリとして動かしてみました。

1461513133683

Processing本家のAndroidモードは最近では今ひとつな状態ですが、
p5.js + Monaca を利用すれば簡単にスケッチをスマホ上で動かせるので便利です。
AndroidだけでなくiOS等でも動かせますし、
何よりブラウザ上で開発できるので特別な環境構築を必要としないのも良いですね。

開発方法
Monacaのサイトへ行き、サインアップ、ログインを行います。
Monaca - HTML5ハイブリッドアプリ開発プラットフォーム

その後、ダッシュボードから「新規プロジェクトの作成」を選択し、
「最小限のテンプレート」を選択します。
13

上部ツールバーから 設定 > JS/CSS コンポーネントの追加と削除 を選択します。
04
検索ボックスに「p5」と入力して検索します。
その中から「p5js」を選択します。
18
最新版のバージョンを選択し、インストールします。
「ローダーの設定」としてどの設定ファイルを追加するか尋ねられますが、
今回はひとまず「p5.js」だけで動くと思います。
09
その他のファイルを利用したい場合は適宜追加してください。

手元のp5.jsのスケッチファイル sketch.js をindex.htmlと同じ階層、
つまり www ディレクトリの中にアップロードします。
ファイルをドラッグすればアップロードできると思います。
21
index.html の <head> </head> 内に以下のとおり追記します。
<script src="components/p5js/lib/p5.js" type="text/javascript"></script>
<script src="./sketch.js" type="text/javascript"></script>

<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
<body> </body> 内はサンプルの文章が入っていますが、空にして大丈夫です。

保存したら、スマホ側の設定を整えていきます。
スマホに Monaca デバッガー をインストールします。
AndroidであればGoogle Playで「Monaca」と検索すれば出てくると思います。
インストールしたら先ほどPCブラウザでログインしていたアカウントで再ログインします。
するとプロジェクトが同期されるので、プロジェクト名を選択して実行します。
これで一通り動作確認ができるかと思います。

サンプル
p5.js で作ったスケッチを Monaca を通してアプリ化してみました。
サンプルとして見てみてください。
20160427012009-MainActivity-debug.apk

キャンペーン
教育機関関係者の方であれば、以下の本がもらえるキャンペーンが実施されているようです。
書籍「Monacaで学ぶはじめてのプログラミング」特設ページ
学生の方は学校の先生や研究室の指導教員等にお願いしてみると良いかもしれません。