コンピュータプログラミングII (1)

復習 / 数値の扱い

このスライドの使い方

テキスト等がはみ出した場合は、フォントサイズを小さくして調整する。 「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)

本日のゴール

クラス分けと補習

演習課題の提出方法

復習: 繰り返し

forループ

for(式1 ; 式2 ; 式3) {
    繰り返しの中身の処理
}

式2 は繰り返しを続ける条件。真(true)なら続ける。

whileループ

forループで書ける処理はwhileループでも書くことができる。

式1;
while(式2) {
    繰り返しの中身の処理
    式3;
}

練習: だんだん大きくなる円

12個の円が横一列に並んでいる。円の半径は左から徐々に大きくなる。

練習: だんだん大きくなる円

前準備

size(400, 400);             // ウィンドウのサイズ
background(255, 255, 255);  // 背景色(白)
noStroke();                 // 輪郭線を無効に

int x = 30;                 // 円の中心の x座標の初期値
int y = 200;                // 円の中心の y座標
int dx = 30;                // 円の中心間の距離
int d = 3;                  // 円の直径の初期値
int dd = 2;                 // 円の直径の増分
int n = 12;                 // 円の個数

練習: だんだん大きくなる円

size(400, 400);             // ウィンドウのサイズ
background(255, 255, 255);  // 背景色(白)
noStroke();                 // 輪郭線を無効に

int x = 30;                 // 円の中心の x座標の初期値
int y = 200;                // 円の中心の y座標
int dx = 30;                // 円の中心間の距離
int d = 3;                  // 円の直径の初期値
int dd = 2;                 // 円の直径の増分
int n = 12;                 // 円の個数

fill(0, 0, 0);              // 塗る色 (黒)
for(int i = 0; i < n; i++) {
  println("x=" + x);        // コンソールに変数を出力
  println("d=" + d);
  ellipse(x, y, d, d);      // 楕円の中心のx,y座標、幅、高さ
  x = x + dx;
  d = d + dd;
}

復習: 円(楕円)の描画

ellipse()

ellipse(a, b, c, d);

ellipseMode()

事前に ellipseMode() を使って、ellipse() のパラメータの意味を変えることができる。

ellipseMode(CORNER);
ellipse(左上のx座標, 左上y座標, 幅, 高さ);

練習: だんだん色が変わる円

12個の円が横一列に並んでいる。円の半径が大きくなるだけでなく、色が黒から赤に変化している。

練習: だんだん色が変わる円

前準備

size(400, 400);             // ウィンドウのサイズ
background(255, 255, 255);  // 背景色(白)
noStroke();                 // 輪郭線を無効に

int x = 30;                 // 円の中心の x座標の初期値
int y = 200;                // 円の中心の y座標
int dx = 30;                // 円の中心間の距離
int d = 3;                  // 円の直径の初期値
int dd = 2;                 // 円の直径の増分
int n = 12;                 // 円の個数

ここまでは同じ。色を扱うため以下を追加。

int b;                      // 塗る色の明るさ(brightness)

b の値は、0個目の円が 0、(n - 1) 個目の円が 255 となるようにする。

練習: だんだん色が変わる円

size(400, 400);             // ウィンドウのサイズ
background(255, 255, 255);  // 背景色(白)
noStroke();                 // 輪郭線を無効に

int x = 30;                 // 円の中心の x座標の初期値
int y = 200;                // 円の中心の y座標
int dx = 30;                // 円の中心間の距離
int d = 3;                  // 円の直径の初期値
int dd = 2;                 // 円の直径の増分
int n = 12;                 // 円の個数
int b;                      // 塗る色の明るさ(brightness)

for(int i = 0; i < n; i++) {
  b = 255 * i / (n - 1);    // n - 1 個目で最大値 255 に
  println("b=" + b);        // コンソールに変数を出力
  fill(b, 0, 0);
  println("x=" + x);
  println("d=" + d);
  ellipse(x, y, d, d);      // 楕円の中心のx,y座標、幅、高さ
  x = x + dx;
  d = d + dd;
}

復習: 条件分岐

if文

if(条件1) {
    条件1が真のときに実行する処理
}
else if(条件2) {
    条件1が偽で条件2が真のときに実行する処理
}
...
else {
    これまでの条件がすべて偽であったときに実行する処理
}

else if はいくつでも書くことができる。

練習: だんだん色が変わる円(RGB入れ替え)

12個の円が横一列に並んでいる。円の半径が大きくなるだけでなく、色が黒から明るく変化しているが、色相はRGBの順に繰り返している。

練習: だんだん色が変わる円(RGB入れ替え)

前準備 (前回と同じ)

size(400, 400);             // ウィンドウのサイズ
background(255, 255, 255);  // 背景色(白)
noStroke();                 // 輪郭線を無効に

