Home > 1b > | ノート > 1b-01 プログラムの構造化 - 初期化関数とメインループ関数

1b-01 プログラムの構造化 - 初期化関数とメインループ関数

Posted by: di
2009年9月28日 14:40
1b | ノート

後期の授業では、これまでのような静止画を生成する表現から、アニメーションやマウスの動きに反応する表現に挑戦する。

おさらい

バスを描く

size(400,400);

rectMode(CENTER);
rect(200,200,120,60); // ボディ
ellipse(165,230,30,30); // 後輪・外側
ellipse(235,230,30,30); // 前輪・外側
ellipse(165,230,20,20); // 後輪・内側
ellipse(235,230,20,20); // 前輪・内側
rectMode(CORNER);
rect(245,180,15,20);// 窓・前
rect(195,180,30,20); // 窓・中
rect(150,180,30,20); // 窓・後

バスを描く（変数を使って）

size(400,400);

int x=200; // ボディの中心のx座標
int y=200; // ボディの中心のy座標
int h=60; // ボディの高さ、幅の基準
int d=30; // 車輪の直径の基準

rectMode(CENTER);
rect(x,y,h*2,h); // ボディ
ellipse(x-35,y+h/2,d,d); // 後輪・外側
ellipse(x+35,y+h/2,d,d); // 前輪・外側
ellipse(x-35,y+h/2,d-10,d-10); // 後輪・内側
ellipse(x+35,y+h/2,d-10,d-10); // 前輪・内側
rectMode(CORNER);
rect(x+45,y-20,h/4,h/3); // 窓・前
rect(x-5,y-20,h/2,h/3); // 窓・中
rect(x-50,y-20,h/2,h/3); // 窓・後

初期化関数とメインループ関数を使う

関数とは

プログラムを「構造化」する際に用意する「部品」のようなもの。

初期化関数（setup）

void setup(){
  ＜初期化の内容＞
}

メインループ関数（draw）

void draw(){
  ＜プログラムの内容＞
}

バスを描く（初期化関数とメインループ関数を使って）

int x=200; // ボディの中心のx座標
int y=200; // ボディの中心のy座標
int h=60; // ボディの高さ、幅の基準
int d=30; // 車輪の直径の基準

void setup(){
  size(400,400);
  noLoop(); // 繰り返さない
}

void draw(){
  rectMode(CENTER);
  rect(x,y,h*2,h); // ボディ
  ellipse(x-35,y+h/2,d,d); // 後輪・外側
  ellipse(x+35,y+h/2,d,d); // 前輪・外側
  ellipse(x-35,y+h/2,d-10,d-10); // 後輪・内側
  ellipse(x+35,y+h/2,d-10,d-10); // 前輪・内側
  rectMode(CORNER);
  rect(x+45,y-20,h/4,h/3); // 窓・前
  rect(x-5,y-20,h/2,h/3); // 窓・中
  rect(x-50,y-20,h/2,h/3); // 窓・後
}

グローバル変数

関数の外で定義された変数
どの関数からでもアクセスできる

noLoop

drawの処理を繰り返さない（1回だけdrawの処理を行う）

自分で定義した関数を使う

3台のバスを描く（関数を使わずに1つ1つ描く）

int x=200; // ボディの中心のx座標
int y=200; // ボディの中心のy座標
int h=60; // ボディの高さ、幅の基準
int d=30; // 車輪の直径の基準

void setup(){
  size(400,400);
  noLoop(); // 繰り返さない
}

void draw(){
  // 中央のバス
  rectMode(CENTER);
  rect(x,y,h*2,h); // ボディ
  ellipse(x-35,y+h/2,d,d); // 後輪・外側
  ellipse(x+35,y+h/2,d,d); // 前輪・外側
  ellipse(x-35,y+h/2,d-10,d-10); // 後輪・内側
  ellipse(x+35,y+h/2,d-10,d-10); // 前輪・内側
  rectMode(CORNER);
  rect(x+45,y-20,h/4,h/3); // 窓・前
  rect(x-5,y-20,h/2,h/3); // 窓・中
  rect(x-50,y-20,h/2,h/3); // 窓・後

  // 左上のバス
  rectMode(CENTER);
  rect(x-100,y-100,h*2,h); // ボディ
  ellipse(x-35-100,y+h/2-100,d,d); // 後輪・外側
  ellipse(x+35-100,y+h/2-100,d,d); // 前輪・外側
  ellipse(x-35-100,y+h/2-100,d-10,d-10); // 後輪・内側
  ellipse(x+35-100,y+h/2-100,d-10,d-10); // 前輪・内側
  rectMode(CORNER);
  rect(x+45-100,y-20-100,h/4,h/3); // 窓・前
  rect(x-5-100,y-20-100,h/2,h/3); // 窓・中
  rect(x-50-100,y-20-100,h/2,h/3); // 窓・後

  // 右下のバス
  rectMode(CENTER);
  rect(x+100,y+100,h*2,h); // ボディ
  ellipse(x-35+100,y+h/2+100,d,d); // 後輪・外側
  ellipse(x+35+100,y+h/2+100,d,d); // 前輪・外側
  ellipse(x-35+100,y+h/2+100,d-10,d-10); // 後輪・内側
  ellipse(x+35+100,y+h/2+100,d-10,d-10); // 前輪・内側
  rectMode(CORNER);
  rect(x+45+100,y-20+100,h/4,h/3); // 窓・前
  rect(x-5+100,y-20+100,h/2,h/3); // 窓・中
  rect(x-50+100,y-20+100,h/2,h/3); // 窓・後
}

