yoppa.org


人工言語入門 A 2009

Processing入門 II、色について

授業スライド

スライドをダウンロード (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関数
  • 線に色をつける stroke関数
  • 塗りの色をつける fill関数

表示・非表示

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

コードサンプル

fig02

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

  • HSB (HSV)による指定
    • 色相 (Hue):色の種類
    • 彩度 (Saturation):色の鮮かさ
    • 明度 (Brightness):色の明かるさ
  • プログラミングしながら色を指定する場合は、HSBの方が直感的に望みの色を指定し易いことも多い

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

  • 円錐のイメージ
    • 色相:外環の角度、彩度:中心点からの距離、明度:高さ

fig03

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

  • colorMode関数を使用する、それぞれのパラメータの範囲も同時に指定
  • 例:
    • 色相:360階調(°)
    • 彩度:100階調(%)
    • 明度:100階調(%)

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

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

fig04

例:

fig05

  • 「マーブルチョコ」「パステル」

配色のヒント

  • 写真から色をピックアップする
  • 有名な絵画からピックアップする
  • 配色の綺麗なWebサイトから色をピックアップする

「モナリザ」レオナルド・ダビンチ

fig06

「睡蓮」モネ

fig07