Example -> Color ->Creating & Hue & Reading

Processing

takashi42332007-05-11

をCode Readingしてみた．


最近Rubyに首ったけだけど，案外Processingをキーワードにこのページにきている人も少なからずいる様なので，続けて見る．
＃そもそも，Processingはプログラミングが面白いし素敵である．

最初はCreateからCode Readingしてみる．ここで言いたい事は，fillとかの引数でカラーを使いたいときに，

fill(204,102,0);
fill(#CC6600);

なんてわざわざ書いたら，同じ色をもう一回使いたくなったら不便でしょ？
だから，色情報を記録しておく構造体の様なものがありますよって事．

それが，

Color red = color(256,0,0);
Color green = #00FF00;

というColorという型の変数です．

/**
 * Creating (Homage to Albers). 
 * 
 * Creating variables for colors that may be referred to 
 * in the program by their name, rather than a number. 
 * 
 *色情報の為の変数を作れば，数字以外でプログラム内でそれらの変数名で
 *参照する事が出来る．
 * Created 09 December 2002
 */
 
 //ウィンドウのサイズ
size(200, 200);
//枠なし宣言
noStroke();
//色情報を持ったの変数を作る事が出来る．
color inside = color(204, 102, 0);
color middle = color(204, 153, 0);
color outside = color(153, 51, 0);

// These statements are equivalent to the statements above.
// Programmers may use the format they prefer.
//これらの状態は，上記の状態度同等である．
//プログラマーはより好ましい方のフォマットを使えば良い．
//color inside = #CC6600;
//color middle = #CC9900;
//color outside = #993300;


//本来fillnの引数は，fill(204,102,0)等とするが
//色の変数を使う事により同等の処理ができる．
fill(outside);
rect(0, 0, 200, 200);

fill(middle);
rect(40, 60, 120, 120);

fill(inside);
rect(60, 90, 80, 80);

それにしても，自分の英語力の無さに甚だがっかりだ．．．．



つづいて，Hueを解説．
Hueとは色相の事である．
詳細は以下のwikipediaに任せるとして早速Readingしていく．
マンセル・カラー・システム - Wikipedia

/**
 * Hue. 
 * 色相
 * Hue is the color reflected from or transmitted through an object 
 * and is typically referred to as the name of the color (red, blue, yellow, etc.) 
 * Move the cursor vertically over each bar to alter its hue. 
 * 色相は物体で反射されたか，物体を通過してきた色であり，一般的に色の名前と言われる．
 *カーソルを水平方向に動かすと，それぞれのバーの色相が変わります．
 * Updated 26 October 2002
 */
 
 
int barWidth = 5;
int[] hue = new int[200/barWidth];

void setup() 
{
  size(200, 200);
  //colorMode(HSB or RGB, Hue or Red, Saturation or Green,brightness or Blue);
  //colorModeの引数について↑
  colorMode(HSB, 360, height, height);  
  noStroke();
}

void draw() 
{
  int j = 0;
  for (int i=0; i<=(width-barWidth); i+=barWidth) {  
    if ((mouseX > i) && (mouseX < i+barWidth)) {
      //色相はマウスの垂直方向の座標
      hue[j] = mouseY;
    }
     //色相はマウスの垂直方向の位置で変化，彩度と明度は一定
    fill(hue[j], height/1.2, height/1.2);
　  //長方形を書く．
    rect(i, 0, barWidth, height);  
    j++;
  }
}

最初に解説を書いた， Brightnessに非常に似ている．

最後に，Readingについてである．ここでは，画像ファイルの読み込み(Reading)に焦点が当てられている．

PImage img
img = loadImage("hoge.jpg")//hoge.jpgはファイル名

旧バージョンではBimageってオブジェクトだったみたいだけど，最新バージョンではPImageに変更されている（あら，OpenCVみたい．．．）で読み込み可能なファイル形式はgif ,jpg ,tga ,pngらしぃ．フィールドとしては，widhtとheightさらにpixelsがあるんだって．

詳しくは．PImage \ Language (API) \ Processing 3+を参照してくださいな（英語サイト）

あと，redとかblueとかgreenっていう直球なメソッドがあるんだけど，これは色データの各色の値のみを抽出するメソッドである．こんな雰囲気で使うのかな？

size (180,180);
noStroke();

//色自体は白色と設定
color col = color(256,256,256);

//赤の成分のみを引き出す
fill (red(col),0,0);
rect(0,0,60,90);

//緑の成分のみを引き出す
fill(0,green(col),0);
rect(60,0,120,90);

//青の成分のみを引き出す
fill(0,0,blue(col));
rect(120,0,180,90);

//全成分を引き出す
fill(red(col),green(col),blue(col));
rect(0,90,180,180);

save ("rgb.jpg");


図：出力画像


では，前知識はここまでとして，Code Readingを始める．

/**
 * Reading. 
 * 
 * An image is recreated from its individual component colors.
 * 画像は，その特定の成分の色から作り直される．
 * The many colors of the image are created through modulating the 
 * その画像の多くの色はRGB変数の変調信号を通して作られる．
 * red, green, and blue values. This is an exageration of an LCD display. 
 * 
 * Created 27 October 2002
 */
 
size(200, 200);
noStroke();
background(0);

// Load an image from the data directory
PImage c;
c = loadImage("cait.jpg");

//ターゲットの位置を決定する
int xoff = 0;
int yoff = 0;

//一気に処理する（マスクをかける）エリアの大きさ
int p = 2;
int pix = p*3;

/*
 * 2x3Pixelづつ処理を施している．
 * 1Pixel目は赤の成分を２Pixel目は緑の成分を3Pixel目は青の成分を抜き出している． 
 */
for(int i=0; i<c.width*c.height; i+=1) 
{  
  int here = c.pixels[i];
  
  //redやgreen，blueといったメソッドは各画素の色要素から赤，緑，青を
  //抽出するメソッドである．
  fill(red(here), 0, 0);
  //rect(長方形の左上のx座標，左上のy座標，幅，高さ);
  rect(xoff, yoff, p, pix);
  
  fill(0, green(here), 0);
  rect(xoff+p, yoff, p, pix);
  
  fill(0, 0, blue(here));
  rect(xoff+p*2, yoff, p, pix);
  
  xoff+=pix;

  //ウィンドウの端まで行った場合は処理を施す位置を
  //次の段の右端に持っていく
  if(xoff >= width-pix) {
    xoff = 0;
    yoff += pix;
  }
}


それにしても，自分の英語力の無さに甚だがっかりだ．．．．