#contents
// 第 4 回
* Processing (3) [#d483fe97]
** (少し肩の力を抜いてから) プログラミング「文法」続き [#uc8ede64]
さて，少し息抜きで? 動画を作成してから，プログラミング言語文法基礎の続きに進もう．
&br;&br;
CENTER:&size(24){''プログラムの流れを制御せよ！ 「if : 場合分け」を学ぶ''};
&br;&br;
今回がわかれば，プログラムの制御について基礎がわかったことになるはずだ．
注意深く進もう．
&br;&br;
&ref(/materials/notes.png); 以下の菊池教授の web に従い，実習を行おう．
: [[&ref(/materials/JNorth_arrow-right-sm.png); Processing入門5:http://www.cp.cmc.osaka-u.ac.jp/~kikuchi/kougi/simulation2009/processing5.html]] |
: [[&ref(/materials/JNorth_arrow-right-sm.png); Processing入門6:http://www.cp.cmc.osaka-u.ac.jp/~kikuchi/kougi/simulation2009/processing6.html]] |
Processing が得意な，アニメーション作成に触れてみよう．
他の言語だとこれがなかなか大変なのだよ．
&br;
レポート提出時に必要になるので，アニメーションをムービーファイルで記録しておこう．
&br;
&ref(/materials/warning.png); 上記 web の最初のプログラム例に修正が必要なので，下記を先に読んでおこう．
&br;
&ref(/materials/warning.png); アニメーション描画を決まった回数で止める方法について，下記を先に読んでおこう．
&br;
&ref(/materials/warning.png); アニメーションをムービーファイルに記録しておく方法について，下記を先に読んでおこう．
&br;&br;
: [[&ref(/materials/JNorth_arrow-right-sm.png); Processing入門6:http://www.cp.cmc.osaka-u.ac.jp/~kikuchi/kougi/simulation2009/processing6.html]] |
: [[&ref(/materials/JNorth_arrow-right-sm.png); Processing入門7:http://www.cp.cmc.osaka-u.ac.jp/~kikuchi/kougi/simulation2009/processing7.html]] |
プログラムの流れを思い通りに制御できると，状況に応じた複雑なことをコンピュータにさせられるようになる．
頭の固いコンピュータを少しでも柔軟に使うために，「流れの制御」は必須だ．
これもプログラムの基本中の基本なので, しっかりものにせよ！
&br;&br;
*** [[&ref(/materials/JNorth_arrow-right-sm.png); Processing入門6:http://www.cp.cmc.osaka-u.ac.jp/~kikuchi/kougi/simulation2009/processing6.html]] の最初のプログラムの修正 [#m790440b]
最初のプログラムの ''5行目の最後にセミコロンが必要'' なので，以下のように直しておこう．
&br;
&ref(/materials/Gnome-Preferences.png); 最初のプログラムを直した例．
// programu source 表記
#highlighter(language=java,number=on){{
int x;
void setup()
{
x = 10;
noStroke();
}
void draw()
{
background(0);
x += 1;
ellipse(x,x,30,30);
}
}}
&br;&br;
** アニメーション描画を決まった回数で止める方法 [#u581dc20]
ムービーファイルを作るときにはプログラムが永遠に動いていると都合が悪い．
そこで，アニメーション描画を決まった回数で止める方法を知っておこう．
&br;&br;
これは簡単で，アニメーションの画面を描く ''void draw(){}'' の中の最後に，
> if (frameCount > &color(red){''XX''};){
> noLoop();
> }
という3行を書いておくと，描画が &color(red){''XX''}; 回で止まる(正確には XX + 1 回かな?)．
&br;
&br;
&ref(/materials/Gnome-Preferences.png); 解説webの最初のアニメーション描画を 200回で止める例(11-13行が追加分) :
// programu source 表記
#highlighter(language=java,number=on){{
int x;
void setup() {
x = 10;
noStroke();
}
void draw() {
background(0);
x += 1;
ellipse(x,x,30,30);
if (frameCount > 200){
noLoop();
}
}
}}
&br;&br;
** アニメーションの保存の仕方 [#uedecccf]
あとで見直せるように，アニメーションを保存する方法について学んでおこう．
&br;
: ムービーファイルにいきなり記録 |
Processing のアニメーションプログラムに &color(red){''4箇所書き加えるだけで''};，プログラム実行時にムービーファイルが作られる．
実例を使って解説しよう．
&br;&br;
&ref(/materials/Gnome-Preferences.png); アニメーションの ''元の例'' : 解説webの最初の例 + 85回で停止 (= ムービーファイル作成機能なし)
#highlighter(language=java,number=on){{
int x;
void setup() {
x = 10;
noStroke();
}
void draw() {
background(0);
x += 1;
ellipse(x,x,30,30);
if (frameCount > 85){
noLoop();
}
}
}}
//
&br;&br;
このプログラムに，ムービーファイル作成機能を追加すると次のようになる．
&br;
&ref(/materials/Gnome-Preferences.png); アニメーションの例 : 解説webの最初の例 + 85回で停止 + ''ムービーファイル作成機能''
#highlighter(language=java,number=on){{
import processing.video.*; // ムービーファイル作成(1): 準備
MovieMaker mm; // ムービーファイル作成(1): 準備
int x;
void setup() {
x = 10;
noStroke();
mm = new MovieMaker(this, width, height, "movie.mov",
30, MovieMaker.H263, MovieMaker.MEDIUM);
// ムービーファイル作成(2): ファイル形式等の設定
}
void draw() {
background(0);
x += 1;
ellipse(x,x,30,30);
mm.addFrame();
// ムービーファイル作成(3): 描画毎に記録して…
if (frameCount > 85){
noLoop();
mm.finish();
// ムービーファイル作成(4): 最後にファイルにセーブ．
}
}
}}
&br;
上のプログラム中のコメントの ''ムービーファイル作成(1)-(4)'' を読めば使い方はわかるだろう．
よくわからなくても，これら 4箇所の行をそのまま自分のプログラムの該当する場所へ挿入すれば大丈夫だ．
&br;
この場合はプログラムを実行すれば，&ref(./movie.mov); というムービーファイルが出来るはずだ．
&br;&br;
この機能を使えば，Processing のアニメーションがそのままムービーになる！
&br;&br;
: 一瞬一瞬毎の画像ファイルに記録(上級者向け) |
アニメーションの画面を描く ''void draw(){}'' の中のさらに最後に，
&br;&br;
''saveFrame("hoge-#####.png");''
&br;&br;
と書いておくと，プログラムを動かして draw() が 1回絵を描くごとに hoge-00001.png, hoge-00002.png, ... と各瞬間の画像をどんどん保存してくれる(hoge- の部分は自分で変更してくれ)．
&br;
ファイル名の ''###…'' はファイル番号に置き換えられる．
上の例だと，''#####'' と ''#'' が5つ繋がっているのでファイル番号は 5桁まで大丈夫ということになる．
&br;
手間も記憶容量も食うが，こうして記録しておけば劣化がないため，
あとからゆっくり適切なアプリケーションを選んで使ってムービーファイルを作ることができる．
また，この手法はほかのツールでも使えるので，応用が効く．
&br;
&ref(/materials/warning.png); 多数の画像をつなげてムービーファイルを作る方法は自分で調べよう．
&br;
&ref(/materials/warning.png); プログラムが動いている限り画像が増え続けるので，プログラムがすぐ止まるようにしておくか，すぐ手で止めること！
&br;&br;
&ref(/materials/Gnome-Preferences.png); 実例: 解説webの最初の例 + 85回で停止する機能 + 各瞬間の画像記録．
#highlighter(language=java,number=on){{
int x;
void setup() {
x = 10;
noStroke();
}
void draw() {
background(0);
x += 1;
ellipse(x,x,30,30);
if (frameCount > 85){
noLoop();
}
saveFrame("hoge-###.png");
}
}}
//
このプログラムを用いれば，
&br;
&ref(./hoge-001.png); &ref(./hoge-020.png); &ref(./hoge-040.png);
&br;
という感じのファイルが狙った枚数だけ得られるはずだ．
&br;
そして，それらをつなげてムービーファイルを作成すると，
例えば &ref(./by-method2.avi); や &ref(./by-method2.mpg); というものができるだろう．
&br;&br;
* レポート [#f5874dcd]
以下の課題について，あたうかぎり賢明な調査と考察と実行をし，
&size(18){''ExpMath1-Report-04''};
という題名をつけて e-mail にて教官にレポートとして提出せよ．なお，各自の
+ 所属(学部，学科)
+ 学籍番号
+ 学年
+ 氏名
を書くのを忘れないように.
&ref(/materials/warning.png); 自分のレポート作成ツールセットを記載せよ(もちろん，今回のレポートもそのツールセットを使って作成すること)．
** レポート課題 [#udb41693]
+ 実習で出てきた練習問題に対しての，自分の解答プログラムと，その結果の図形(アニメーションの場合はムービーファイルを添付で)を示せ．
+ それぞれのプログラムを「''詳細に''」解説せよ．
+ 上級者向け: 各瞬間の画像を取っておく方法でムービーファイルを作成してみよ．
* about Icons, ClipArts [#ydb3caad]
For details, see [[&ref(/materials/JNorth_arrow-right-sm.png); this>materials]].
// ━┃┏┓┛┗┣┳┫┻╋
// コマンドライン入力は「行頭を > で始める」.
// コマンドライン出力は「行頭をブランクで始める」.
// 実習アイコン
// &ref(/materials/notes.png);
// 注意アイコン
// &ref(/materials/warning.png);
// Link アイコン
// &ref(/materials/JNorth_arrow-right-sm.png);
// OK アイコン
// &ref(/materials/OK.png);
// NG アイコン
// &ref(/materials/NG.png);
// サンプルアイコン
// &ref(/materials/Gnome-Preferences.png);
// 大文字での強調
// CENTER:&size(24){''ほげほげ''};
// 太文字 + 赤 での強調
// &color(red){''''};
// programu source 表記
// #highlighter(language=ruby,number=on,cache=on){{}}
