論理思考とプログラミング#08<br />清水智公<br />chiko at sfc.keio.ac.jp<br />2009.12.3<br />1<br />論理思考とプログラミング #08  N.Shimizu<br />
先週の論理思考とプログラミング<br />2009.12.3<br />2<br />論理思考とプログラミング #08  N.Shimizu<br />
変数宣言<br />型<br />名前<br />2009.12.3<br />3<br />論理思考とプログラミング #08  N.Shimizu<br />
繰り返し<br />while( 条件 ){<br />処理<br />}<br />この条件が真かどうかを調べる<br />2009.12.3<br />4<br />論理思考とプログラミング #08  N.Shimizu<br />
条件分岐<br />if (条件){<br />処理A<br />}else{<br />処理B<br />}<br />条件が成立する->処理Aを実行<br />成立しない->処理Bを実行<br />elseの部分は省略できる<br />20...
こういう絵を描いてみよう<br />2009.12.3<br />6<br />論理思考とプログラミング #08  N.Shimizu<br />
仕様<br />400本線を引く<br />背景は黒<br />始点はランダム<br />終点もランダム<br />色はランダム<br />不透明度もランダム<br />2009.12.3<br />7<br />論理思考とプログラミング #0...
例<br />2009.12.3<br />8<br />論理思考とプログラミング #08  N.Shimizu<br />
width, height<br />width : 画面の幅<br />height : 画面の高さ<br />最初から宣言されている変数<br />2009.12.3<br />9<br />論理思考とプログラミング #08  N.Shim...
書き直してみた<br />2009.12.3<br />10<br />論理思考とプログラミング #08  N.Shimizu<br />
400回繰り返す<br />inti = 0;<br />while(i &lt; 400){<br />処理<br />i = i +1;<br />}<br />繰り返す前に必ずやること<br />繰り返しの最後に必ずやること<br />2...
for文で簡潔に書けるよ<br />繰り返す前に必ずやること<br />for(inti = 0; i &lt; 400; i = i + 1){<br />処理<br />}<br />繰り返しの最後に必ずやること<br />2009.12....
書き直してみた<br />2009.12.3<br />13<br />論理思考とプログラミング #08  N.Shimizu<br />
こういう絵を描いてみよう<br />黒地に円を書く<br />塗りはなし<br />上3分の1は赤の円<br />次の3分の1は青の円<br />最後の3分の1は緑の円<br />円の大きさ、位置はランダム<br />2009.12.3<br ...
例<br />2009.12.3<br />15<br />論理思考とプログラミング #08  N.Shimizu<br />
色<br />color型<br />colorメソッドで色作成<br />2009.12.3<br />16<br />論理思考とプログラミング #08  N.Shimizu<br />
3つ以上の場合わけ<br />if(場合Aの条件){<br />処理A<br />}else if(場合Bの条件){<br />処理B<br />}else{<br />処理C<br />}<br />A<br />B<br />C<br />...
こういう絵を描いてみよう<br />2009.12.3<br />18<br />論理思考とプログラミング #08  N.Shimizu<br />
例<br />前処理<br />2009.12.3<br />19<br />論理思考とプログラミング #08  N.Shimizu<br />
例(つづき)<br />2009.12.3<br />20<br />論理思考とプログラミング #08  N.Shimizu<br />
プログラム例の構成<br />前処理<br />for(inti = 0; i &lt; 400; i = i + 1){<br />円の中心座標と半径の決定<br />色の決定<br />描画<br />}<br />2009.12.3<br...
色の決定方法<br />2009.12.3<br />22<br />論理思考とプログラミング #08  N.Shimizu<br />
インタラクションを加えてみよう<br />2009.12.3<br />23<br />論理思考とプログラミング #08  N.Shimizu<br />
プログラミングのモデルが変わります<br />今まで:<br />上から順番に実行される<br />フロー駆動型 (flow driven)<br />これから<br />イベントに対応した部分のみ実行される<br />イベント駆動型 (eve...
イベント<br />マウスのボタンが押される<br />マウスのボタンが離される<br />キーボードのキーが押される<br />キーボードのキーが離される<br />一定期間が過ぎる<br />2009.12.3<br />25<br />論...
イベントに対応した部分<br />イベントハンドラ (event handler)<br />特別な名前をもったメソッド<br />mousePressed()<br />mouseMoved()<br />draw()<br />メソッドを自...
これを入力して実行してください<br />2009.12.3<br />27<br />論理思考とプログラミング #08  N.Shimizu<br />
解説<br />起動時に実行される<br />2009.12.3<br />28<br />論理思考とプログラミング #08  N.Shimizu<br />
解説<br />ボタンが離されたら実行される<br />2009.12.3<br />29<br />論理思考とプログラミング #08  N.Shimizu<br />
解説<br />一定期間がすぎたら<br />実行される<br />2009.12.3<br />30<br />論理思考とプログラミング #08  N.Shimizu<br />
マウスカーソルの位置<br />用意されている変数から読み取る<br />X座標:mouseX(float型)<br />Y座標:mouseY(float型)<br />2009.12.3<br />31<br />論理思考とプログラミング #...
利用例<br />mouseX<br />mouseY<br />2009.12.3<br />32<br />論理思考とプログラミング #08  N.Shimizu<br />
一定期間で消えるようにしよう<br />一定期間<br />経つと<br />2009.12.3<br />33<br />論理思考とプログラミング #08  N.Shimizu<br />
どれくらいの期間で消すか<br />3秒後に消えることにしましょう<br />とりあえず円が一つの場合を考えよう<br />3秒経つ<br />2009.12.3<br />34<br />論理思考とプログラミング #08  N.Shimizu...
3秒ってどうやって測るの?<br />2009.12.3<br />35<br />論理思考とプログラミング #08  N.Shimizu<br />
drawメソッドでできるよ!<br />2009.12.3<br />36<br />論理思考とプログラミング #08  N.Shimizu<br />
解説<br />一定期間がすぎたら<br />実行される<br />2009.12.3<br />37<br />論理思考とプログラミング #08  N.Shimizu<br />
解説<br />一定間隔で実行される<br />2009.12.3<br />38<br />論理思考とプログラミング #08  N.Shimizu<br />
フレームレート<br />drawメソッドを呼び出す間隔<br />正確には画面の描画回数<br />FPS (Frame Per Second)<br />frameRate(&lt;フレームレート&gt;)<br /><フレームレート&gt...
どこで指定すれば良いの?<br />1回指定すれば十分<br />2009.12.3<br />40<br />論理思考とプログラミング #08  N.Shimizu<br />
消すにはどうすれば良いの?<br />2009.12.3<br />41<br />論理思考とプログラミング #08  N.Shimizu<br />
実行してみよう<br />2009.12.3<br />42<br />論理思考とプログラミング #08  N.Shimizu<br />
反応遅くない?<br />2009.12.3<br />43<br />論理思考とプログラミング #08  N.Shimizu<br />
描画の仕組み<br />プログラム<br />ellipse<br />ellipse<br />ellipse<br />ellipse<br />画面の状態を<br />記憶している変数<br />転送<br />転送<br />転送<br...
フレームレートが低い<br />1秒間に画面に転送する機会が少ない<br />次に転送するまでの期間が長い<br />画面への描画命令の反映が遅い<br />反応が遅い<br />イラッとくる<br />2009.12.3<br />45<br...
フレームレートは高くでも消えるまでは長くしたい<br />2009.12.3<br />46<br />論理思考とプログラミング #08  N.Shimizu<br />
円の生存期間を記憶しよう<br />ttlという名前の変数を作る<br />int型<br />初期値は90 ( 30fps * 3 ; 3秒間のフレーム数)<br />1フレームごとに1減る<br />0になったときに円を消す<br />20...
ttlを宣言する場所が重要<br />メソッドの外で<br />宣言しよう!<br />2009.12.3<br />48<br />論理思考とプログラミング #08  N.Shimizu<br />
フレームごとの処理<br />2009.12.3<br />49<br />論理思考とプログラミング #08  N.Shimizu<br />
「== 」って何?<br />2009.12.3<br />50<br />論理思考とプログラミング #08  N.Shimizu<br />
フレームごとの処理<br />ttlが0と等しいか?<br />2009.12.3<br />51<br />論理思考とプログラミング #08  N.Shimizu<br />
実行してみよう<br />2009.12.3<br />52<br />論理思考とプログラミング #08  N.Shimizu<br />
二回目以降すぐ消えちゃう><<br />2009.12.3<br />53<br />論理思考とプログラミング #08  N.Shimizu<br />
クリックごとにttlを初期化しよう<br />2009.12.3<br />54<br />論理思考とプログラミング #08  N.Shimizu<br />
実行してみよう<br />2009.12.3<br />55<br />論理思考とプログラミング #08  N.Shimizu<br />
じわじわ消えるように改良しよう<br />1秒ごとにじわじわ消えるようにしよう<br />じわじわ消える<br />不透明度の低い背景色で塗る<br />fill(0, 0, 0, 60);<br />rect(0, 0, width, hei...
実際に作ってみよう<br />2009.12.3<br />57<br />論理思考とプログラミング #08  N.Shimizu<br />
私の例<br />2009.12.3<br />58<br />論理思考とプログラミング #08  N.Shimizu<br />
円を二つにしてみよう<br />今のもの<br />円は二つ以上描ける<br />消えるタイミングは一緒<br />改良後<br />描ける円は二つ<br />消えるタイミングは別<br />2009.12.3<br />59<br />論理思...
消し方に工夫がいる<br />今:全体を黒く塗りつぶしている<br />改良後:円の部分だけ黒く塗りつぶす<br />描いた場所を覚えておかなくてはいけない<br />半径も覚えておかなくちゃいけない<br />ttlも別々に用意しなくてはいけ...
変数を宣言しよう<br />2009.12.3<br />61<br />論理思考とプログラミング #08  N.Shimizu<br />
変数の役割<br />2009.12.3<br />62<br />論理思考とプログラミング #08  N.Shimizu<br />
新しい方を残す<br />2009.12.3<br />63<br />論理思考とプログラミング #08  N.Shimizu<br />
drawの中での処理<br />2009.12.3<br />64<br />論理思考とプログラミング #08  N.Shimizu<br />
実行してみよう<br />2009.12.3<br />65<br />論理思考とプログラミング #08  N.Shimizu<br />
3つの円を・・・<br />もう勘弁してください<br />2009.12.3<br />66<br />論理思考とプログラミング #08  N.Shimizu<br />
同じような処理はまとめたい<br />二つの円を表すのに使った変数<br />位置(x1, y1とx2, y2)<br />大きさ (r1とr2)<br />生存期間(ttl1とttl2)<br />円を描く処理<br />徐々に消していく処理...
クラスにまとめましょう<br />2009.12.3<br />68<br />論理思考とプログラミング #08  N.Shimizu<br />
クラス?<br />変数の型<br />構成要素<br />状態を表すいくつかの変数<br />状態に基づいて動くいくつかのメソッド<br />2009.12.3<br />69<br />論理思考とプログラミング #08  N.Shimizu...
クラスの定義<br />名前<br />class<br />{と}の間に構成要素書く<br />2009.12.3<br />70<br />論理思考とプログラミング #08  N.Shimizu<br />
変数を追加しよう<br />2009.12.3<br />71<br />論理思考とプログラミング #08  N.Shimizu<br />
クラスを使って変数を宣言しよう<br />2009.12.3<br />72<br />論理思考とプログラミング #08  N.Shimizu<br />
値を代入しよう<br />・・・値?<br />2009.12.3<br />73<br />論理思考とプログラミング #08  N.Shimizu<br />
円を作ってc1, c2に代入<br />2009.12.3<br />74<br />論理思考とプログラミング #08  N.Shimizu<br />
Circleとc1, c2との関係<br />Circle :クラス<br />「円とは何か」<br />定義<br />c1, c2 :オブジェクト<br />一つ一つの円<br />クラスによって定義される具体的なもの<br />2009....
値を使ってみよう<br />2009.12.3<br />76<br />論理思考とプログラミング #08  N.Shimizu<br />
がんばって置き換えよう<br />2009.12.3<br />77<br />論理思考とプログラミング #08  N.Shimizu<br />
がんばって置き換えよう<br />2009.12.3<br />78<br />論理思考とプログラミング #08  N.Shimizu<br />
Edit -> Find <br />2009.12.3<br />79<br />論理思考とプログラミング #08  N.Shimizu<br />
動かしてみよう<br />2009.12.3<br />80<br />論理思考とプログラミング #08  N.Shimizu<br />
AとBはほとんど一緒の処理<br />A<br />B<br />2009.12.3<br />81<br />論理思考とプログラミング #08  N.Shimizu<br />
クラスの中にまとめよう<br />メソッドとしてまとめる<br />名前を決める<br />クラス定義の中に書く<br />2009.12.3<br />82<br />論理思考とプログラミング #08  N.Shimizu<br />
まとめてみた<br />2009.12.3<br />83<br />論理思考とプログラミング #08  N.Shimizu<br />
書いた場所<br />2009.12.3<br />84<br />論理思考とプログラミング #08  N.Shimizu<br />
使ってみよう<br />2009.12.3<br />85<br />論理思考とプログラミング #08  N.Shimizu<br />
drawの中での処理<br />C<br />D<br />2009.12.3<br />86<br />論理思考とプログラミング #08  N.Shimizu<br />
まとめよう!<br />2009.12.3<br />87<br />論理思考とプログラミング #08  N.Shimizu<br />
書いた場所<br />2009.12.3<br />88<br />論理思考とプログラミング #08  N.Shimizu<br />
実行してみよう<br />2009.12.3<br />89<br />論理思考とプログラミング #08  N.Shimizu<br />
今日のまとめ<br />イベント駆動型プログラム<br />クラスとオブジェクト<br />2009.12.3<br />90<br />論理思考とプログラミング #08  N.Shimizu<br />
Upcoming SlideShare
Loading in …5
×

論理思考とプログラミング#08

561 views
524 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
561
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

論理思考とプログラミング#08

  1. 1. 論理思考とプログラミング#08<br />清水智公<br />chiko at sfc.keio.ac.jp<br />2009.12.3<br />1<br />論理思考とプログラミング #08 N.Shimizu<br />
  2. 2. 先週の論理思考とプログラミング<br />2009.12.3<br />2<br />論理思考とプログラミング #08 N.Shimizu<br />
  3. 3. 変数宣言<br />型<br />名前<br />2009.12.3<br />3<br />論理思考とプログラミング #08 N.Shimizu<br />
  4. 4. 繰り返し<br />while( 条件 ){<br />処理<br />}<br />この条件が真かどうかを調べる<br />2009.12.3<br />4<br />論理思考とプログラミング #08 N.Shimizu<br />
  5. 5. 条件分岐<br />if (条件){<br />処理A<br />}else{<br />処理B<br />}<br />条件が成立する->処理Aを実行<br />成立しない->処理Bを実行<br />elseの部分は省略できる<br />2009.12.3<br />5<br />論理思考とプログラミング #08 N.Shimizu<br />
  6. 6. こういう絵を描いてみよう<br />2009.12.3<br />6<br />論理思考とプログラミング #08 N.Shimizu<br />
  7. 7. 仕様<br />400本線を引く<br />背景は黒<br />始点はランダム<br />終点もランダム<br />色はランダム<br />不透明度もランダム<br />2009.12.3<br />7<br />論理思考とプログラミング #08 N.Shimizu<br />
  8. 8. 例<br />2009.12.3<br />8<br />論理思考とプログラミング #08 N.Shimizu<br />
  9. 9. width, height<br />width : 画面の幅<br />height : 画面の高さ<br />最初から宣言されている変数<br />2009.12.3<br />9<br />論理思考とプログラミング #08 N.Shimizu<br />
  10. 10. 書き直してみた<br />2009.12.3<br />10<br />論理思考とプログラミング #08 N.Shimizu<br />
  11. 11. 400回繰り返す<br />inti = 0;<br />while(i &lt; 400){<br />処理<br />i = i +1;<br />}<br />繰り返す前に必ずやること<br />繰り返しの最後に必ずやること<br />2009.12.3<br />11<br />論理思考とプログラミング #08 N.Shimizu<br />
  12. 12. for文で簡潔に書けるよ<br />繰り返す前に必ずやること<br />for(inti = 0; i &lt; 400; i = i + 1){<br />処理<br />}<br />繰り返しの最後に必ずやること<br />2009.12.3<br />12<br />論理思考とプログラミング #08 N.Shimizu<br />
  13. 13. 書き直してみた<br />2009.12.3<br />13<br />論理思考とプログラミング #08 N.Shimizu<br />
  14. 14. こういう絵を描いてみよう<br />黒地に円を書く<br />塗りはなし<br />上3分の1は赤の円<br />次の3分の1は青の円<br />最後の3分の1は緑の円<br />円の大きさ、位置はランダム<br />2009.12.3<br />14<br />論理思考とプログラミング #08 N.Shimizu<br />
  15. 15. 例<br />2009.12.3<br />15<br />論理思考とプログラミング #08 N.Shimizu<br />
  16. 16. 色<br />color型<br />colorメソッドで色作成<br />2009.12.3<br />16<br />論理思考とプログラミング #08 N.Shimizu<br />
  17. 17. 3つ以上の場合わけ<br />if(場合Aの条件){<br />処理A<br />}else if(場合Bの条件){<br />処理B<br />}else{<br />処理C<br />}<br />A<br />B<br />C<br />2009.12.3<br />17<br />論理思考とプログラミング #08 N.Shimizu<br />
  18. 18. こういう絵を描いてみよう<br />2009.12.3<br />18<br />論理思考とプログラミング #08 N.Shimizu<br />
  19. 19. 例<br />前処理<br />2009.12.3<br />19<br />論理思考とプログラミング #08 N.Shimizu<br />
  20. 20. 例(つづき)<br />2009.12.3<br />20<br />論理思考とプログラミング #08 N.Shimizu<br />
  21. 21. プログラム例の構成<br />前処理<br />for(inti = 0; i &lt; 400; i = i + 1){<br />円の中心座標と半径の決定<br />色の決定<br />描画<br />}<br />2009.12.3<br />21<br />論理思考とプログラミング #08 N.Shimizu<br />
  22. 22. 色の決定方法<br />2009.12.3<br />22<br />論理思考とプログラミング #08 N.Shimizu<br />
  23. 23. インタラクションを加えてみよう<br />2009.12.3<br />23<br />論理思考とプログラミング #08 N.Shimizu<br />
  24. 24. プログラミングのモデルが変わります<br />今まで:<br />上から順番に実行される<br />フロー駆動型 (flow driven)<br />これから<br />イベントに対応した部分のみ実行される<br />イベント駆動型 (event driven)<br />2009.12.3<br />24<br />論理思考とプログラミング #08 N.Shimizu<br />
  25. 25. イベント<br />マウスのボタンが押される<br />マウスのボタンが離される<br />キーボードのキーが押される<br />キーボードのキーが離される<br />一定期間が過ぎる<br />2009.12.3<br />25<br />論理思考とプログラミング #08 N.Shimizu<br />
  26. 26. イベントに対応した部分<br />イベントハンドラ (event handler)<br />特別な名前をもったメソッド<br />mousePressed()<br />mouseMoved()<br />draw()<br />メソッドを自分で作らなくてはいけない!<br />2009.12.3<br />26<br />論理思考とプログラミング #08 N.Shimizu<br />
  27. 27. これを入力して実行してください<br />2009.12.3<br />27<br />論理思考とプログラミング #08 N.Shimizu<br />
  28. 28. 解説<br />起動時に実行される<br />2009.12.3<br />28<br />論理思考とプログラミング #08 N.Shimizu<br />
  29. 29. 解説<br />ボタンが離されたら実行される<br />2009.12.3<br />29<br />論理思考とプログラミング #08 N.Shimizu<br />
  30. 30. 解説<br />一定期間がすぎたら<br />実行される<br />2009.12.3<br />30<br />論理思考とプログラミング #08 N.Shimizu<br />
  31. 31. マウスカーソルの位置<br />用意されている変数から読み取る<br />X座標:mouseX(float型)<br />Y座標:mouseY(float型)<br />2009.12.3<br />31<br />論理思考とプログラミング #08 N.Shimizu<br />
  32. 32. 利用例<br />mouseX<br />mouseY<br />2009.12.3<br />32<br />論理思考とプログラミング #08 N.Shimizu<br />
  33. 33. 一定期間で消えるようにしよう<br />一定期間<br />経つと<br />2009.12.3<br />33<br />論理思考とプログラミング #08 N.Shimizu<br />
  34. 34. どれくらいの期間で消すか<br />3秒後に消えることにしましょう<br />とりあえず円が一つの場合を考えよう<br />3秒経つ<br />2009.12.3<br />34<br />論理思考とプログラミング #08 N.Shimizu<br />
  35. 35. 3秒ってどうやって測るの?<br />2009.12.3<br />35<br />論理思考とプログラミング #08 N.Shimizu<br />
  36. 36. drawメソッドでできるよ!<br />2009.12.3<br />36<br />論理思考とプログラミング #08 N.Shimizu<br />
  37. 37. 解説<br />一定期間がすぎたら<br />実行される<br />2009.12.3<br />37<br />論理思考とプログラミング #08 N.Shimizu<br />
  38. 38. 解説<br />一定間隔で実行される<br />2009.12.3<br />38<br />論理思考とプログラミング #08 N.Shimizu<br />
  39. 39. フレームレート<br />drawメソッドを呼び出す間隔<br />正確には画面の描画回数<br />FPS (Frame Per Second)<br />frameRate(&lt;フレームレート&gt;)<br /><フレームレート&gt;には正の実数を書く<br />E.g. frameRate(30); と書くと秒間30回実行する<br />2009.12.3<br />39<br />論理思考とプログラミング #08 N.Shimizu<br />
  40. 40. どこで指定すれば良いの?<br />1回指定すれば十分<br />2009.12.3<br />40<br />論理思考とプログラミング #08 N.Shimizu<br />
  41. 41. 消すにはどうすれば良いの?<br />2009.12.3<br />41<br />論理思考とプログラミング #08 N.Shimizu<br />
  42. 42. 実行してみよう<br />2009.12.3<br />42<br />論理思考とプログラミング #08 N.Shimizu<br />
  43. 43. 反応遅くない?<br />2009.12.3<br />43<br />論理思考とプログラミング #08 N.Shimizu<br />
  44. 44. 描画の仕組み<br />プログラム<br />ellipse<br />ellipse<br />ellipse<br />ellipse<br />画面の状態を<br />記憶している変数<br />転送<br />転送<br />転送<br />フレームレート:転送の頻度<br />実際の画面<br />2009.12.3<br />44<br />論理思考とプログラミング #08 N.Shimizu<br />
  45. 45. フレームレートが低い<br />1秒間に画面に転送する機会が少ない<br />次に転送するまでの期間が長い<br />画面への描画命令の反映が遅い<br />反応が遅い<br />イラッとくる<br />2009.12.3<br />45<br />論理思考とプログラミング #08 N.Shimizu<br />
  46. 46. フレームレートは高くでも消えるまでは長くしたい<br />2009.12.3<br />46<br />論理思考とプログラミング #08 N.Shimizu<br />
  47. 47. 円の生存期間を記憶しよう<br />ttlという名前の変数を作る<br />int型<br />初期値は90 ( 30fps * 3 ; 3秒間のフレーム数)<br />1フレームごとに1減る<br />0になったときに円を消す<br />2009.12.3<br />47<br />論理思考とプログラミング #08 N.Shimizu<br />
  48. 48. ttlを宣言する場所が重要<br />メソッドの外で<br />宣言しよう!<br />2009.12.3<br />48<br />論理思考とプログラミング #08 N.Shimizu<br />
  49. 49. フレームごとの処理<br />2009.12.3<br />49<br />論理思考とプログラミング #08 N.Shimizu<br />
  50. 50. 「== 」って何?<br />2009.12.3<br />50<br />論理思考とプログラミング #08 N.Shimizu<br />
  51. 51. フレームごとの処理<br />ttlが0と等しいか?<br />2009.12.3<br />51<br />論理思考とプログラミング #08 N.Shimizu<br />
  52. 52. 実行してみよう<br />2009.12.3<br />52<br />論理思考とプログラミング #08 N.Shimizu<br />
  53. 53. 二回目以降すぐ消えちゃう><<br />2009.12.3<br />53<br />論理思考とプログラミング #08 N.Shimizu<br />
  54. 54. クリックごとにttlを初期化しよう<br />2009.12.3<br />54<br />論理思考とプログラミング #08 N.Shimizu<br />
  55. 55. 実行してみよう<br />2009.12.3<br />55<br />論理思考とプログラミング #08 N.Shimizu<br />
  56. 56. じわじわ消えるように改良しよう<br />1秒ごとにじわじわ消えるようにしよう<br />じわじわ消える<br />不透明度の低い背景色で塗る<br />fill(0, 0, 0, 60);<br />rect(0, 0, width, height);<br />2009.12.3<br />56<br />論理思考とプログラミング #08 N.Shimizu<br />
  57. 57. 実際に作ってみよう<br />2009.12.3<br />57<br />論理思考とプログラミング #08 N.Shimizu<br />
  58. 58. 私の例<br />2009.12.3<br />58<br />論理思考とプログラミング #08 N.Shimizu<br />
  59. 59. 円を二つにしてみよう<br />今のもの<br />円は二つ以上描ける<br />消えるタイミングは一緒<br />改良後<br />描ける円は二つ<br />消えるタイミングは別<br />2009.12.3<br />59<br />論理思考とプログラミング #08 N.Shimizu<br />
  60. 60. 消し方に工夫がいる<br />今:全体を黒く塗りつぶしている<br />改良後:円の部分だけ黒く塗りつぶす<br />描いた場所を覚えておかなくてはいけない<br />半径も覚えておかなくちゃいけない<br />ttlも別々に用意しなくてはいけない<br />2009.12.3<br />60<br />論理思考とプログラミング #08 N.Shimizu<br />
  61. 61. 変数を宣言しよう<br />2009.12.3<br />61<br />論理思考とプログラミング #08 N.Shimizu<br />
  62. 62. 変数の役割<br />2009.12.3<br />62<br />論理思考とプログラミング #08 N.Shimizu<br />
  63. 63. 新しい方を残す<br />2009.12.3<br />63<br />論理思考とプログラミング #08 N.Shimizu<br />
  64. 64. drawの中での処理<br />2009.12.3<br />64<br />論理思考とプログラミング #08 N.Shimizu<br />
  65. 65. 実行してみよう<br />2009.12.3<br />65<br />論理思考とプログラミング #08 N.Shimizu<br />
  66. 66. 3つの円を・・・<br />もう勘弁してください<br />2009.12.3<br />66<br />論理思考とプログラミング #08 N.Shimizu<br />
  67. 67. 同じような処理はまとめたい<br />二つの円を表すのに使った変数<br />位置(x1, y1とx2, y2)<br />大きさ (r1とr2)<br />生存期間(ttl1とttl2)<br />円を描く処理<br />徐々に消していく処理<br />2009.12.3<br />67<br />論理思考とプログラミング #08 N.Shimizu<br />
  68. 68. クラスにまとめましょう<br />2009.12.3<br />68<br />論理思考とプログラミング #08 N.Shimizu<br />
  69. 69. クラス?<br />変数の型<br />構成要素<br />状態を表すいくつかの変数<br />状態に基づいて動くいくつかのメソッド<br />2009.12.3<br />69<br />論理思考とプログラミング #08 N.Shimizu<br />
  70. 70. クラスの定義<br />名前<br />class<br />{と}の間に構成要素書く<br />2009.12.3<br />70<br />論理思考とプログラミング #08 N.Shimizu<br />
  71. 71. 変数を追加しよう<br />2009.12.3<br />71<br />論理思考とプログラミング #08 N.Shimizu<br />
  72. 72. クラスを使って変数を宣言しよう<br />2009.12.3<br />72<br />論理思考とプログラミング #08 N.Shimizu<br />
  73. 73. 値を代入しよう<br />・・・値?<br />2009.12.3<br />73<br />論理思考とプログラミング #08 N.Shimizu<br />
  74. 74. 円を作ってc1, c2に代入<br />2009.12.3<br />74<br />論理思考とプログラミング #08 N.Shimizu<br />
  75. 75. Circleとc1, c2との関係<br />Circle :クラス<br />「円とは何か」<br />定義<br />c1, c2 :オブジェクト<br />一つ一つの円<br />クラスによって定義される具体的なもの<br />2009.12.3<br />75<br />論理思考とプログラミング #08 N.Shimizu<br />
  76. 76. 値を使ってみよう<br />2009.12.3<br />76<br />論理思考とプログラミング #08 N.Shimizu<br />
  77. 77. がんばって置き換えよう<br />2009.12.3<br />77<br />論理思考とプログラミング #08 N.Shimizu<br />
  78. 78. がんばって置き換えよう<br />2009.12.3<br />78<br />論理思考とプログラミング #08 N.Shimizu<br />
  79. 79. Edit -> Find <br />2009.12.3<br />79<br />論理思考とプログラミング #08 N.Shimizu<br />
  80. 80. 動かしてみよう<br />2009.12.3<br />80<br />論理思考とプログラミング #08 N.Shimizu<br />
  81. 81. AとBはほとんど一緒の処理<br />A<br />B<br />2009.12.3<br />81<br />論理思考とプログラミング #08 N.Shimizu<br />
  82. 82. クラスの中にまとめよう<br />メソッドとしてまとめる<br />名前を決める<br />クラス定義の中に書く<br />2009.12.3<br />82<br />論理思考とプログラミング #08 N.Shimizu<br />
  83. 83. まとめてみた<br />2009.12.3<br />83<br />論理思考とプログラミング #08 N.Shimizu<br />
  84. 84. 書いた場所<br />2009.12.3<br />84<br />論理思考とプログラミング #08 N.Shimizu<br />
  85. 85. 使ってみよう<br />2009.12.3<br />85<br />論理思考とプログラミング #08 N.Shimizu<br />
  86. 86. drawの中での処理<br />C<br />D<br />2009.12.3<br />86<br />論理思考とプログラミング #08 N.Shimizu<br />
  87. 87. まとめよう!<br />2009.12.3<br />87<br />論理思考とプログラミング #08 N.Shimizu<br />
  88. 88. 書いた場所<br />2009.12.3<br />88<br />論理思考とプログラミング #08 N.Shimizu<br />
  89. 89. 実行してみよう<br />2009.12.3<br />89<br />論理思考とプログラミング #08 N.Shimizu<br />
  90. 90. 今日のまとめ<br />イベント駆動型プログラム<br />クラスとオブジェクト<br />2009.12.3<br />90<br />論理思考とプログラミング #08 N.Shimizu<br />

×