SlideShare ist ein Scribd-Unternehmen logo
1 von 47
論理思考とプログラミング #11 N. Shimizu chiko@sfc.keio.ac.jp 2010.12.16 1 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
先週の内容 変数のスコープ 名前の有効範囲 宣言されたブロックの中で有効 メソッドを宣言する 処理をまとめて名前をつける 名前、引数、メソッド 2010.12.16 2 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
メソッド宣言の例 2010.12.16 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp> 3
今日の内容 アニメーション 音の再生 ライブラリの利用 オブジェクト指向 2010.12.16 4 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
アニメーションの原理 http://ja.wikipedia.org/wiki/ファイル:Animexample3.png より引用 2010.12.16 5 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
drawメソッド 1フレームごとに呼び出されます アニメーションを実現するには、次の処理をdrawメソッドで行います 前のフレームを消す 今のフレームの絵を描く 2010.12.16 6 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
前のフレームの絵を消す 背景色で塗りつぶせば消せます タイミング:今のフレームの絵を描く前 drawメソッドの先頭で行うと良い 背景色で塗りつぶす方法 rect(0, 0, width, height); background(0, 0, 0); 2010.12.16 7 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
簡単なアニメーション intx, y; void setup(){ x = 0; y = 0;   fill(255, 255, 255); } void draw(){    background(0, 0, 0); ellipse(x, y, 10, 10); x = x + 1; y = x; } 2010.12.16 8 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
問題その1 簡単なアニメーションのプログラムを次のように改良してください 改良点 最初は(0, 0) から円が斜めに動く クリックされると、クリックされた場所から斜めに動く 2010.12.16 9 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
クリックしたところから波紋が広がるプログラム 2010.12.16 10 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
波紋の動きをモデル化しよう 円を描けば良い 中心座標、直径 色 直径は決まった分だけ大きくなる どんどん消えていく:透明度を上げることで消滅を表現 2010.12.16 11 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
問題その2 クリックしたところから波紋がどんどん広がっていくプログラムを完成させてください 2010.12.16 12 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
-1 で初期化 2010.12.16 13 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
問題その3 問題その2の回答例を変更してください 変更点 x, y, r, opacityを-1で初期化するメソッドを追加してください 回答例でx, y, r, opacityを初期化している部分を作成したメソッドを呼び出すように書き換えてください 2010.12.16 14 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
返り値を返すメソッドを作ろう 返り値 メソッドの処理の結果 例:制作物、成否、ステータスコード 返り値を返すにはどうすれば良いのだろう? 2010.12.16 15 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
return文 返り値を返す文 文法:return 返す値; 利用例:return 1; 2010.12.16 16 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
常に1を返すメソッド intreturnOne(){    return 1; } 2010.12.16 17 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
常にtrueを返すメソッド boolean yes(){   return true; } 2010.12.16 18 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
xの値が0より大きいか調べるメソッド booleanisPositiveX(){ boolean result;     result = x > 0;     return result; } 2010.12.16 19 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
x, yが0より大きいか調べるメソッド booleaninFirstQuadrant(){ boolean result;     result = x > 0 && y > 0;     return result; } 2010.12.16 20 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
問題その4 問題その3を修正してください 修正点 波紋を描くべきかどうかを調べるためのメソッドを定義してください drawメソッドのif文を、定義したメソッドをつかって書き換えてください 2010.12.16 21 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
効果音をつけよう クリックしたときに水がはねる音を出したい Processingの標準命令には音を再生するものがない ライブラリを利用しよう 2010.12.16 22 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
ライブラリ メソッド宣言の集まり メソッド宣言 クラス(型)の宣言 定数の定義 他の人の書いたメソッドを利用できるようになります 2010.12.16 23 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
標準で利用できるライブラリ リファレンスをみてください 2010.12.16 24 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
import文 利用するライブラリの宣言 スケッチの先頭に書きます 例 importddf.minim.*; 2010.12.16 25 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
Minim 音を扱うためのライブラリ できること 音声ファイルの再生 録音 音響合成、イフェクト FFT 2010.12.16 26 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
新しいスケッチを作成してください 2010.12.16 27 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
音源をダウンロードしてください 下記のアドレスから http://dl.dropbox.com/u/407085/ronpro11.mp3 音源はhttp://koukaongen.com/ で公開されているものを利用しています 2010.12.16 28 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
音源をスケッチに追加してください クリックし、効果音をスケッチに追加 2010.12.16 29 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
Minimをインポートしよう 2010.12.16 30 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
クリック時に音を鳴らすプログラム import ddf.minim.*; import ddf.minim.signals.*; import ddf.minim.analysis.*; import ddf.minim.effects.*; Minim minim; AudioPlayer player; 2010.12.16 31 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
クリック時に音を鳴らすプログラム(続き) void setup(){   size(400, 400);   background(0, 0, 0);   minim = new Minim(this);   // minimインスタンスを作成 player = minim.loadFile("ronpro11.mp3”);   // mp3ファイルをロード。 } 2010.12.16 32 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
クリック時に音を鳴らすプログラム(続き) void draw(){ } void mouseClicked(){ player.rewind(); player.play(); } 2010.12.16 33 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
クリック時に音を鳴らすプログラム(続き) /* 停止時に呼ばれるメソッド */ void stop(){ player.close(); minim.stop(); super.stop(); } 2010.12.16 34 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
コメント プログラム中に書く解説文 後から読む時のヒント 無視して処理される コメントの書き方 行末までをコメントにする書き方 部分をコメントにする書き方 2010.12.16 35 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
行末までをコメントとする書き方 void setup(){   size(400, 400);   background(0, 0, 0);   minim = new Minim(this);   // minimインスタンスを作成 player = minim.loadFile("ronpro11.mp3”);   // mp3ファイルをロード。 } // のあとは行末までコメントとなります 2010.12.16 36 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
部分をコメントとする書き方 /* 停止時に呼ばれるメソッド */ void stop(){ player.close(); minim.stop(); super.stop(); } /* と */に囲まれた部分はコメントとなります 2010.12.16 37 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
インスタンス:値 void setup(){   size(400, 400);   background(0, 0, 0);   minim = new Minim(this); // minimインスタンスを作成 player = minim.loadFile("ronpro11.mp3”);   // mp3ファイルをロード。 } 2010.12.16 38 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
インスタンスとクラス 値と型 インスタンス 具体的な値 いくつかの属性とメソッドを持つ クラス 型の一種 インスタンスの性質を定義している 2010.12.16 39 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
new:インスタンスの作成 void setup(){   size(400, 400);   background(0, 0, 0);   minim = new Minim(this); // minimインスタンスを作成 player = minim.loadFile("ronpro11.mp3”);   // mp3ファイルをロード。 } 2010.12.16 40 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
インスタンスメソッド インスタンスの持っているメソッド インスタンス名とメソッド名を . でつなげると呼び出せる 例:minim.loadFile(“a.mp3”); 2010.12.16 41 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
問題その5 問題その4を修正してください 修正点 Minimをつかって音を鳴らせるようにしてください クリック時にronpro11.mp3を再生してください 2010.12.16 42 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
まとめ Processingでのアニメーション drawメソッド フレームごとに画面を書き換える インスタンスとクラス 値と型 インスタンスメソッド Minimを利用した音の再生 2010.12.16 43 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
最終課題について そろそろ内容を考えよう 技術的な制約 Processingを利用していること 条件分岐を利用していること(変更点) 自分で宣言した変数があること 自分で宣言したメソッドが使われていること イベントハンドラーは除く 名前、引数、返り値が自分で決めたものであること 2010.12.16 44 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
次回に発表した人には加点します 1/8の回に発表者を募ります 発表した人には加点します 2割増 多少増減するかも 早めに発表しよう 2010.12.16 45 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
発表内容 プログラムのデモ 当初やりたかったこと そのうちのどの部分ができたか 工夫した点、苦労した点 設計で工夫した点、苦労した点 実装で工夫した点、苦労した点 機能を付け加えるとしたら、何? 2010.12.16 46 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>
発表時間 口頭発表5分 デモなども含めて5分 時間がきたら打ち切り 質疑応答3分 口頭発表が早く終ったらその分延びます 口頭発表が長引いても3分とります 2010.12.16 47 論理思考とプログラミング,  N.Shimizu <chiko@sfc.keio.ac.jp>

Weitere ähnliche Inhalte

Mehr von Noritada Shimizu

asm.js x emscripten: The foundation of the next level Web games
asm.js x emscripten: The foundation of the next level Web gamesasm.js x emscripten: The foundation of the next level Web games
asm.js x emscripten: The foundation of the next level Web gamesNoritada Shimizu
 
Mozilla とブラウザゲーム
Mozilla とブラウザゲームMozilla とブラウザゲーム
Mozilla とブラウザゲームNoritada Shimizu
 
2016 gunma.web games-and-asm.js
2016 gunma.web games-and-asm.js2016 gunma.web games-and-asm.js
2016 gunma.web games-and-asm.jsNoritada Shimizu
 
20151128 firefoxos-handson
20151128 firefoxos-handson20151128 firefoxos-handson
20151128 firefoxos-handsonNoritada Shimizu
 
Inspection & Tweak: Firefox を使ったフロント開発
Inspection & Tweak: Firefox を使ったフロント開発Inspection & Tweak: Firefox を使ったフロント開発
Inspection & Tweak: Firefox を使ったフロント開発Noritada Shimizu
 
20150829 firefox-os-handson
20150829 firefox-os-handson20150829 firefox-os-handson
20150829 firefox-os-handsonNoritada Shimizu
 
20150727 Development tools for Firefox OS apps
20150727 Development tools for Firefox OS apps20150727 Development tools for Firefox OS apps
20150727 Development tools for Firefox OS appsNoritada Shimizu
 
Firefox OS でアプリを作るときに気をつけたい N 個のこと
Firefox OS  でアプリを作るときに気をつけたい N 個のことFirefox OS  でアプリを作るときに気をつけたい N 個のこと
Firefox OS でアプリを作るときに気をつけたい N 個のことNoritada Shimizu
 
Firefox OSアプリ開発ハンズオン(Hello World編)
Firefox OSアプリ開発ハンズオン(Hello World編)Firefox OSアプリ開発ハンズオン(Hello World編)
Firefox OSアプリ開発ハンズオン(Hello World編)Noritada Shimizu
 
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)Noritada Shimizu
 
Application submission, management and manetization in Firefox Marketplace
Application submission, management and manetization in Firefox MarketplaceApplication submission, management and manetization in Firefox Marketplace
Application submission, management and manetization in Firefox MarketplaceNoritada Shimizu
 
つくろう!Firefox OS アプリ
つくろう!Firefox OS アプリつくろう!Firefox OS アプリ
つくろう!Firefox OS アプリNoritada Shimizu
 
20150118 firefoxos-handson-helloworld
20150118 firefoxos-handson-helloworld20150118 firefoxos-handson-helloworld
20150118 firefoxos-handson-helloworldNoritada Shimizu
 
20141115 fx os-codereading
20141115 fx os-codereading20141115 fx os-codereading
20141115 fx os-codereadingNoritada Shimizu
 
20141030 html5j-firefox os-deviceapi
20141030 html5j-firefox os-deviceapi20141030 html5j-firefox os-deviceapi
20141030 html5j-firefox os-deviceapiNoritada Shimizu
 

Mehr von Noritada Shimizu (20)

20160428 html5jwebplat
20160428 html5jwebplat20160428 html5jwebplat
20160428 html5jwebplat
 
asm.js x emscripten: The foundation of the next level Web games
asm.js x emscripten: The foundation of the next level Web gamesasm.js x emscripten: The foundation of the next level Web games
asm.js x emscripten: The foundation of the next level Web games
 
Mozilla とブラウザゲーム
Mozilla とブラウザゲームMozilla とブラウザゲーム
Mozilla とブラウザゲーム
 
2016 gunma.web games-and-asm.js
2016 gunma.web games-and-asm.js2016 gunma.web games-and-asm.js
2016 gunma.web games-and-asm.js
 
20151224-games
20151224-games20151224-games
20151224-games
 
20151128 firefoxos-handson
20151128 firefoxos-handson20151128 firefoxos-handson
20151128 firefoxos-handson
 
20151117 devtools
20151117 devtools20151117 devtools
20151117 devtools
 
Inspection & Tweak: Firefox を使ったフロント開発
Inspection & Tweak: Firefox を使ったフロント開発Inspection & Tweak: Firefox を使ったフロント開発
Inspection & Tweak: Firefox を使ったフロント開発
 
20150822 osc-shimane
20150822 osc-shimane20150822 osc-shimane
20150822 osc-shimane
 
20150829 firefox-os-handson
20150829 firefox-os-handson20150829 firefox-os-handson
20150829 firefox-os-handson
 
20150829 firefox-os
20150829 firefox-os20150829 firefox-os
20150829 firefox-os
 
20150727 Development tools for Firefox OS apps
20150727 Development tools for Firefox OS apps20150727 Development tools for Firefox OS apps
20150727 Development tools for Firefox OS apps
 
Firefox OS でアプリを作るときに気をつけたい N 個のこと
Firefox OS  でアプリを作るときに気をつけたい N 個のことFirefox OS  でアプリを作るときに気をつけたい N 個のこと
Firefox OS でアプリを作るときに気をつけたい N 個のこと
 
Firefox OSアプリ開発ハンズオン(Hello World編)
Firefox OSアプリ開発ハンズオン(Hello World編)Firefox OSアプリ開発ハンズオン(Hello World編)
Firefox OSアプリ開発ハンズオン(Hello World編)
 
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
WebVR(html5j TV部、WebVRとかVRのUIとか勉強会)
 
Application submission, management and manetization in Firefox Marketplace
Application submission, management and manetization in Firefox MarketplaceApplication submission, management and manetization in Firefox Marketplace
Application submission, management and manetization in Firefox Marketplace
 
つくろう!Firefox OS アプリ
つくろう!Firefox OS アプリつくろう!Firefox OS アプリ
つくろう!Firefox OS アプリ
 
20150118 firefoxos-handson-helloworld
20150118 firefoxos-handson-helloworld20150118 firefoxos-handson-helloworld
20150118 firefoxos-handson-helloworld
 
20141115 fx os-codereading
20141115 fx os-codereading20141115 fx os-codereading
20141115 fx os-codereading
 
20141030 html5j-firefox os-deviceapi
20141030 html5j-firefox os-deviceapi20141030 html5j-firefox os-deviceapi
20141030 html5j-firefox os-deviceapi
 

論理思考とプログラミング2010年度秋学期第11回