• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
論理思考とプログラミング第10回
 

論理思考とプログラミング第10回

on

  • 812 views

 

Statistics

Views

Total Views
812
Views on SlideShare
742
Embed Views
70

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 70

http://chikoski.info 70

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    論理思考とプログラミング第10回 論理思考とプログラミング第10回 Presentation Transcript

    • 論理思考とプログラミング#10
      N. Shimizu
      chiko at sfc.keio.ac.jp
      2010.6.17
      1
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 今日の内容
      実際に1からプログラムを書いてみよう
      設計と実装
      いきなり伽藍を立てようとしないこと!
      できるところから始めて
      すこしずつ大きくしていく
      2010.6.17
      2
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • ボールが動いているプログラムを作る
      どう動いているのか?
      動きの例:
      重力に引かれて落ちる
      ボールのように弾む
      ピンボールのように動く
      星や月の動きを真似る
      などなど
      2010.6.17
      3
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • ボールのモデルをつくろう
      ボールを表すには何が必要だろうか?
      何を変数としたほうがいいのか?
      ボールとして望ましい振る舞いは何か?
      2010.6.17
      4
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • クラス宣言しよう
      新しいタブをつくり、
      その中でクラスを宣言しよう
      2010.6.17
      5
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • クラス宣言しよう
      class Ball{
      }
      中身を埋めよう
      次のものを表す変数をたそう
      X座標
      Y座標
      直径
      2010.6.17
      6
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 動く円のクラスを作ろう
      class Ball{
      float x; // 中心のX座標
      float y; // 中心のY座標
      float r; // 直径
      }
      2010.6.17
      7
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • クラスを使って変数を宣言しよう
      class Ball{
      float x;
      float y;
      float r;
      }
      Ballb;
      2010.6.17
      8
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • インスタンスを作ろう
      class Ball{
      float x;
      float y;
      float r;
      }
      Ballb;
      void setup(){
      b= new Ball();
      }
      2010.6.17
      9
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • インスタンス変数に代入しよう
      class Ball{
      float x;
      float y;
      float r;
      }
      Ball b;
      void setup(){
      b = new Ball();
      b.x = 200;
      b.y = 200;
      }
      2010.6.17
      10
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • ボールを表示してみよう
      Ballクラスのインスタンスを作成しよう
      作成したインスタンスの変数を初期化しよう
      インスタンスの持っている変数を使ってボールを表示しよう
      2010.6.17
      11
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>

    • void draw(){
      stroke(192, 192, 192, 255);
      fill(192, 0, 192, 255);
      ellipse(b.x, b.y, b.r, b.r);
      }
      2010.6.17
      12
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • ボールを表示するメソッドを作ろう
      void draw(){
      stroke(192, 192, 192, 255);
      fill(192, 0, 192, 255);
      ellipse(b.x, b.y, b.r, b.r);
      }
      ここをメソッドにする
      2010.6.17
      13
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • どこでメソッドを定義したら良いか?
      候補
      Ballクラスの中
      メインのプログラムの中
      表示する責任は誰が負っているのか?
      Ballの各インスタンスが負っているなら、Ballクラスの中
      メインのプログラムなら、メインのプログラム中
      2010.6.17
      14
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • Ballクラスの中に定義しよう
      ボールを表示するメソッドを定義しよう
      メインのプログラムのdrawメソッドで呼び出そう
      2010.6.17
      15
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 定義例
      class Ball{
      float x;
      float y;
      float r;
      void draw(){
      stroke(192, 192, 192, 255);
      fill(192, 0, 192, 255);
      ellipse(x,y,r,r);
      }
      }
      2010.6.17
      16
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 呼び出した例
      void draw(){
      b.draw();
      }
      2010.6.17
      17
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 落ちる動きを作ろう
      スピードを表す変数を作ろう
      落ちる
      Y座標が大きくなる
      重力によって大きくなる量が増える
      落ちる動きをメソッドにまとめ、Ballクラスに追加しよう
      2010.6.17
      18
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 落ちるメソッドを追加した例
      class Ball{
      float x;
      float y;
      float r;
      float dy;
      void draw(){
      stroke(192, 192, 192, 255);
      fill(192, 0, 192, 255);
      ellipse(x, y, r, r);
      }
      void move(){
      dx = dx + 0.05;
      y = y + dy;
      }
      }
      2010.6.17
      19
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 跳ね返りを作ろう
      端にきたら反射させよう
      2010.6.17
      20
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 跳ね返りを作ろう
      下端で跳ね返るとき、縦方向のスピードを減衰させてみよう
      跳ね返りを処理するメソッドをBallクラスに追加しよう
      下端
      2010.6.17
      21
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 跳ね返るメソッドを追加した例
      class Ball{
      float x;
      float y;
      float r;
      float dy;
      void draw(){
      stroke(192, 192, 192, 255);
      fill(192, 0, 192, 255);
      ellipse(x, y, r, r);
      }
      void move(){
      dx = dx + 0.05;
      y = y + dy;
      }
      void bound(){
      if(height - r/2 <= y){
      dy = dy *0.6 * -1;
      }
      if(x <= r/2 || width - r/2 <= x){
      dx = dx * -1;
      }
      }  
      }
      2010.6.17
      22
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • インタラクションを追加しよう
      ユーザの操作によってプログラムの振る舞いが変わるようにしよう
      ハンドルできる操作
      マウスのクリック
      キーの入力
      2010.6.17
      23
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 操作->振る舞いのルールを作ろう
      今回は
      クリックする->ボールがマウスカーソルめがけて動く
      それ以外->重力によって落ちる
      2010.6.17
      24
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 動きのモードが違う
      今回は
      クリックする->マウスカーソルをめがけて動くモードで動く
      それ以外->重力にしたがって落ちるモードで動く
      2010.6.17
      25
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • モードを実現するには
      モードを表す変数を作る
      ユーザの操作時に、各モードを表す値を代入
      変数の値によってふるまいを変える
      2010.6.17
      26
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • Ballクラスにモードを表す変数を加えよう
      考えなくてはいけないこと
      型は何にするのか
      どの値がどのモードに対応しているのか
      上記のことを決めたら実装しよう
      2010.6.17
      27
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • ある地点へ円を動かす
      2010.6.17
      28
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 真横の場合
      (x1, y1)
      (x2, y1)
      x2 – x1
      2010.6.17
      29
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 1フレームで進む量
      (x1, y1)
      (x2, y1)
      (x2 – x1) / N
      2010.6.17
      30
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 真上の場合
      (x1, y2)
      (x1, y1)
      y2 – y1
      2010.6.17
      31
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 1フレームで進亮
      (x1, y2)
      (y2 – y1) / N
      (x1, y1)
      2010.6.17
      32
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • ある地点へ円を動かす
      y2 – y1
      (x2, y2)
      (x1, y1)
      x2 – x1
      2010.6.17
      33
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • クリックされた点へ動かす
      クリック
      mouseY – y1
      (mouseX, mouseY)
      (x1, y1)
      mouseX – x1
      2010.6.17
      34
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 各モードを実装しよう
      各モードを実装しよう
      モードを切り替えられるようにしよう
      マウスクリックで追いかけるモード
      離したら落ちるモード
      2010.6.17
      35
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 配列で「集まり」を実現しよう
      2010.6.17
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
      36
    • 配列は同じ型の変数の集まり
      Ball
      Ball
      Ball
      Ball
      配列
      2010.6.17
      37
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 各変数のことを要素と呼びます
      要素
      要素
      要素
      要素
      Ball
      Ball
      Ball
      Ball
      配列
      2010.6.17
      38
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 各要素はすべて同じ型です
      要素
      要素
      要素
      要素
      Ball
      Ball
      Ball
      Ball
      配列
      2010.6.17
      39
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 配列内での位置があります
      0番目
      3番目
      1番目
      2番目
      Ball
      Ball
      Ball
      Ball
      配列
      2010.6.17
      40
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 配列には長さがあります
      Ball
      Ball
      Ball
      Ball
      長さ4の配列
      2010.6.17
      41
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 配列の長さは変わりません
      Ball
      Ball
      Ball
      Ball
      長さ4の配列
      2010.6.17
      42
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 配列も一つのインスタンスです
      Ball
      Ball
      Ball
      Ball
      配列
      2010.6.17
      43
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • Ball型の要素を持つ配列を宣言する
      Ball[] balls;
      2010.6.17
      44
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 配列の初期化
      balls = new Ball[4];
      inti = 0;
      while(i < balls.length){
      balls[i] = new Ball();
      }
      2010.6.17
      45
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 同じメソッドを呼ぶ
      inti = 0;
      while(i < balls.length){
      balls[i].draw();
      }
      i番目の要素のdrawメソッドを呼ぶ
      2010.6.17
      46
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>
    • 配列を使ってみよう
      10個のボールを配列を使って管理しよう
      やること
      配列を宣言しよう
      宣言した配列を初期化しよう
      メインのプログラムのdrawメソッド内で、要素すべてのdraw, move, boundメソッドを呼び出そう
      2010.6.17
      47
      論理思考とプログラミング#10 N.Shimizu <chiko at sfc.keio.ac.jp>