だらっと学習帳

Processingとか p5.jsとか 好きです

カテゴリ： アプリ開発

この記事は以下の記事の続きです。
p5.js でボタンを押してインクリメント & それを Monaca 上で動かす : だらっと学習帳

コメント欄でボタンの書き方について教えていただき(finalfusionさんありがとうございます)、
コードを書きなおしました。
forked: p5 x monaca button test - jsdo.it

書きなおしたものをMonaca上で動かしてみましたが、
やはりmousePressedの方は「指がボタンに触れた時インクリメント」「指がボタンから離れてもインクリメント」しているようで、
正確なカウンターとして動作していませんでした。
結論としてはやはり、Monaca上でp5.jsを利用する際、
「ボタンを一度だけ押してhogehoge」という動作をさせたい場合はmouseClickedの方が良さそうです。
このエントリーをはてなブックマークに追加

p5.js を Monaca 上で動かす時、ボタンの動作にひと工夫必要かもしれないということがわかってきたのでメモしておきます。
以下の過去記事もあわせてご覧ください。
p5.jsでボタンを置いてみた & Monacaを使ってスマホ上で押してみた : だらっと学習帳

「ボタンを押す」という動作について、公式リファレンスを読むと、
createButton() - p5.js reference
button.mousePressed(changeBG);
とあります(changeBG は関数名)。
実は、この"mousePressed"の部分は"mouseClicked"と書きかえても動作します。
mouseClicked() - p5.js reference

このmousePressedとmouseClickedについて、
それぞれボタンを生成して動作を確認してみました。
「ボタンを一回押したら値をインクリメント」という動きを想定しています。

p5 x monaca button test - jsdo.it
(書き方について一般的な方法orもっと良い方法をご存知の方がいらっしゃいましたら教えてください)

なんとかインクリメントさせているcustomバージョンのボタンでも、
Monacaで動かすとさらにひとくせありました。
このままのコードでMonaca上で動かすと、mousePressedの方が二度押し状態になってしまいました。
というのも、指がボタンに触れて1回インクリメント→指をボタンから離すとさらにインクリメント、という動きになったのです。
mouseClickedの方はそういった動きは見られず、想定通りのインクリメントをしたので、
もし「ボタンを一度だけ押してhogehoge」という動作をさせたい場合はmouseClickedの方がいいかもしれません。
このエントリーをはてなブックマークに追加

pict01

デモスケッチとコード :
p5 Button - jsdo.it

p5.js でボタンを配置してみました。
今までProcessing系でボタンといえば、
矩形状に範囲を記述してそこがマウスでクリックされたら…が基本でした。
しかし、p5.jsならかなりお手軽にボタンを実装することができます。

実装のポイント
ボタンの実装のためには、p5.js本体だけでなく、 p5.dom ライブラリも必要です。
参考ページとして以下を挙げます。

createButton() - p5.js reference
ボタン作成・動作についてのリファレンスです。
このサンプルコードはp5.js公式エディタにも収録されています。
マウスクリック後の動作の書き方等、参考になりました。

Beyond the canvas - processing/p5.js Wiki
こちらのページには、CSSを利用して要素のスタイルを指定する方法が書かれています。
これによって、上記にあるような色付き・枠線なしのボタンが作成できます。

Monaca を使ってスマホアプリ化する
以前書いた記事「Monaca で p5.js をスマホアプリとして動かしてみた」でも述べたとおり、
p5.jsはMonacaを使うことでスマホアプリ化することができます。
もちろん、今回のボタンもスマホ上で押すことができました。



アプリとして動かす場合は特に使う機会が多そうですね。
このエントリーをはてなブックマークに追加

クラウド上のアプリ開発環境である 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で学ぶはじめてのプログラミング」特設ページ
学生の方は学校の先生や研究室の指導教員等にお願いしてみると良いかもしれません。
このエントリーをはてなブックマークに追加

Processingでsave()を使うと、
その時に表示されている画面を指定のファイル名・拡張子で保存してくれるので便利です。
これをAndroid端末上で実行したかったので、
以下のようなスケッチを作成しました。

pict1724

import android.content.Intent;

import android.net.Uri;

import android.os.Environment;



Intent intent = new Intent(Intent.ACTION_MEDIA_MOUNTED, 

Uri.parse("file://" + Environment.getExternalStorageDirectory()));



void setup() {

  size(displayWidth,displayHeight);

  colorMode(HSB, 360, 100, 100);

  background(360);

  smooth();

}



void draw() { 

  float r = random(100);

  noStroke();

  fill(random(360), 80, 100, 40);

  ellipse(random(width), random(height), r, r);

}



//タッチした時の動作

void mousePressed() {

  save("//sdcard/DCIM/processing/pict_" + 

          year() + month() + day() + hour() + minute() + second() + ".png");

  sendBroadcast(intent);

  

  background(360);

}




また、AndroidManifest.xmlの</manifest>のすぐ前あたりに、以下のとおり記述しました。

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>


これをANDROIDモードから端末上で実行し、画面内の適当な場所をタッチすると、
SDカードのDCIMフォルダ内に「processing」というフォルダが作られ、
その中に「pict_○○.png(○○は年月日時分秒の数字の並び)」という画像ファイルが保存されると思います。
また、端末に保存されている画像を閲覧できるアプリ(ギャラリー)にも、
この画像が反映され、見ることができるようになっていると思います。
save()するだけではギャラリーに反映されないので、
「sendBroadcast(intent);」等の記述も必要なようです。


以下のページを参考にさせていただきました。
Processing for Androidで外部ストレージ(SDカード)に画像を保存する - rabeat
How to update Android's media database to show newly created images? - Processing Forum
このエントリーをはてなブックマークに追加

↑このページのトップヘ