人工言語入門 A 2010
色について
コンピュータの画面の復習
- コンピュータの画面を拡大していくと…
- 縦横に並んだ点の集合 → ピクセル (Pixel)
- 一つのピクセルは、赤、緑、青の三原色から成り立っている
液晶画面のピクセル
コンピュータで絵を描くということ
- コンピュータ画面は、縦横沢山のピクセルから構成された巨大なエクセルの表のようなもの
- 例：1024 x 768 の液晶画面
- 横に1024列縦に768行ならんだ巨大な表
- それぞれのセルにR,G,B,A(アルファ値)が格納されている
RGBAプレーン
色の指定
- 色を指定するには?
- R(赤) G(緑) B(青)の三原色で指定する
- 加法混色 (光の三原色であることに注意) ←→ 色料の三原色
光と色料の三原色
色の階調
- R : 0 〜 255 → 2進数だと：11111111 = 8bit
- G : 0 〜 255 → 2進数だと：11111111 = 8bit
- B : 0 〜 255 → 2進数だと：11111111 = 8bit
どのくらいの色を再現できるのか?
- 256(R) x 256(G) x 256(B) = 16,777,216 (24bit)
- これに加えて透明度を255階調加えたものが、32bitカラー。最近のPCのほとんどは、32bitカラーを表現可能。
- 24ビットカラー (24-bit color)、および32ビットカラー (32-bit color) は「トゥルーカラー」(Truecolor) と呼ばれる
色の指定(復習)
3つの色の属性
- 背景色 background関数
- bacground(＜Rの値＞, ＜Gの値＞, ＜Bの値＞);
- 線に色をつける stroke関数
- stroke(＜Rの値＞, ＜Gの値＞, ＜Bの値＞);
- 塗りの色をつける fill関数
- fill(＜Rの値＞, ＜Gの値＞, ＜Bの値＞);
- 線を描きたくないとき
- noStroke();
- 塗り潰しの色を付けたくないとき
- noFill();
- 例
[code language=”java”]
size(400,300);
background(255);
strokeWeight(12);
smooth();
noFill();
stroke(0,133,199);
ellipse(70,120,106,106);
stroke(244,195,0);
ellipse(135,173,106,106);
stroke(0);
ellipse(200,120,106,106);
stroke(0,159,61);
ellipse(265,173,106,106);
stroke(233,0,36);
ellipse(330,120,106,106);
[/code]
オリンピック!!
HSBによる色の指定
- RGB以外の色の指定方法
- HSB色空間、HSV色空間とも言う
- 色相 (Hue)：色の種類
- 彩度 (Saturation)：色の鮮かさ
- 明度 (Brightness, Value)：色の明かるさ
- プログラミングしながら色を指定する場合は、HSBの方が直感的に望みの色を指定し易いことも多い
- HSBモデルのあり方が人間が色を知覚する方法と類似している
- HSB色空間の視覚イメージ
- 円錐のイメージ
- 色相：外環の角度、彩度：中心点からの距離、明度：高さ
錐体のHSB色空間
HSB (HSV) 色空間への切替方法
- colorMode関数を使用する、それぞれのパラメータの範囲も同時に指定
- 例：色相：360階調(°), 彩度：100階調(％), 明度：100階調(％)
colorMode(HSB, 360, 100, 100);
演習：色彩のハーモニー
色を美しく配置する演習
- 正方形(600 x 600)のキャンバスを縦に3つ、横に3つ、合計9つの正方形に分割し、それぞれを別の色で塗り分けてみる
- 自分のなかでバランスが取れていると思える配色・配置に
- 配色ができたらタイトルを付けてみる
例1
[code language=”java”]
size(300,300);
colorMode(HSB,360,100,100);
noStroke();
//1行目
fill(210,89,64);
rect(0,0,100,100);
fill(2,77,80);
rect(100,0,100,100);
fill(232,13,47);
rect(200,0,100,100);
//2行目
fill(183,68,62);
rect(0,100,100,100);
fill(31,98,85);
rect(100,100,100,100);
fill(256,52,43);
rect(200,100,100,100);
//3行目
fill(169,68,29);
rect(0,200,100,100);
fill(193,98,55);
rect(100,200,100,100);
fill(250,8,28);
rect(200,200,100,100);
[/code]
マーブルチョコ?
例2
[code language=”java”]
size(300,300);
colorMode(HSB,360,100,100);
noStroke();
//1行目
fill(36,42,100);
rect(0,0,100,100);
fill(72,34,100);
rect(100,0,100,100);
fill(60,30,70);
rect(200,0,100,100);
//2行目
fill(170,30,80);
rect(0,100,100,100);
fill(160,30,70);
rect(100,100,100,100);
fill(350,20,100);
rect(200,100,100,100);
//3行目
fill(240,10,70);
rect(0,200,100,100);
fill(240,4,80);
rect(100,200,100,100);
fill(0,10,70);
rect(200,200,100,100);
[/code]
パステル
配色のヒント1
- HSBの要素を一つだけを連続的に変化させる
彩度の変化
[code language=”java”]
size(300,300);
colorMode(HSB,360,100,100);
noStroke();
//1行目
fill(20,100,100);
rect(0,0,100,100);
fill(20,70,100);
rect(100,0,100,100);
fill(20,40,100);
rect(200,0,100,100);
//2行目
fill(120,100,100);
rect(0,100,100,100);
fill(120,70,100);
rect(100,100,100,100);
fill(120,40,100);
rect(200,100,100,100);
//3行目
fill(200,100,100);
rect(0,200,100,100);
fill(200,70,100);
rect(100,200,100,100);
fill(200,40,100);
rect(200,200,100,100);
[/code]
彩度の連続的な変化
明度の変化
[code language=”java”]
size(300,300);
colorMode(HSB,360,100,100);
noStroke();
//1行目
fill(20,100,100);
rect(0,0,100,100);
fill(20,100,70);
rect(100,0,100,100);
fill(20,100,40);
rect(200,0,100,100);
//2行目
fill(120,100,100);
rect(0,100,100,100);
fill(120,100,70);
rect(100,100,100,100);
fill(120,100,40);
rect(200,100,100,100);
//3行目
fill(200,100,100);
rect(0,200,100,100);
fill(200,100,70);
rect(100,200,100,100);
fill(200,100,40);
rect(200,200,100,100);
[/code]
明度の連続的な変化
色相の変化
[code language=”java”]
size(300,300);
colorMode(HSB,360,100,100);
noStroke();
//1行目
fill(0,70,100);
rect(0,0,100,100);
fill(20,70,100);
rect(100,0,100,100);
fill(40,70,100);
rect(200,0,100,100);
//2行目
fill(60,70,100);
rect(0,100,100,100);
fill(80,70,100);
rect(100,100,100,100);
fill(100,70,100);
rect(200,100,100,100);
//3行目
fill(120,70,100);
rect(0,200,100,100);
fill(140,70,100);
rect(100,200,100,100);
fill(160,70,100);
rect(200,200,100,100);
[/code]
色相の連続的な変化
配色のヒント2
- 写真から色をピックアップする
- 有名な絵画からピックアップする
- 配色の綺麗なWebサイトから色をピックアップする
「モナリザ」レオナルド・ダビンチ
「睡蓮」モネ
次回授業までの課題
- 自分自身の観点から、美しいと思う配色を作成する
- 300x300pixelの画面を9分割した正方形に配色すること
- 作成の方法は自由 (イメージからピックアップ、HSBの数値を工夫するなど)
- 作成した配色は、エクスポートして、アプレットを以下にアップロードすること
- http://www.cuc.ac.jp/~学籍番号/proga/assignment1/
映像の視聴
DVD「colorcalm by Design」
- Art Barcodes – 映像×音楽：イルマ・ブーム×マイケル･ナイマン
- Food Coloring – 映像×音楽：ジョン前田×坂本龍一
- Colour Wheel – 映像×音楽：ピーター・サヴィル×ニュー・オーダー／テラノヴァ
- Blue to Red Elegia – 映像×音楽：ピーター・サヴィル×ニュー･オーダー
「Art Barcodes」より
参考：Art Barcodesを自動生成してくれるWebサイト