情報科学生のクリエイティブコーディング入門 part.2

今回はHSBカラーモデルを用いたプログラムの例を挙げていきたいと思います.

そもそも, HSBカラーとは何なのかは以下のページをみて頂くのが良いかと思います.

www.webcolordesign.net

このブログのヘッダー画像もHSBカラーモデルによって描かれています.

f:id:Eddie_Le_Garden:20190806000543p:plain

そしてソースコードは以下の通りです.

int pixel = 5; //背景の粗さ
int num = 80; //円の数
Circle[] list = new Circle[num];

void setup() {
  size(720, 300);
  noStroke();
  colorMode(HSB, 360, 100, 100, 100); //カラーモードをHSBに変更

  for (int i=0; i<list.length; i++) 
    list[i] = new Circle();

  /*背景*/
  for (int i=0; i<width; i+=pixel) {
    for (int j=0; j<height; j+=pixel) {
      fill(map(i, 0, width, 0, 360), 99, map(j, 0, height, 0, 40)); //座標の位置から色を決定する
      rect(i, j, pixel, pixel);
    }
  }

  blendMode(ADD);
  for (Circle c : list) c.draw();
}

class Circle {
  float x, y; //平面座標
  int size; //円の大きさ(直径)

  Circle() {
    x = random(width); //0～720(画面の横幅)内でランダムに決定する
    y = random(height); //0～300(画面の縦幅)内でランダムに決定する
    size = (int)random(20, 50);
  }
  
  //円の描画処理
  void draw() {
    fill(map(x, 0, width, 0, 360), 99, 99, 40); //x座標の位置から自身の色を決定する
    ellipse(x, y, size, size);
  }
}

colorMode

ProcessingではデフォルトでカラーモードをRGBに設定しています.

ProcessingでHSBカラーモデルを使用するにはcolorMode関数を用います.
第1引数に HSB, 第2引数に色相(H)の範囲, 第3引数に彩度(S)の範囲, 第4引数に明度(B)の範囲, 第5引数にアルファ値 (透明度)の範囲を指定します.

今回は

colorMode(HSB, 360, 100, 100, 100);

とあるので, 0～360度にかけて色が一周するようにHSBを設定しています.

HSBを適用すると以降, fill()やstroke(), background()で色を指定する際は (H, S, B) もしくは (H, S ,B ,A) と引数を与えます.
サンプルとして以下のプログラムを実行してみると色が時間(フレーム) 経過と共に変化していくのが確認できると思います.

void setup() {
  size(300, 300);
  colorMode(HSB, 360, 100, 100, 100); //カラーモードをRGBからHSBに変更

  background(209, 99, 7); //RGB( 0, 10, 20)
  noStroke();
}

void draw() {
  fill(frameCount%360, 99, 99); //色彩(H)が0～360の範囲で繰り返す
  ellipse(width/2, height/2, 100, 100);
}

実行結果
f:id:Eddie_Le_Garden:20190806005042g:plain

また, 彩度(S)を色を下げることで白っぽく, 明度(B)を下げることで黒っぽく色が変化するのもHSBの特徴です.

map

map関数とは map(a, b, c, d, e)のとき, 値aを b~cの範囲から d~eの範囲に変えることができる関数です.
(『Processing クイックリファレンス算術関数』引用）

今回は

/*背景*/
  for (int i=0; i<width; i+=pixel) {
    for (int j=0; j<height; j+=pixel) {
      fill(map(i, 0, width, 0, 360), 99, map(j, 0, height, 0, 40)); //座標の位置から色を決定する
      rect(i, j, pixel, pixel);
    }
  }

とあるように, 画面いっぱいに大きさ pixel の四角を並べた上で, それぞれ x方向に進むほど0~360の範囲で色相を決定し, y方向に進むほど0~40の範囲で明度を決定しています.

f:id:Eddie_Le_Garden:20190807231253p:plain

また, Circleクラスでも同様に描画する円の色相をそれぞれのx座標から決定しています. (明度は99で固定)

blendMode

ProcessingではblendModeにより, 色が重なったときの表示について指定しています.
デフォルトではBLENDと設定されており, 色が重なったとき後に描画される色で上書きされるようになっています. (アルファ値が設定されていない場合)

今回は

blendMode(ADD);

と設定しており, 色が重なった部分が白っぽくなります.

詳しくは以下のページを見てもらうのが分かりやすい思います.
aa-deb.hatenablog.com

まとめ

HSBカラーモデルを扱うことでカラフルな色の表現がしやすくなる
map関数によりある範囲における値を任意の範囲内で置き換えることができる
blendModeはいいぞ

大したプログラムではない割に文章で説明しようとすると分かりづらくなってしまいました... 汗
分かりづらいところがあったら気軽にコメントください (;'∀')

like coffeeの進捗ダメです

Unity, Processingとか

情報科学生のクリエイティブコーディング入門 part.2

colorMode

map

blendMode

まとめ