int x = 30;                 // 円の中心の x座標の初期値
int y = 200;                // 円の中心の y座標
int dx = 30;                // 円の中心間の距離
int d = 3;                  // 円の直径の初期値
int dd = 2;                 // 円の直径の増分
int n = 12;                 // 円の個数
int b;                      // 塗る色の明るさ(brightness)

繰り返しの回数 i の値によって、RGBのどの成分を明るくするかを切り替える。

練習: だんだん色が変わる円(RGB入れ替え)

後半のみ示す。

for(int i = 0; i < n; i++) {
  b = 255 * i / (n - 1);    // n - 1 個目で最大値 255 に
  println("i=" + i);
  println("b=" + b);
  if( i % 3 == 0 ) {
    fill(b, 0, 0);
  }
  else if ( i % 3 == 1 ) {
    fill(0, b, 0);
  }
  else {
    fill(0, 0, b);
  }
  println("x=" + x);
  println("d=" + d);
  ellipse(x, y, d, d);      // 楕円の中心のx,y座標、幅、高さ
  x = x + dx;
  d = d + dd;
}

3で割った余りで場合分けをしている。

復習: アニメーション

パラパラまんがのように少しずつ違った絵を順番に書くために、プログラムを次の部分に分けて考える

void setup() {
    ........
    ........
    アニメーションを開始する前に一度だけ実行する命令を書く部分
    ........
    ........
}

void draw() {
    ........
    ........
    アニメーションの1コマを描くために、一定時間間隔で何回も実行する命令を書く部分
    ........
    ........
}

練習: アニメーションで色相環

色相環は中学の美術で学んだ(はず)。

時刻が進むほど回転角 theta が大きくなるようにすると回転する。1週すると色相環になる。

練習: アニメーションで色相環

色を RGB ではなく HSB (色相 hue, 彩度 saturation, 明度 brightness) で指定するモードにし、色相だけを変化させる。

練習: アニメーションでない色相環

練習: アニメーションでない色相環

前準備

int r = 150;          // 円の半径
int theta;            // 回転角
int dTheta = 5;       // 回転角の増分/点
float rad;            // 回転角
int d = 8;            // 点の直径
float x, y;           // 点の中心座標

size(400, 400);
noStroke();
background(255, 255, 255);
fill(0, 0, 0);
colorMode(HSB, 360, 100, 100);  // 色の指定をHSBに
                                // (色相 0-360, 彩度 0-100, 明度 0-100)

練習: アニメーションでない色相環

theta = 0;
while(theta < 360) {
  rad = radians(theta);
  x = r * cos(rad);
  y = -r * sin(rad);
  fill(theta, 100, 100);
  println("theta=" + theta);
  println("x=" + x);
  println("y=" + y);
  ellipse(x + 200, y + 200, d, d);      // 楕円の中心のx,y座標、幅、高さ
  theta = theta + dTheta;
}

練習: アニメーションで色相環

いよいよアニメーションに。1フレームにつき1つの点を描くことにすると、繰り返しの1回が1フレームの描画(draw)と対応。

変数の宣言と初期化

int r = 150;          // 円の半径
int theta;            // 回転角
int dTheta = 5;       // 回転角の増分/点
float rad;            // 回転角
int d = 8;            // 点の直径
float x, y;           // 点の中心座標

setup

void setup() {
  size(400, 400);
  noStroke();
  background(255, 255, 255);
  fill(0, 0, 0);
  theta = 0;
  colorMode(HSB, 360, 100, 100);  // 色の指定をHSBに
                                  // (色相 0-360, 彩度 0-100, 明度 0-100)
}

練習: アニメーションで色相環

draw

void draw() {
  rad = radians(theta);
  x = r * cos(rad);
  y = -r * sin(rad);
  fill(theta % 360, 100, 100);
  println("theta % 360 =" + (theta % 360));
  println("x=" + x);
  println("y=" + y);
  ellipse(x + 200, y + 200, d, d);      // 楕円の中心のx,y座標、幅、高さ
  theta = theta + dTheta;
}

数値の扱い

復習: これまでに学んだ、数値を表す型

それぞれ、表現できる範囲は限定されている。

整数

int の特徴

整数には、16bit の short、64bit の long も用意されている。

実数

float の特徴

2年生から使う Java では倍精度と呼ばれる 64bit (有効桁数 約15桁) の double がよく用いられる。

Processing では ellipse() のような組み込み関数が float にしか対応していないので、double を使うメリットが少ない。

整数と実数の混合計算

よくある間違い

int k = 7;
int j = 3;
float x;

x = k / j;

型の変換

a が整数のとき、以下のように書くと float に変換した値が得られる。

(float) a

さきほどの例

int k = 7;
int j = 3;
float x;

x = k / (float) j;

型の変換 (関数タイプ)

()の中に変換したい値を記述する。

(int) f     // キャスト演算子による変換

int(f)      // 関数による変換
(float) a   // キャスト演算子による変換

float(a)    // 関数による変換