■

Rubyチュートリアルはクロシージャが意味分かんないから，ちょっとお勉強中．
その間に，ProcessingのCode Readingを続けてみる．

今回で，Example -> Colorはおしまい．今回は，RelativityとSaturationのCodeを読みます．先ずは「Relativity」からです．コードを読む前に，左の図を見てください．この図，上の方が繰り返しが少ない感じがしませんか？

でもね，実際は垂直バーの数は同じなんです．こういうのを目の錯覚（錯視）といいます．次のリンク先に面白い物がたくさんあるので見てください．

＃結構重いので注意！！
錯視から探る脳機能 （生存科学研究所 「脳科学と芸術 第１回シンポジウム」）

こっちは，お手軽版
サービス提供終了のお知らせ

さて，それじゃぁ本当にバーの数が同じなのかどうか，Code Readingをして試してみましょう．

color a, b, c, d, e;

最初に５つの色変数を定義します

void setup() {
  size(200, 200);
  noStroke();
  a = color(165, 167, 20);
  b = color(77, 86, 59);
  c = color(42, 106, 105);
  d = color(165, 89, 20);
  e = color(146, 150, 127);
  // 繰り返し描画する必要がない場合は，noLoop()をsetup内で呼んでおく．
  // 動きがありdrawメソッドを繰り返し呼んで欲しい場合は場合は，Loop()メソッドを呼ぶ
  noLoop();
}

次にsetupメソッドで，ウィンドウのサイズを指定し，noStrokeで枠なしで今後扱うと決定，次にa,b,c,d,eの５色を具体的に設定し，noLoop()でdrawメソッドを何度も呼ばないと指定します．このnoLoopについては，旧バージョンから大きく変わっているみたいなので，近々ちゃんとまとめようと思います．

感覚としては，描画を繰り返して欲しいプログラム（以前紹介した「Brightness」の様にカーソルの位置で明度が変化したりするもの）の場合，Loop()メソッドを呼んでdraw関数を繰り返し描画すると指定します．因に，その描画のフレームレートも指定する事が出来ますが，取り敢えず今日はここまで．最後に，draw()とdrawBand()メソッドをまとめて読みます．

void draw() {
  // 色の並べ方が違う．
  drawBand(a, b, c, d, e, 0, 4);
  drawBand(c, a, d, b, e, height/2, 4);
}

/*
 *引数は，５つの色と描画を始めるy座標の位置，バーの太さの７つです．
 */
void drawBand(color v, color w, color x, color y, color z, int ypos, int barWidth) {
  //色の種類の数
  int num = 5;
  //配列に格納
  color[] colorOrder = { v, w, x, y, z };

  for(int i=0; i < width; i += barWidth * num) {
    for(int j=0; j < num; j++) {
      fill(colorOrder[j]);
      rect(i+j*barWidth, ypos, barWidth, height/2);
    }
  }
}

ね，使っている色も垂直バーの数も一緒でしょ？なのに，こんなに違う見え方がするってのは不思議だよね．

次にSaturation（彩度）について
彩度とは色の鮮やかさを，もっと言うと色の強さや純度を表現する指標です．彩度が低いと色は明度だけになるので灰色の成分が多くなります．以下のプログラムは，BrightnessとかHueとほぼ一緒だから，解説は省略．

int barWidth = 5;
int[] saturation = new int[200/barWidth];

void setup() 
{
  size(200, 200);
  colorMode(HSB, 360, height, height);  
}

void draw() 
{
  int j = 0;
  for (int i=0; i<=(width-barWidth); i+=barWidth) {  
    //縁なし設定
    noStroke();
    //ウィンドウ上でカーソルがどのバーの上にあるか？
    if ((mouseX > i) && (mouseX < i+barWidth)) {
      //カーソルの垂直座標を彩度にする，
      saturation[j] = mouseY;
    }
    fill(i, saturation[j], height/1.5);
    rect(i, 0, barWidth, height);  
    j++;
  }
}