演習問題: 問題1

「練習2: 身長の異なる人の列」のプログラムをもとに、 人の色の色相(hue)の値も関数 drawHuman()の引数として渡すようにしなさい。 渡す色相の値は、人 7名で色相が1回転するように調整すること(下図参照)。

提出ファイル名: humanSequenceSpecifiedHue.pde

演習問題: 問題2

問題1 (humanSequenceSpecifiedHue.pde)をもとに、 身長の配列と色相の配列を渡すと人の列を描く関数 drawHumanSequence() を作成し利用しなさい。 引数は、左端の人のx,y座標、人のx方向の間隔、人の胴体の長さの配列(への参照)、人の色の色相の配列(への参照)とする。

人の形 1人分を描く関数 drawHuman() はそのまま利用すること。

提出ファイル名: humanSequenceSpecifiedArrays.pde

演習問題: 問題2 - 穴埋め

final int humanX0 = 50;                  // 人のx座標の初期値
final int dhumanX = 50;                  // 人の間隔
final int humanY0 = 300;                 // 人の列のy座標
final int humanBodyWidth = 20;           // 体の幅
final int faceDiameter = 30;             // 顔の直径

int[] humanBodyHeightArray = new int[] {120, 110, 150, 160, 140, 150, 120};  // 人の胴体の長さ
float[] humanHueArray = new float[] {0, 180, 90, 45, 225, 135, 315};         // 人の色の色相

void setup() {
  size(400, 400);                  // ウィンドウのサイズ
  background(255, 255, 255);       // 背景色(白)
  noStroke();                      // 輪郭線を無効に
  colorMode(HSB, 360, 100, 100);   // カラーモードをHSBに
  
  // ここで関数 drawHumanSequence() を呼び出す
  ...
}

/**
 *  人の列を描く
 *  @param x 人のx座標(体の中央軸)の初期値
 *  @param y 人のy座標(足元)の初期値
 *  @param dx 人のx方向の間隔
 *  @param bodyHeightArray 人の胴体の長さの配列
 *  @param hueArray 人の色の色相の配列
 */
void drawHumanSequence(...) {
  ...
}

/**
 *  人の形を描く
 *  @param x 人のx座標(体の中央軸)
 *  @param y 人のy座標(足元)
 *  @param bodyHeight 人の胴体の長さ
 *  @param hue 人の色の色相
 */
void drawHuman(...) {
  ...
}

演習問題: 問題3

前回の問題3(fishTurning.pde)を改良し、魚の姿を描画する関数 drawFish() を作成し利用しなさい。 引数は、魚の中央の座標と、魚の形状の情報を格納している配列(への参照)とする。

提出ファイル名: fishTurning2.pde

演習問題: 問題3 - ヒント

前回の問題3の解答例

// 定数
final int[] fishToLeft  = new int[] {    // 魚の形状 (左向き)
  0, 0, 70, 30, // 胴体の相対位置(x,y)・横幅・縦幅
  38, 0, 15, 25                          // 尾びれの相対位置(x,y)・横幅・縦幅
};
final int[] fishToRight = new int[] {    // 魚の形状 (右向き)
  0, 0, 70, 30, 
  -38, 0, 15, 25
};
final int bodyX = 0;
final int bodyY = 1;
final int bodyLength = 2;
final int bodyWidth =3;
final int finX = 4;
final int finY = 5;
final int finLength = 6;
final int finWidth = 7;
// 変数
int x;                             // 魚の中心の x座標
int y;                             // 魚の中心の y座標
int vx;                            // 魚の進む速さ
int[] fish;                        // 現在の魚の形状

演習問題: 問題3 - ヒント

前回の問題3の解答例 (つづき)

void setup() {
  size(400, 400);             // ウィンドウのサイズ
  noStroke();                 // 輪郭線を無効に
  background(63, 63, 255);    // 背景色
  fill(63, 31, 31);           // 塗る色

  // 変数の初期値
  x = 100;
  y = 200;
  vx = 1;
  fish = fishToRight;         // 変数 fish は 変数 fishToRight と同じ配列を参照
}

void draw() {
  background(63, 63, 255);    // 背景色
  // 魚の姿の描画
  fill(63, 31, 31);           // 塗る色
  ellipse(x + fish[bodyX], y + fish[bodyY], fish[bodyLength], fish[bodyWidth]);   // 胴体
  ellipse(x + fish[ finX], y + fish[ finY], fish[ finLength], fish[ finWidth]);   // 尾びれ
  if (mouseX > x) {
    fish = fishToRight;
    vx = 1;
  } else if (mouseX < x) {
    fish = fishToLeft;
    vx = -1;
  } else { // mouseX == x
    // 止まるだけで向きは変えない(まだ同じ方向に動き出すかターンするか未定)
    vx = 0;
  }
  x = x + vx;
}

演習問題: 問題4

人が次々に現れるアニメーションを作成しなさい。人の位置と胴体の長さと色相はランダムとする。

人の x, y 座標と胴体の長さと色相を引数にとる関数 drawHuman() を作成し利用すること。 引数の型はすべて float とする。

提出ファイル名: crowdGrowing.pde

参考: 上の例では frameRate(6) として、1秒間に6人描いている。

演習問題: 問題5 (Advanced)

「練習3: 正方形で描く円」をもとに、図形が回転するアニメーションを作成しなさい。 図形は正方形であってもなくてもよく、色の変化も自由でよい。

提出ファイル名: movingShape.pde