2008後期
情報グラフィックス論Ⅱ
担当　鳥海有紀

授業資料	情報グラフィックス論Ⅱ
戻る	次へ（プログラムを書く３）

プログラムを書く２－応用－

ループ文の色々な使い方

ループは様々な表現に応用することができる。
例えば、同じ図形を異なる場所に表示したり、色を順に変更して描いたり・・
以下にはループを使った色々の使い方を例を使って説明する。

表示位置や色を順々に変える
 randomを使用する
 ２重ループ

表示位置や色を順々に変える


// ループのサンプル１：線を使った図形

  size(300, 300);
  background(255);

  for (int i = 0; i < 100; i = i+5)
  {
    line(10 + i, 10, 110, 10+i);
  }

上のサンプルでは線の表示位置を変更している。サンプル２のようにすると色も同時に変更することができる。


// ループのサンプル２：色が変わる線を使った図形

  size(300, 300);
  background(255);

  for (int i = 0; i < 100; i = i+5)
  {
    stroke(255-i, 255, 0);
    line(10 + i, 10, 110, 10+i);
  }

サンプル１を組み合わせると線が中央に集まるような図形ができる。線を使った幾何学模様は繰り返しを使って様々な形を作ることができるので、各自で試してみるとよい。


// ループのサンプル３：線が中央で接する図形

  size(300, 300);
  background(255);

  for (int i = 0; i < 100; i = i+5)
  {
    stroke(255-i, 255, 0);
    line(10 + i, 10, 110, 10+i);
    line(110, 10 + i, 210-i, 10);
    line(10 + i, 200, 110, 200-i);
    line(110, 200 - i, 210-i, 200);
  }

stroke()関数やfill()関数で透明度も設定できる。透明度は第４引数で指定する。サンプル４は位置を変更しながら透明度を変える例である。以下のサンプルではforループの部分のみを示した。


// ループのサンプル４：透明度が変わる図形

  for (int i = 0; i < 100; i = i+20)
  {
    fill(255, 0, 0, 255 - i);
    rect(10 + i, 10 + i, 10+i, 10+i);
  }

サンプル５では４つの方向から同じように透明度を変えた場合のサンプルである。


// ループのサンプル５：透明度が変わる図形２

  for (int i = 0; i < 100; i = i+20)
  {
    fill(255, 0, 0, 255 - i);
    rect(10 + i, 10 + i, 10+i, 10+i);
  
    fill(0, 255, 0, 255 - i);
    rect(280 - i*2, 10 + i, 10+i, 10+i);
  
    fill(255, 255, 0, 255 - i);
    rect(10 + i, 280 - i*2, 10+i, 10+i);

    fill(0, 0, 255, 255 - i);
    rect(280 - i*2, 280 - i*2, 10+i, 10+i);
  }

randomを使用する

randomは乱数を発生させるための関数である。 for文とrandomを使用すると意図しない面白い画像を表示することができる。


// サンプル６：randomを使用する

  size(300, 300);
  background(255);

  for (int i = 0; i < 100; i++)
  {  
    fill(255, 0, 0, int(random(255)));
    rect(int(random(280)),int(random(280)) , 20, 20);
  }

２重ループ

画面全体にパターンのように同じ図形を描く場合は２重ループを使用すると便利である。内側のループはｘ方向の繰り返しのループ、外側のループはy方向の繰り返しループになる。
サンプル７では図形の基準位置をrandomを使用して揺らぎのような表現をしている。


// サンプル７：２重ループでパターン化した画面

  size(220, 220);
  background(255);

  for (int j = 0; j < 10; j++)
  {
    for (int i = 0; i < 10; i++)
    {
        fill(0, 255, 0);
        rect(10+i*20+random(-3, 3), 10+j*20+random(-3, 3), 10, 10);
    }
  }

ランダムの範囲を変数にすると変更がしやすくなり、randomに使用する数値の最適値が決定しやすい。色の値も同じようにrandomを使用すると微妙に変化する画面を構成することができる。

トップへ

授業資料

情報グラフィックス論Ⅱ