proga09 » Processing入門 II、色について

<< プログラミング言語とは何か? Processing入門1 | top | Processing入門 III：変数、繰り返し、アニメーション入門 >>

Processing入門 II、色について

授業スライド

Proga090427

View more presentations from Atsushi Tadokro.

スライドをダウンロード (PDF形式)

色について

コンピュータの画面の復習

コンピュータの画面を拡大していくと...
縦横に並んだ点の集合 → ピクセル (Pixel)
一つのピクセルは、赤、緑、青の三原色から成り立っている

fig07

コンピュータで絵を描くということ

コンピュータ画面は、縦横沢山のピクセルから構成された巨大なエクセルの表のようなもの

例：1024 x 768 の液晶画面
横に1024列縦に768行ならんだ巨大な表
それぞれのセルにR,G,B,A(アルファ値)が格納されている

fig08

色を指定するには?

R(赤) G(緑) B(青)の三原色で指定する
加法混色 (光の三原色であることに注意) ←→ 色料の三原色

fig01

色の階調

R : 0 〜 255 → 2進数だと：11111111 = 8bit
G : 0 〜 255 → 2進数だと：11111111 = 8bit
B : 0 〜 255 → 2進数だと：11111111 = 8bit
RGBの組み合わせで、何色の色を再現できるのか?

255 x 255 x 255 = 16,581,375 (24bit)

3つの色の属性

背景色 background関数

bacground(＜Rの値＞, ＜Gの値＞, ＜Bの値＞);

線に色をつける stroke関数

stroke(＜Rの値＞, ＜Gの値＞, ＜Bの値＞);

塗りの色をつける fill関数

fill(＜Rの値＞, ＜Gの値＞, ＜Bの値＞);

表示・非表示

線を描きたくないとき

noStroke();

塗り潰しの色を付けたくないとき

noFill();

コードサンプル

size(320,240); 
background(200); 
noStroke(); 
fill(0,34,154); 

rect(70,60,60,120); 
fill(255); 
rect(130,60,60,120); 
fill(247,15,0); 
rect(190,60,60,120); 
stroke(0); 
noFill(); 
rect(70,60,180,120);

fig02

RGB以外の方法での色の指定

HSB (HSV)による指定

色相 (Hue)：色の種類
彩度 (Saturation)：色の鮮かさ
明度 (Brightness)：色の明かるさ

プログラミングしながら色を指定する場合は、HSBの方が直感的に望みの色を指定し易いことも多い

HSB (HSV) 色空間の視覚イメージ

円錐のイメージ

色相：外環の角度、彩度：中心点からの距離、明度：高さ

fig03

HSB (HSV) 色空間への切替方法

colorMode関数を使用する、それぞれのパラメータの範囲も同時に指定
例：

色相：360階調(°)
彩度：100階調(％)
明度：100階調(％)

colorMode(HSB, 360, 100, 100);

演習1：色彩のハーモニー

色を美しく配置する

正方形(300 x 300)のキャンバスを縦に3つ、横に3つ、合計9つの正方形に分割し、それぞれを別の色で塗り分けてみる
自分のなかでバランスが取れていると思える配色・配置に
配色ができたらタイトルを付けてみる

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);

fig04