コンピュータプログラミングI(2)
変数と繰り返し処理

June 15, 2017

Nakajima, Yajima
Iwai, Tatsuta
Kakizaki, Ikeda

このスライドの使い方

テキスト等がはみ出した場合は、フォントサイズを小さくして調整する。 「S」 キーで小さく、「B」 キーで大きくなる。また、 下記のキーボード操作が使用できる。(一部キー操作は IE のみ対応)

「←」 or 「Page Up」 前のスライドに戻る
「→」 or 「Page Down」 or「スペース」 次のスライドに進む
「Home」 and 「End」 先頭(Home)または最後(End)のスライドへ移動
「C」 or 「contents?」 をクリック スライド一覧の表示
「F11」 or 「Ctrl+Shift+F (Win)」, 「Cmd+Shift+F (Mac)」 フルスクリーン表示と通常表示の切り替え
「F」 フッタの表示と非表示の切り替え
「A」 全スライド表示に切替 (印刷時に使う)
「S」「-」/「B」「+」 フォントサイズの大(B) 小(S)

本日のゴール

Processingプログラム保存時の注意

  • ファイル名には拡張子(.pde)が自動的に追加されるので自分で拡張子を書く必要はない
  • 課題の提出時など注意する

  • 覚えておくと便利なProcessingショートカット

  • プログラムの実行:Ctrl+R
  • プログラムの保存:Ctrl+S
  • プログラムの終了:Alt+F4(Windowsのショートカット)
  • 記述したプログラムの自動整形:Ctrl+T

  • 変数とは (教科書pp.40-41)

    例: 「counter」という変数に4が入っているイメージ

    例題

    円の中心のy座標と直径dを変数に格納し、3つの円を書くプログラム

    size(480, 120);
    int y = 60;
    int d = 80;
    ellipse(75, y, d, d);
    ellipse(175, y, d, d);
    ellipse(275, y, d, d);
    

    例題 (つづき)

    変数の値を変更して、y座標の値を100、直径dを130に変更してみよう

    size(480, 120);
    int y = 100;
    int d = 130;
    ellipse(75, y, d, d);
    ellipse(175, y, d, d);
    ellipse(275, y, d, d);
    

    変数の作成 (教科書pp.41-42)

    例: さまざまなデータ型の変数

    変数の宣言

    イコールは、「右に書いてある値を左の変数に入れる」という意味がある
    これを「代入」呼ぶ
    数学の「等しい」という意味ではないので注意

    変数と四則演算 (教科書pp.43-44)

    変数の値の確認方法(print,println関数を使う方法)

    計算結果を確認するために、変数の中身を画面に表示させる命令を確認しておこう

    下の黒い領域にさりげなく表示されるので、注意して見てみよう

    int x;
    int y = 6;
    int z = 4;
    
    x = y + z * 3;
    println(x);
    x = (y + z) * 3;
    println(x);
    

    変数の値の確認方法(デバッグ機能を使う方法)

    練習(2-1)

    次のようなプログラムを作りなさい。

    変数を使い、円の中心をx=75, y=60、直径をd=100と置こう
    まず、中心が(x, y)、直径がdの円を描く。
    次に、元のxから右に100px、200px、300px離れた同じ大きさの円をそれぞれ3つ描く

    size(480, 120);
    int x = .....;
    int y = .....;
    int d = .....;
    ellipse(x, y, d, d);
    ellipse(..........);
    ellipse(..........);
    ellipse(..........);
    

    変数を使った計算

    プログラムでは、数学の常識では一見奇妙に見える書き方ができる

    x = x + 1;
    

    代入は、「右に書いてある値を左の変数に入れる」ということを思い出そう
    この式の意味:元々のxと1を足した結果を、新たにxに代入する
    「元のxの値を1増やす」と解釈すると良い

    例えば、元のxが10であったとすると、11が新たにxに入り、古い10という値は消えてなくなる

    練習(2-2)

    先ほどの練習のプログラムと同じ働きをするものを、次の考え方を用いて書き換えてみよう

    最初に、変数を使い円の中心座標をx=75, y=60と置こう
    まず、このx, yの位置に半径100pxの円を描く
    次にxを100増やしてx, yの位置に同じ大きさの円を描き、
    またxを100増やして、x, yの位置に同じ大きさの円を描く
    さらにまたxを100増やして、x, yの位置に同じ大きさの円を描く

    size(480, 120);
    int x = 75;
    int y = 60;
    int d = 100;
    ellipse(x, y, d, d);
    x = ........
    ellipse(x, y, d, d);
    x = ........
    ellipse(x, y, d, d);
    x = ........
    ellipse(x, y, d, d);
    

    繰り返し(pp.44-50)

    等間隔で線を描くプログラムの例

    size(480, 120);
    line( 10, 20,  10, 100);
    line( 20, 20,  20, 100);
    line( 30, 20,  30, 100);
    line( 40, 20,  40, 100);
    line( 50, 20,  50, 100);
    line( 60, 20,  60, 100);
    line( 70, 20,  70, 100);
    line( 80, 20,  80, 100);
    line( 90, 20,  90, 100);
    line(100, 20, 100, 100);

    「line(???, 20, ???, 100);」の部分は、???が10ずつ増えながら規則的に何度も書かれていることに注目

    繰り返し - for文を使う

    このプログラムをfor文を使って書き換えると、ぐっと短くなる

    size(480, 120);
    int i;
    for (i = 10; i <= 100; i = i + 10) {
        line(i, 20, i , 100);
    }

    forの仕掛けを解き明かしていこう

    等間隔で線を描くプログラムをよく見てみよう(1)

    このプログラムは次のようにも書ける

    size(480, 120);
    int i = 10;
    line(i, 20, i, 100);
    i = i + 10;
    line(i, 20, i, 100);
    i = i + 10;
    line(i, 20, i, 100);
    i = i + 10;
    line(i, 20, i, 100);
    i = i + 10;
    line(i, 20, i, 100);
    i = i + 10;
    ......
    ......
    

    このプログラムは

    line( i, 20,  i, 100);
    i = i + 10;
    

    が何回も書いてあることがわかる
    つまり、この2行を繰り返せればプログラムが短く書ける

    等間隔で線を描くプログラムをよく見てみよう(2)

    「以下の内容を繰り返しなさい」という命令があったとすると、 次のように書き換えることができる

    size(480, 120);
    int i = 10;
    以下の2行を、iが100になるまで (10回) 繰り返す
      line(i, 20, i, 100);
      i = i + 10;
    

    上の繰り返しを「変数iが10から始まり、100で終わる、10刻みの繰り返し」というように考えよう

    このようなことを行うのがfor文である

    for文の動き

    繰り返しを init(初期化)、 test、 update に分けて考える

    1. 繰り返しを始める前の準備として、変数の「init」を行う
    2. 「test」を行い,true(成り立っている)であれば3.へ,false(成り立っていない)であれば終了する
    3. 文を実行,「update」を行い、2.へ

    for文の具体的な動作例

    size(480, 120);
    int i;
    for (i = 10; i <= 100; i = i + 10) {
        line(i, 20, i , 100);
    }

    以上から、10刻みに線を繰り返し描くことができた

    関係演算子(p.46)

    for文の「test」の部分には、変数と別の値を比べるための式が入る

    例
    i < 100   <-- iが100より小さい
    i > 100   <-- iが100より大きい
    i <= 100  <-- iが100以下
    i >= 100  <-- iが100以上
    i == 100  <-- iが100と等しい
    i != 100  <-- iが100と等しくない
    
    //boolean型の使用例
    int x = 10;
    int y = 100;
    boolean b;
    b = x <= y;
    println(b);
    

    例題: オセロ?

    オセロゲームの碁盤をfor文を使って描いてみよう
    碁盤の目を繰り返しで描くこと

    答え

    size(500, 500);
    for (int i = 50; i <= 450; i = i + 50) {
      line(50, i, 450, i);
    }
    for (int i = 50; i <= 450; i = i + 50) {
      line(i, 50, i, 450);
    }
    fill(255, 255, 255);
    ellipse(225, 225, 40, 40);
    ellipse(275, 275, 40, 40);
    fill(0,0,0);
    ellipse(275, 225, 40, 40);
    ellipse(225, 275, 40, 40);
    

    練習(2-3) : for文で頭の体操

    先週の演習問題の模様をfor文を使って書き換えてみよう

    変数と繰り返しのあれこれ(1)

    変数と繰り返しのあれこれ(2)

    演習問題

    問題1

     

    上のような模様を書くプログラムを書きなさい
    今回は、同じ処理が繰り返し書かれていることに注目し、 for文を使って書くこと
    スケッチ名: それぞれ quiz2_1, quiz2_2
    スケッチフォルダ内の.pdeファイルのみを提出

    演習問題

    問題2

    上のような模様を書くと、ジグザグに動いて見える
    このような画像を表示するプログラムを書きなさい
    for文を使いできるだけ短いプログラムで書くにはどうすれば良いか考え、工夫すること
    スケッチ名: zigzag
    スケッチフォルダ内の.pdeファイルのみを提出

    出典: 北岡 明佳 著、錯視入門 (朝倉書店)