ProcessingでAndroidアプリを作ろうの会

九州産業大学　情報システム研究会
9月7日　開催

Transcript

1. ProcessingでAndroidアプリをつくろうの会+もくもく会
2. 10 分 アイスブレイク (ちょっと雑談) 100分 勉強会 70 分 もくもく会 本日の流れ
3. アイスブレイク(ちょっと雑談) ちょっと雑談 ・雑談のテーマは｢今年の夏休みどうだった？｣ ・あともう少しで後期がはじまりますね ・楽しかったことやチャレンジしてみたことを共有してみよう！
4. 勉強会の流れ
5. 1 Processingの復習 1. setupとdraw、基本的な命令 2. マウスを使った命令 3. 型と変数 4. if文 if-else文 2 ProcessingでAndroidアプリ を作ろう 1. お絵かきアプリ 2. 時計アプリ 3. 応用開発 GUIを実装する 勉強会の流れ
6. 1 Processingの復習
7. 1-1 setupとdraw、基本的な命令 • setup命令 … 最初に1度実行したい処理を書く(初期設定) void setup(){ … } • draw命令 … 繰り返し実行したい処理を書く(描画) void draw(){ … }
8. 1-1 setupとdraw、基本的な命令 • ellipse(中心のx座標,中心のy座標,横直径,縦直径); … 楕円を描く ellipse(100,200,100,100); //座標(100,200)に横100px、縦100pxの楕円を描く • rect(左上のx座標,左上のy座標,幅,高さ); … 四角形を描く rect(200,200,100,100); //左上の座標(200,200)に幅100px、高さ100pxの四角形を描く
9. 1-2 マウスを使った命令 • mousePressed() … マウスが押される度に呼び出される命令 void mousePressed(){ … } • mouseReleased() … マウスが離される度に呼び出される命令 void mouseReleased(){ … }
10. 1-3 型と変数 • 変数 … データを格納する入れ物 Processingで用意されている変数がある(システム変数) mouseX mouseY width height mousePressed(マウスが押されているかを真偽値で格納する) pmouseX(前フレームのマウスのx座標を格納する) • 型 … 格納するデータの種類 int: 整数 String: 文字列 float: 小数
11. 1-3 型と変数 • 変数宣言の仕方 型 変数の名前; int score; int x,y; システム変数は宣言をする必要は無い。
12. 1-4 if文 if-else文 • if(条件式){ … } • if(条件式){ … }else{ … } • if(条件式){ … }else if(条件式){ … }else{ … } 補足 関係演算子と論理演算子 関係演算子 → >など、2つの値の関係を表す 論理演算子 → &&など、複数の条件の関係を表す
13. 2 ProcessingでAndroidアプリを作ろう ここからは実際に手を動かして作っていきましょう
14. javaモードの人 size(480,801);
15. お絵かきアプリ マウスでドラッグしたら白い線 が描けるアプリを作ろう！
16. 2-1 お絵かきアプリ 仕様(アプリの構造や内容) • キャンバス →background • マウスがドラッグした通り道に白い線を描く →mouseX,mouseY,pmouseX,pmouseY マウスの位置を取得する mousePressed 白い線を 描く処理を書く
17. キャンバス • 使うのはbackgroundのみ • 一度描ければよい。draw命 令に入れるとマウスポイン タみたいになる(ためしにや ってみると良い) • 今回は白い線を描く。見や すくするため、キャンバス の色は黒にする void setup() { background(0); }
18. マウスがドラッグした通り道に 白い線を描く • if文の条件式をシステム変 数mousePressedにする mousePressed関数と間違えな いことがポイント！ • line(最初の点のx座標,最初 の点のy座標,2つ目の点のx座 標,2つ目の点のy座標) void draw() { if (mousePressed) { stroke(255); line(mouseX, mouseY, pmouseX, pmouseY); } }
19. 時計アプリ アナログ時計とデジタル時計が 表示されるアプリを作ろう！
20. 2-1 時計アプリ 仕様(アプリの構造や内容) • 画面中央にアナログ時計(時針、分針、秒針、文字盤を持つ) →hour(),minute(),second() 現在時刻を取得する関数を使う 針の座標、針の描画 本に書いてあったプログ ラムを使う pushMatrix(),popMatrix() • その上にデジタル時計 →text() デジタル時計を 表示する
21. 画面中央にアナログ時計(時針、 分針、秒針、文字盤を持つ) • hour() 時を取得 する minute() 分を取得する second() 秒を取得する • 時間の取得以降は針の角度 や座標の計算。｢そういうも のだ｣と思って良い。 void draw() { background(0); //時間の取得 int h = hour(); int m= minute(); int s = second(); //1秒に回転する針の角度の計算 float deg_m= 360.0/60/60; float deg_h = 360.0/12/60/60; float deg_s = 360.0/60; float SS = h * 60.0 * 60.0 + m * 60.0 + s; //角度をラジアンに変換 float rad_s = radians(deg_s * SS-90); float rad_m= radians(deg_m * SS-90); float rad_h = radians(deg_h * SS-90); //ラジアンから針の座標を計算 float xs = 150*cos(rad_s); float ys = 150*sin(rad_s); float xm = 100*cos(rad_m); float ym = 100*sin(rad_m); float xh = 80*cos(rad_h); float yh = 80*sin(rad_h); …
22. 画面中央にアナログ時計(時針、 分針、秒針、文字盤を持つ) • 各針の描画を書く • 第1引数と第2引数を画面の 真ん中に、第3引数と第4引 数を針の先端にする。 • ここで一度実行してみよう void draw() { … //秒針の描画 stroke(0, 0, 255); strokeWeight(2); line(width/2, height/2, width/2+xs, height/2+ys); //分針の描画 stroke(0, 255, 0); strokeWeight(4); line(width/2, height/2, width/2+xm, height/2+ym); //時針の描画 stroke(255, 0, 0); strokeWeight(8); line(width/2, height/2, width/2+xh, height/2+yh); …
23. 画面中央にアナログ時計(時針、 分針、秒針、文字盤を持つ) • pushMatrix() 現在の座 標を保存 popMatrix() 元の座標 に戻す translate() 座標軸を 移動 • for(初期化;条件式;更新){ … } • もう一度実行して文字盤が 表示されるか確かめよう void draw() { … //文字盤の表示 float radius = width/2 * 0.8; pushMatrix(); translate(width/2, height/2); fill(128); noStroke(); for (int i=0; i<60; i++) { rotate(radians(6)); ellipse(radius, 0, 3, 3); } for (int i=1; i<=12; i++) { rotate(radians(30)); ellipse(radius, 0, 10, 10); } popMatrix(); …
24. その上にデジタル時計 • textSize()textの大きさを 指定する • text(表示するテキスト,x座 標,y座標) • 実行してアナログ時計の上 に表示されるか確かめよう void draw() { … //デジタル時計の表示 textSize(100); fill(255); text(h + ":" + m + ":" + s, width/10, height/5); }
25. 応用開発 GUIを実装する ボタンを押すとカウントアップ するアプリを作ろう！
26. 2-1 応用開発 GUIを実装する 仕様(アプリの構造や内容) • 中心に当たり判定があるカウントアップボタン →rect ボタンの 形を用意 rectMode(CENTER) rectの座標を左 上から中心にする dist() 2点の距離を取得 する • ボタンを押して離すとカウントが1ずつ増えるようにする。押し続け てもカウントが増え続けることはない
27. 用意する変数とsetup命令の内 容 • rectMode(CENTER) 四角形の座標が左上から中 心になる textAlign(CENTER) 文字を表示する位置を中央 揃えにする • State=0 (ボタンが押されていない) count=0 (カウントを0から始める) //トグル動作用の"状態"を表す変数 int State; //テキストに表示するための変数 int count; void setup() { //引数がrectの中心になる rectMode(CENTER); //引数がtextの中心になる textAlign(CENTER); //初期化 State = 0; count = 0; }
28. 中心に当たり判定があるカウント アップボタン • 背景とカウントを表示する • 実行してみてカウントが表 示されることを確かめる void draw() { //背景 background(0); //カウントのテキスト fill(250); textSize(100); text(count, width/2, height/3); … }
29. トグル動作とは？ スイッチを押す度に動作が変わること 今回はStateという変数を用意する。押している間は1、離している間は0にす る。 システム変数mousePressedとdist関数、変数Stateを使ってボタンの当たり判 定を作っていく。 中心に当たり判定があるカウントアップボタン ～補足～
30. 中心に当たり判定があるカウント アップボタン • if文の中身を言葉にすると ｢マウスが押されかつマウス とボタンの中心との距離が 40px以内で、Stateが0の場 合｣ else ifの条件文にある !mousePressedは mouseReleased()の代わり • 実行して確かめよう！ void draw() { … //カウントアップボタン fill(170, 0, 0); rect(width/2, height/3*2, 170, 70); //カウントアップボタンの当たり判定と処理 if (mousePressed && dist(mouseX, mouseY, width/2, height/3 *2)<40 && State == 0) { State = 1; fill(200, 0, 0); rect(width/2, height/3*2, 170, 70); } else if (!mousePressed && State == 1) { count++; State = 0; } }
31. お疲れ様でした！ いかがでしたか？
32. 3 もくもく会
33. これからはもくもく会(任意参加)です 作った物をアレンジする、授業で書いたプログラムを Androidモードで実行してみるなど自分が作ってみたい物 をもくもくとやっていきましょう！
34. もくもく会のヒント • カウントアップボタンを実装したアプリにもう一つボタンを実装する (リセットボタンとか) • お絵かきアプリの線の色を変えてみる • 実機デバックをしてみる(Android端末を持ってたら) ※PCとスマホをシリアル通信する必要があります • 時計アプリに画像を挿入してデザインしてみる