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

  • 574 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
574
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 論理思考とプログラミング#09
    N. Shimizu
    chiko at sfc.keio.ac.jp
    2010.6.10
    1
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 2. if文:条件分岐
    if(条件式){
    条件が成り立っている場合の処理
    }
    2010.6.10
    2
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 3. else if
    if(A){
    B
    }else if(D){
    E
    }else {
    C
    }
    AならばB
    それ以外のとき
    DならばE
    それ以外ならばC
    2010.6.10
    3
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 4. 問題その1
    黒地に円を書く
    塗りはなし
    上3分の1は赤の円
    次の3分の1は青の円
    最後の3分の1は緑の円
    円の大きさ、位置はランダム
    2010.6.10
    4
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 5. 問題その2
    黒地に円を書く
    塗りはなし
    円の大きさ、位置はランダム
    画面を9分割し、その位置に応じて色を違えること
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    5
  • 6. 問題その3
    ランダムに図形を描く
    正方形もしくは円
    50%の確率
    大きさ:20×20
    ウィンドウサイズは400×400
    色はランダムに決まる
    2010.6.10
    6
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 7. インタラクションを加えてみよう
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    7
  • 8. インタラクション
    二つのものがお互いに影響しあうこと
    相互作用
    interaction
    人間とコンピュータプログラム
    人間の操作がプログラムの振る舞いを変える
    プログラムが人間の操作を変える
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    8
  • 9. プログラミングのモデルが変わります
    今まで:
    上から順番に実行される
    フロー駆動型 (flow driven)
    これから
    イベントに対応した部分のみ実行される
    イベント駆動型 (event driven)
    9
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    2010.6.10
  • 10. イベント
    マウスのボタンが押される
    マウスのボタンが離される
    キーボードのキーが押される
    キーボードのキーが離される
    一定期間が過ぎる
    10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    2010.6.10
  • 11. Processingのテンプレート
    void setup(){
    }
    void draw(){
    }
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    11
  • 12. Processingのテンプレート
    void setup(){
    }
    void draw(){
    }
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    12
    プログラム起動時に実行してほしいことを書く
  • 13. Processingのテンプレート
    void setup(){
    }
    void draw(){
    }
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    13
    一定間隔で実行して欲しいことを書く
  • 14. プログラムの例
    float x, y;
    void setup(){
    size(400, 400);
    colorMode(RGB, 100, 100, 100, 100);
    background(0, 0, 0, 100);
    noStroke();
    x = 0;
    y = 0;
    }
    void draw(){
    x = x + 0.5;
    y = y + 0.5;
    fill(100, 0, 0, 100);
    ellipse(x, y, 20, 20);
    }
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    14
  • 15. メソッド
    プログラムの一部分に名前をつけたもの
    メソッドの宣言:名前をつけること
    部分の指定:{}で囲む
    引数と返り値を持つ
    引数:パラメーター
    返り値:仕事をした結果
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    15
  • 16. さっきのプログラムでは
    void setup(){
    size(400, 400);
    colorMode(RGB, 100, 100, 100, 100);
    background(0, 0, 0, 100);
    noStroke();
    x = 0;
    y = 0;
    }
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    16
    この範囲に対してsetupという名前をつけた
  • 17. void setup()
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    17
    返り値の型
    名前
  • 18. void setup()
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    18
    このメソッドは返り値を返さない
  • 19. draw: 一定間隔で実行される部分
    void draw(){
    x = x + 0.5;
    y = y + 0.5;
    fill(100, 0, 0, 100);
    ellipse(x, y, 20, 20);
    }
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    19
  • 20. どうなるかやってみよう
    void draw(){
    background(0, 0, 0, 100);
    x = x + 0.5;
    y = y + 0.5;
    fill(100, 0, 0, 100);
    ellipse(x, y, 20, 20);
    }
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    20
    backgroundを足す
  • 21. フレームレート
    drawメソッドを呼び出す間隔
    正確には画面の描画回数
    FPS (Frame Per Second)
    frameRate(<フレームレート>)
    <フレームレート>には正の実数を書く
    E.g. frameRate(30); と書くと秒間30回実行する
    21
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    2010.6.10
  • 22. 名前の有効範囲
    名前
    変数:値に名前をつけたもの
    メソッド:プログラムに名前をつけたもの
    名前には有効範囲がある
    スコープ
    有効範囲外では参照できない
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    22
  • 23. 有効範囲:{と}の間
    int a, b;
    void setup(){
    intc, d;
    line(a, b, c, d);
    }
    void draw(){
    ellipse(c, d, 10, 10);
    }
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    23
  • 24. aとbのスコープ
    int a, b;
    void setup(){
    intc, d;
    line(a, b, c, d);
    }
    void draw(){
    ellipse(c, d, 10, 10);
    }
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    24
  • 25. cとdのスコープ
    int a, b;
    void setup(){
    intc, d;
    line(a, b, c, d);
    }
    void draw(){
    ellipse(c, d, 10, 10);
    }
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    25
    文法エラー
  • 26. 修正後
    int a, b;
    intc, d;
    void setup(){
    line(a, b, c, d);
    }
    void draw(){
    ellipse(c, d, 10, 10);
    }
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    26
  • 27. 有効範囲
    void setup(){
    intr = 20;
    for(inti = 0; i < 30; i = i + 1){
    float x = random(0, width);
    float y = random(0, height);
    ellipse(x, y, r, r);
    }
    }
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    27
  • 28. rの有効範囲
    void setup(){
    intr = 20;
    for(inti = 0; i < 30; i = i + 1){
    float x = random(0, width);
    float y = random(0, height);
    ellipse(x, y, r, r);
    }
    }
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    28
  • 29. i, x, yの有効範囲
    void setup(){
    intr = 20;
    for(inti = 0; i < 30; i = i + 1){
    float x = random(0, width);
    float y = random(0, height);
    ellipse(x, y, r, r);
    }
    }
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    29
  • 30. 問題その4
    動く点を二つに増やしてみよう
    2010.6.10
    30
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 31. 問題その5
    動く点を5つに増やしてみよう
    2010.6.10
    31
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 32. クラスでまとめよう
    クラス:型
    クラスを定義する:新しい型を定義する
    構成要素
    メンバ変数
    メソッド
    2010.6.10
    32
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 33. クラスの定義
    class クラス名{
    メンバ変数の宣言
    メソッドの定義
    }
    2010.6.10
    33
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 34. 動く円のクラスを作ろう
    class Ball{
    float x;
    float y;
    }
    2010.6.10
    34
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 35. クラスを使って変数を宣言しよう
    class Ball{
    float x;
    float y;
    }
    Ball a, b;
    2010.6.10
    35
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 36. 代入しよう
    class Ball{
    float x;
    float y;
    }
    Ball a, b;
    void setup(){
    a = new Ball();
    b = new Ball();
    }
    2010.6.10
    36
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 37. メンバ変数に代入しよう
    class Ball{
    float x;
    float y;
    }
    Ball a, b;
    void setup(){
    a = new Ball();
    b = new Ball();
    a.x = 0;
    a.y = 0;
    b.x = 100;
    b.y = 200;
    }
    2010.6.10
    37
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 38. 問題その6:drawを実装して動かそう
    class Ball{
    float x;
    float y;
    }
    Ball a, b;
    void setup(){
    a = new Ball();
    b = new Ball();
    a.x = 0;
    a.y = 0;
    b.x = 100;
    b.y = 200;
    }
    2010.6.10
    38
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 39. 問題その7:メンバ変数を増やそう
    メンバ変数を増やそう
    増やす変数:移動スピード
    縦方向
    横方向
    増やした変数を使って書きなおそう
    2010.6.10
    39
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
  • 40. 問題その8:マウスカーソルを追いかける円
    mouseX / mouseY
    宣言しなくても使える変数
    mouseX
    mouseY
    マウスの位置とボールの位置から移動方向と移動量を計算しよう
    Ballクラスを利用して作成すること
    2010.6.10
    論理思考とプログラミング第9回 N.Shimizu <chiko at sfc.keio.ac.jp>
    40