※draw関数の中に、同じようなプログラムが繰り返されている。これを効率よく書き換えることで、プログラムの入力を楽にすることができる。

3台のバスを描く（自分で定義した関数を使って）

int h=60; // ボディの高さ、幅の基準
int d=30; // 車輪の直径の基準

void setup() {
  size(400, 400);
  noLoop(); // 繰り返さない
}

void draw() {
  drawBus(200, 200); //中央のバス
  drawBus(100, 100); //左上のバス
  drawBus(300, 300); //右下のバス
}

void drawBus(int x, int y) {
  rectMode(CENTER);
  rect(x, y, h*2, h); // ボディ
  ellipse(x-35, y+h/2, d, d); // 後輪・外側
  ellipse(x+35, y+h/2, d, d); // 前輪・外側
  ellipse(x-35, y+h/2, d-10, d-10); // 後輪・内側
  ellipse(x+35, y+h/2, d-10, d-10); // 前輪・内側
  rectMode(CORNER);
  rect(x+45, y-20, h/4, h/3); // 窓・前
  rect(x-5, y-20, h/2, h/3); // 窓・中
  rect(x-50, y-20, h/2, h/3); // 窓・後
}

drawBus：バスの描画を定義した関数（わかりやすい任意の名前を付ける）

バスを走らせる

バスを走らせる - wonderfl build flash online

int x; // ボディの中心のx座標
int y; // ボディの中心のy座標
int h = 60; // ボディの高さ、幅の基準
int d = 30; // 車輪の直径の基準
int speed = 1; // 進む速さ

void setup() {
  size(400, 400);
  x = -h; // ボディの中心のx座標
  y = height / 2; // ボディの中心のy座標
  //noLoop(); // 繰り返さない
}

void draw() {
  background(255); // 画面をリセットする
  drawBus(x, y); // バスを描く
  x = x + speed; // 進む
  if(x > width + h){ 
    x = -h; // バスが右端まで行ったら左端に戻る
  }
}

void drawBus(int x, int y) {
  rectMode(CENTER);
  rect(x, y, h*2, h); // ボディ
  ellipse(x-35, y+h/2, d, d); // 後輪・外側
  ellipse(x+35, y+h/2, d, d); // 前輪・外側
  ellipse(x-35, y+h/2, d-10, d-10); // 後輪・内側
  ellipse(x+35, y+h/2, d-10, d-10); // 前輪・内側
  rectMode(CORNER);
  rect(x+45, y-20, h/4, h/3); // 窓・前
  rect(x-5, y-20, h/2, h/3); // 窓・中
  rect(x-50, y-20, h/2, h/3); // 窓・後
}

画面のリセット

draw関数の最初で背景を白で塗る（background(255);）ことで、画面をリセットしている

バスを走らせる（キーボードを押したときに）

int x; // ボディの中心のx座標
int y; // ボディの中心のy座標
int h = 60; // ボディの高さ、幅の基準
int d = 30; // 車輪の直径の基準
int speed = 1; // 進む速さ

void setup() {
  size(400, 400);
  x = -h; // ボディの中心のx座標
  y = height / 2; // ボディの中心のy座標
  //noLoop(); // 繰り返さない
}

void draw() {
  background(255); // 画面をリセットする
  drawBus(x, y); // バスを描く
  if (keyPressed == true) {
    x = x + speed; // 進む
  }
  if (x > width + h) { 
    x = -h; // バスが右端まで行ったら左端に戻る
  }
}

void drawBus(int x, int y) {
  rectMode(CENTER);
  rect(x, y, h*2, h); // ボディ
  ellipse(x-35, y+h/2, d, d); // 後輪・外側
  ellipse(x+35, y+h/2, d, d); // 前輪・外側
  ellipse(x-35, y+h/2, d-10, d-10); // 後輪・内側
  ellipse(x+35, y+h/2, d-10, d-10); // 前輪・内側
  rectMode(CORNER);
  rect(x+45, y-20, h/4, h/3); // 窓・前
  rect(x-5, y-20, h/2, h/3); // 窓・中
  rect(x-50, y-20, h/2, h/3); // 窓・後
}