だらっと学習帳

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

カテゴリ:アプリ開発 > Android

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
このエントリーをはてなブックマークに追加

去年の夏にガラケーからAQUOS PHONEに機種変しました。
というわけで、AQUOS PHONE上でProcessing製アプリを動かした時のメモ。

Processing 2.0 beta 5のAndroidモードからスケッチを動かそうとしたところ、
Android2.3.3(API 10)を用意するよう要求されました。
「ProcessingのAndroidモードがうまく動かない!」という方は参考にしてください。
ちなみに、これを用意していない状態では以下のようなエラーが表示されました。
Unable to resolve project target 'android-10'

これを用意すれば、Processingの他のバージョン(現行最新版であるb7等)でも大丈夫だと思います。

DOCOMOの場合はこちらから機種を選んでUSBドライバをダウンロードしてください。
NTT DOCOMOダウンロード一覧 | サポート情報:SH DASH
他キャリア向けも以下のページの中央にある「各種ダウンロード」よりダウンロードできるようです。
サポート:SH DASH

さらに、以下のサイトからADB USBドライバをダウンロードしてください。
SH Developers Square - ドライバ

これらをそれぞれ解凍/設定すれば準備完了です。
あとはこちらの記事とだいたい同じだと思います。
Processing×Androidで遊んでみよう! : だらっと学習帳
このエントリーをはてなブックマークに追加

pict222429

ProcessingでAndroidアプリをつくってみました。
導入編はこちら↓
だらっと学習帳 : Processing×Androidで遊んでみよう!



Processingでちょっとアプリっぽいアプリ(実用的なアプリ)をつくってみよう、ということで、
「Your week Installer」というアプリを作ってみました。
OpenProcessing版はこちら↓
Your_week_Installer- OpenProcessing

Twitterで、日曜の終わり頃に、「月曜日をインストールしています...」みたいなネタをよく見るので、
そこからヒントを得たもの。
こんなの↓

【警告】月曜日.exeがインストールされています。 [████████████░ ]95%インストール中...


月曜から日曜までの日付が表示され、
現在どの曜日がインストールされているのかわかります。
さらに適当な場所をクリック(端末上ではタッチ)すると、
現時刻と「今日」が何%インストールされたか(=終了したか)が表示されます。

実際に作って端末で持ち歩くと、
生活に(適度な)焦りをもたらしてくれます。
曜日や月日の計算はProcessingではなく、Javaで書いています。
@hirokazukamiya さん、愉快なJava使いのみなさんに助けていただきました。
ありがとうございました。

こだわったところは、「今日」のゲージ内を動くライン。
一定速度にしてしまうと、0時~3時くらいのゲージがまだ短い時間帯に高速で動いているように見えるため、
時間によって速度を変えました。
よって、3時くらいのゲージがまだ短い時間ならゆっくりと動き、
23時頃のゲージの長い時間は、やや速く動くようになっています。



他にも、Android端末でProcessingが動くことを紹介するデモ用スケッチもいくつか作りました。

DSC00619

Drawing_Stars- OpenProcessing

指の動きに合わせて星がくるくる回転しながらついていきます。
メニューキー(OpenProcessing版は適当なキー)で星の色を切り替えることができます。

他にも、フットステップ錯視や、内トロコイドなどを端末上で表示できるようにしました。



こうして端末上で気軽にスケッチを見ることができるのはとても便利ですね。
特にIT系勉強会の懇親会ではいいネタです。
ノートPCを開くには時間もスペースも必要ですが、端末なら気軽に扱えます。
今後ももっと面白いものつくっていきたいです!
このエントリーをはてなブックマークに追加

DSC00588

Android端末をいただいたお借りしたので、Processingのスケッチを入れてみました。
画像はこのスケッチを実機で実行したところ。

色々試行錯誤したのですが、
結論からいうとエミュレータで動かすより実機で動かした方が何倍も楽でした。
エミュレータはいまだに正常に動く条件を理解できていません…。
エラーが出ても、少し経ってから実行すると上手くいったり…。
よくわからないです。




【導入について解説】

0、Processingの2.0aをダウンロード
Download \ Processing.org
今の時点ではプレリリース版ですが、現在の正式バージョンである1.5.1でAndroid関係のことをすると
バグが邪魔してくるらしいので、こちらをダウンロードして使ってください。

