P.1 色

P.1ではプログラムで色を操るための基本が解説されている. 以下,補足情報.

紙媒体と電子媒体

紙 → 光が反射したり九州したりすることで色を近く 画面 → リアルタイム制御された波長の光が目に直接届く

紙媒体と電子媒体では色の見え方が微妙に異なることは意識した方が良い.

HSBカラー空間とは

RGB空間よりも人間によって直感的なカラー空間モデルであるとされる.色の変化,対比を表現に取り入れる場合はこちらの方が扱いやすいことが多い. Alt text

参考)色モデルについて http://w3.kcua.ac.jp/~fujiwara/infosci/colormodel.html

グラデーションとは

どのカラーモデルでも個々の色は明確に定義された位置を持つ.ある色から別の色へのまっすぐな経路は必ず同じグラデーションとなる.ただし,カラーモデルによって大きく変化する.

RGB → 一般的な色の変化 HSB → 色相環に沿って色が変化

事例1:LIFE COLOR CLOCK by tha ltd.

中村勇吾氏と資生堂宣伝部による2013年10月頃に公開されていた特設ウェブサイト. http://tha.jp/4337 https://www.youtube.com/watch?v=3HfLG4_ceyw

「LIFE COLOR CLOCK」は、FacebookやInstagramの写真から色を抽出し、あなただけの色時計をつくるデジタルコンテンツです。日々を彩る様々な色たちが、一秒一秒よりあわされ、美しい時を紡ぎ出します。

Credits: Art Direction / Design: 中村 勇吾 (tha ltd.) Art Direction: 花原 正基 (資生堂宣伝制作部) Copywriting: 横山 裕子 (資生堂宣伝制作部) Design / Programming: 山 健太郎 (tha ltd.) Engineering: 外村 慶二 (tha ltd.)

事例2:Rhizomatiks グラフィックデザインの死角

配色 〜色彩の鼓動〜

グラフィックデザインは、配色によって複雑な意味を作り上げていく。 色における「絶対音感」を持つと言われる田中一光氏をはじめ、 日本を代表する4名のデザイナーの配色の解析を行い、グラフィックデザインにおいて、 これまではっきりと言語化されていなかった配色パターンを導き出し、【配色】を視覚化する。

解析

デザイナーごとの配色を解析することで、 代表的な色使いと色の組み合わせを抽出

デザイナーごとの代表的な色使い

グラフィックデータからピクセルごとにRGB値を取得し、数理統計的な処理を行うことでデザイナーごとによく使用する代表的な色使いを抽出した。具体的には、取得したRGB値を均等色空間に変換後、クラスタリングしている。クラスタリングとはある集合の中で類似したもの同士をグループ分けする方法で、ピクセルデータをクラスタリングすると類似した色のピクセル同士がグループを形成する。こうしてできたいくつかのグループがデザイナーの代表的な色に相当する。また、均等色空間では人が感じる色の違いと色空間上で計算される距離とが類似しているという性質があり、人間の感覚に近い色のグループ化が実現できる。

作家ごとの代表的な色の組み合わせ10 色をその利用頻度に合わせて画面を分割し配色したポスター。 色の比率などから作家別の特徴が浮かび上がる。

http://rettuce.com/gggddd/ https://design.rhizomatiks.com/s/works/ggg/

Alt text | left | 300x0 Alt text | 300x0 Alt text | left | 300x0 Alt text | 300x0

事例3:Spot Paintings by Damien Hirst

イギリス(ブリストル)の現代アーティスト,ダミアン・ハースト氏による代表作のひとつ.グリッド上に淡々とカラフルな円が並ぶ.同シリーズの作品は世界に1500程度あるとされ,同じ色の円は唯一無二であると言われている.具体的な製作工程は不明であるが,あたかも機械的に作られたようなアウトプットを心がけていると作者は語る.

作者から明確な解釈は与えられていないが,何らかのアルゴリズムによってランダムネスを実現している可能性がある.

https://www.quora.com/Art-Criticism-How-can-the-spot-paintings-of-Damien-Hirst-be-interpreted

Alt text

Spot Paintings風なスケッチを書いてみる

// spot_paintings_pakuri.pde

int r = 40;
int n = int(600/r*0.5);
int[] hue = new int[(n+1)*(n+1)];
int[] sat = new int[(n+1)*(n+1)];
int[] brt = new int[(n+1)*(n+1)]; 

void setup() {
  size(600, 600);
  colorMode(HSB, 360, 100, 100);
  noStroke();
  for (int i = 0; i <(n+1)*(n+1); i++) {
    hue[i] = int(random(0, 360)); 
    sat[i] = int(random(0, 65)); 
    brt[i] = int(random(50, 100));   }
}

void draw() {
  background(360, 0, 100);
  for (int i = 0; i <= n; i++) {
     for (int j = 0; j <= n; j++) {
       fill(hue[(n+1)*i+j], sat[(n+1)*i+j], brt[(n+1)*i+j]);
       ellipse(50 + i*2.2*r, 50 + j*2.2*r, r, r);
     }
  }
}

P.1 色のまとめ

  • 色を定義する色空間モデルにはRGBモデル,HSBモデルなどがある.
  • HSBを使うと色をイメージしやすい場合が多い.
  • 色空間モデルによってグラデーションの出方が変わる.

results matching ""

    No results matching ""