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

• スクリーン表示用
• 印刷用

サンプルファイル

授業内で取り上げたプログラムのソースコードは、下記からダウンロードしてください。

• サンプルコード(proga_sample_0622.zip)

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

• スクリーン表示用
• 印刷用

サンプルファイル

授業内で取り上げたプログラムのソースコードは、下記からダウンロードしてください。

• サンプルコード(proga_sample_0622.zip)

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

• スクリーン表示用
• 印刷用

サンプルファイル

授業内で取り上げたプログラムのソースコードは、下記からダウンロードしてください。

• サンプルコード(proga_sample_0622.zip)

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

• スクリーン表示用
• 印刷用

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

• スクリーン表示用
• 印刷用

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

• スクリーン表示用
• 印刷用

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

• スクリーン表示用
• 印刷用

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

• スクリーン表示用

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

• スクリーン表示用

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

• スクリーン表示用
• 印刷用

色について

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

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

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

• コンピュータ画面は、縦横沢山のピクセルから構成された巨大なエクセルの表のようなもの
• 例：1024 x 768 の液晶画面
• 横に1024列縦に768行ならんだ巨大な表
• それぞれのセルにR,G,B,A(アルファ値)が格納されている

色を指定するには?

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

色の階調

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

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

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

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

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

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

例：

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

配色のヒント

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

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

「睡蓮」モネ