プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
Processing、RGB形式で色を指定するときの色見本
例えば

fill(0,0,255)

のように、RGB形式で色を指定することがあるでしょう。

単独で指定するときはProcessingのメニューから
「ツール」→「色を選択...」としてColor Selectorを使えば
「あぁ、この色はこの数字か」と分かります。

ただし、プログラムで色をグラデーションさせたりするときは
ある程度「ここの数字を増やすと、この色に近づいていく」や
「ここの数字を減らすと、この色に近づいていく」を知っていた方が便利です。

ということで、このプログラムを動かしてみてくださいφ(--)
※プログラムの中身は気にする必要ありません。

void setup(){
    background(255);
    size(800,400);
}

int tyokkei = 20;

void draw(){
    background(255);
    
    int x = 10;    //横位置の基準
    int y = 30;    //縦位置の基準
    
    //色
    int iro[][][] = {
           {{0,0,0},{0,0,255},{0,255,0},{255,0,0},{0,255,255},{255,0,255},{255,255,0},{255,255,255}},
          {{0,0,0},{0,0,192},{0,192,0},{192,0,0},{0,192,192},{192,0,192},{192,192,0},{192,192,192}},
          {{0,0,0},{0,0,128},{0,128,0},{128,0,0},{0,128,128},{128,0,128},{128,128,0},{128,128,128}},
          {{0,0,0},{0,0,64},{0,64,0},{64,0,0},{0,64,64},{64,0,64},{64,64,0},{64,64,64}},
          {{0,0,0},{0,0,32},{0,32,0},{32,0,0},{0,32,32},{32,0,32},{32,32,0},{32,32,32}}
    };

    for(int i = 0; i < 5; i++){
        for(int j = 0; j < 8; j++){
            //---
            fill(0);
            text("(" + iro[i][j][0] + "," + iro[i][j][1] + "," + iro[i][j][2] + ")", x, y);
            fill(iro[i][j][0], iro[i][j][1], iro[i][j][2]);
            ellipse(x + 30, y + 20, tyokkei, tyokkei);
    
            x += 80;
        }
        
        //改行
        x = 10;
        y += 60;
    }

}

「どの指定をすると、どの色になる」な色見本が表示されましたよね?
こうやって並べてみると「どの数字を増やすと、どの色に近づく」や
「どの数字を減らすと、どの色に近づく」が分かりやすいはずです。
なんとなくで良いので数字と色の対応を覚えてあげてください。

とはいえ、難しく考える必要はありません。
覚えておくべきことは

1.「1つ目」の数字を増やすと「赤」に近づく(255,0,0が赤です)
2.「2つ目」の数字を増やすと「緑」に近づく(0,255,0が緑です)
3.「3つ目」の数字を増やすと「青」に近づく(0,0,255が青です)


だけです。

その他の色は、この3つの色を混ぜて作ります。
例えば、赤(255,0,0)と青(0,0,255)を混ぜたのが紫(255,0,255)です。
赤(255,0,0)と緑(0,255,0)を混ぜると黄色(255,255,0)になります。

まぁ、知らなくても作れなくはないですけどね。
知っておいた方が、こんなプログラムを作るときに
できあがりをイメージしやすいはずですφ(--)

void setup(){
    background(255);
    size(800,400);
}

int iro = 0;
boolean plusFlg = true;
int iroMode = 0;

void draw(){
    background(255);
    noStroke();
    
    fill(iro, 0, 255 - iro);
    ellipse(150, 150, 200, 200);
    
    fill(0, iro, 255 - iro);
    ellipse(350, 150, 200, 200);

    if(plusFlg == true){
        iro = iro + 1;
    }else{
        iro = iro - 1;
    }

    if(iro < 0){
        plusFlg = true;
        iro = 0;
    }else if(iro > 255){
        plusFlg = false;
        iro = 255;
    }
}

あとは、透明度を指定して重ね合わせたりしても面白いかもしれません。
例えば、こんな感じですねφ(--)

void setup(){
    background(255);
    size(800,400);
}

int iro = 0;
boolean plusFlg = true;
int iroMode = 0;

void draw(){
    background(255);
    noStroke();
    
    fill(0, iro, 255 - iro, 80);
    ellipse(150, 150, 200, 200);
    
    fill(iro, 0, 255 - iro, 80);
    ellipse(250, 150, 200, 200);
    
    fill(iro, 0, 255, 80);
    ellipse(200, 250, 200, 200);


    if(plusFlg == true){
        iro = iro + 1;
    }else{
        iro = iro - 1;
    }

    if(iro < 0){
        plusFlg = true;
        iro = 0;
    }else if(iro > 255){
        plusFlg = false;
        iro = 255;
    }
}

いろいろ遊んでみてください(--)ノ
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:Processing  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事