1、Android SDKをダウンロード
Android SDK | Android Developers
このページから、OSに合わせてダウンロードしてください。
私はWindows7を使っているので、Recommendedされてるやつからダウンロードしました。

2、Android SDK Managerから必要なものをインストール
Processingとの連携に必要なのは、
「SDK Platform」と「Google APIs by Google Inc.」のふたつです。
ここで注意しないといけないのは、「API 7」「API 8」を入れないといけないことです。
参考にした本やサイトには「API 7」って書いてありましたが、
Processing側からは「8を入れろ」って表示されたんで、8も入れたら動きました。
でも、やっぱり7も必要みたい?よくわからなかったのでどちらも入れましたw
あと、「Google APIs」がなかなか入らないなーとか思ってたらAcceptにチェック入れ忘れてたりとかしたんで、
そういううっかりミスに気をつけてくださいね!!!!!

3、Processingで適当なスケッチを準備する
あとはProcessingのいつもの画面の右上に表示された「Standard」モードを
「Android」モードに変更して、いつもどおりにスケッチを書くだけです。
「Standard」モード時に書いたスケッチも、モードを変更するだけで
特に設定なしでAndroidアプリに変換できるので便利です!
また、画面サイズを指定せずに書くと、端末の画面サイズで表示されます。
ちなみに、blend()やfilter()は、Android端末上では表示が遅くなります。
あと、文字の表示もできないみたいなので、改善策を探しているところです。

4、実機で表示させる
あとは「Sketch>Run on Device」で表示する…のですが、
その前にちょっと設定が必要になります。
実機でデバッグするには - 逆引きAndroid入門
[Galaxy S] PC(Windows)との接続 « Gagdet is not Gadget.
私の持っている端末(Galaxy S Ⅱ)では、これらの記事が参考になりました。
ドライバは検索しても見つからないので、2番目の記事を参考にソフトウェアをインストールしました。
これで、Processingのスケッチが実機で表示されるはずです。
端末を傾けた時の縦横の切替もお手の元。
ただし、縦横を切り替えると最初から再描写されるので注意してください。
一度端末で表示されれば、USBケーブルを抜いても表示されるようになります。
アプリ一覧の中にProcessingのアイコンでそれぞれのスケッチが並んでいるはずです。


<オマケ1>エミュレータの話
正直、不安定だわ重いわで使いこなせないのですが、一応メモ。
エミュレータを使うには、ポート番号を合わせないといけないみたいです。
AVD Managerでエミュレータを起動後、
タイトルバーのところに「5554」とか「5556」とか表示されていると思います。
その番号をProcessingの「File>Preference」から、一番下のpreference.txt内の
「android.emulator.port=(番号)」のところに書きます。
ちなみにいうとこの番号コロコロ変わります(?)
もっというと、エミュレータって、ある時は起動しなくても、
少し経ってからもう一回実行すると立ち上がったりします。
いったいどうしてなのかはわかりません…。
実機でやった方が驚くほどすんなり行きましたし、何より感動しますw

<オマケ2>マウスとキーボードの話
マウスを押す動作は、端末の画面をタッチする動作に変換されるようです。
また、適当なキーを押す動作は、設定ボタンを押す動作に変換されるようです。
特定のキーを押した時の動作などはどう変換されるのかは、まだ調べていません。


初めてのことだったんで、数日間試行錯誤しましたが、
やっと表示させることができました!!
エミュレータの不安定さ(?)に振り回されたり、
勝手にアプリとして端末に入っていることに気が付かなくて
「apkファイルとか用意しないといけないのかな…?」とか不安に思っていましたが、
案外簡単にできましたww
これで、ノートPCを起動するのが手間な時も、簡単にProcessingのスケッチをアピールできます!!
勉強会の懇親会などでネタにしていこうと思いますので、
その際はよろしくお願いします!!


参考にした本・サイト
O'Reilly Japan - Processingをはじめよう
Arduino Wiki - Processing for Android
実機でデバッグするには - 逆引きAndroid入門
[Galaxy S] PC(Windows)との接続 « Gagdet is not Gadget.
このエントリーをはてなブックマークに追加

↑このページのトップヘ