Last updated: 2015 -2014. Kajiyama                    [ 目次に戻る ]

色の指定方法



  1. いつもは,色見本のwebページを利用する.好きなサイトにブックマークをつけておく.


  2. 色コードの指定方法にはRGBによる色表現と,16進法の色表現がある.fill ( R, G, B ) あるいは fill ( #16進数 )

    ・ 赤色は,Red=255,Green=0,Blue=0 である.これを16進法で表すと, #FF0000 の記号になる.

    ・ どちらの方法でも同じ色を表現できる.

    ・fill ( R, G, B ) = fill (255, 0, 0) と fill ( #16進数 ) = fill (#FF0000)は,色表現は異なるが同じ内容である.


  3. Color Selectorによる色の指定方法.

    ・ メニューから 「Tools」 -> 「Color Selector」 を選択すると, Processing が用意しているカラーチャートが表示される.

    ・ 色見本の上でマウスを動かし使いたい色を指示しクリックするとその位置が□で囲まれる.

    ・ □で囲まれた色データが右の欄の数字で示される

    (1) 三原色のRGB表現は,R 245,G 17,B 74の3つの数値が色データを示す.fill ( 245, 17, 74 )と使用する.

    (2) 16進法の色表現fは,#と6桁の文字列,#F5114Aの数値が色データを示す.fill ( #F5114A )と使用する.

      ・「Copy」をクリックする16進法の「#F5114A」の数値がコピーされるので,ソースコードに張り付ける.

    (3) 16進数のF5 = 10進数の245である.


    
    
    
    
    Processing が用意している色見本
    

  4. モノクロの指定方法にはグレースケールによる表現がある.

    ・ 無色の白-灰色-黒のグレースケールの指定方法は,0 から255の数字を使い256諧調のモノクロが表現できる.

    ・ 256諧調のモノクロで,0 の数値が黒 fill (0)で,255の数値が白 fill (255)である.

    ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //四角形にグレースケールの色を付ける
    
    void setup() {
      //キャンバス(実行画面)の設定
      size(200, 780); //ピクセル単位で大きさを指定する
      background(255);//キャンバスの背景色を白
      noStroke();//線を描かない
    }
    
    //四角形1
    int x1 =  5;//整数型 始点のx座標
    int y1 =  5;//整数型 始点のy座標
    int x2 =190;//四角形の幅
    int y2 =  3;//四角形の高さ
    
    int i ;//カウンター
    
    void draw() {
      
      for(i = 0; i <= 255; i=i+1) {
      fill(i);//グレースケール
         rect(x1, y1+y2*i, x2, y2);//四角形を描く
      }
    
    //save("color_01c.jpg");// 実行結果を画像形式で保存
    
    }
    
    
    実行結果  「グレースケール」

  5. 透過度の設定.fill ( R, G, B, 透過度 ) あるいは fill ( #16進数, 透過度 )

    ・ 色の透明度を,0 から255の数字で256諧調で追加指定できる.

    ・ 0 の数値が透明 fill ( 245, 17, 74, 0 )で,255 の数値が不透明白 fill ( 245, 17, 74, 255 )である.

  6. 図形に色を付ける

    ・次のソースファイルをコピーして,Processing開発環境のエディタ領域に貼り付ける.

    ・このソースファイルをデータフォルダー「Sketchbook」の中にファイル名を付けて保存する.

    ソースファイル
    //ファイル名:sketch_xxxxxxxxxx.pde 
    //四角形に色を付ける
    
    void setup() {
      //キャンバス(実行画面)の設定
      size(500, 500); //ピクセル単位で大きさを指定する
      background(255);//キャンバスの背景色を白
    }
    
    //四角形1
    int x11 = 100; //整数型 始点のx座標
    int y11 = 100; //整数型 始点のy座標
    int x12 = 200;//四角形の幅
    int y12 = 200;//四角形の高さ
      //四角形2
      int x21 = 200;//整数型 始点のx座標
      int y21 = 200;//整数型 始点のy座標
      int x22 = 200;//四角形の幅
      int y22 = 200;//四角形の高さ
      
    void draw() {
    
    strokeWeight(30);//線の太さ ピクセル単位
       fill( 255, 0, 0, 150);//図形の面の色は赤
       stroke ( 0, 0, 255);//図形の線の色は青
         rect(x11, y11, x12, y12);//四角形1を描く
       
       fill( 0, 0, 255, 100);//図形の面の色は青
       stroke ( 0, 255, 0 );//図形の線の色は緑
         rect(x21, y21, x22, y22);//四角形2を描く
       
    //save("color_02a.jpg");// 実行結果を画像形式で保存
    //noLoop();//繰返し処理を止める
    
    }
    
    
    実行結果

    四角形の面と線に色を付ける

[ 目次に戻る ]