プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
Processing、色を変化させる
Processingはパラパラマンガです。
draw()を実行する度に新しい絵が描かれます。

ということでdraw()の度に指定する色を変えれば
時間経過と共に色が変化します。

例えば、こんなプログラムですねφ(--)

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

int a = 0;

void draw(){
  
  //色(aを256で割ったあまりを設定)
  int iro = a % 256;

  stroke(iro);  //線の色を設定
  fill(iro);  //背景色を設定
  
  //円を描く
  ellipse(100, 100, 100, 100);
  
  a = a + 1;

}

実際に動かすと、最初は黒かった円が少しずつ透明(白)になっていきます。

これは

1回目のdraw():色「0」(つまり黒)で円を描く
2回目のdraw():色「1」で円を描く
3回目のdraw():色「2」で円を描く
   ・
   ・
   ・
255回目のdraw():色「255」(つまり白)で円を描く
256回目のdraw():色「0」(つまり黒)で円を描く

のようにパラパラしているからです。

ちなみに「%」は割り算のあまりを求める演算子です。
「a % 256」は「aを256で割ったあまり」を意図しています。
例えば「258 % 256」は「2」になります。
「258÷256=1あまり2」だからです。

こうしておくと「a % 256」は0~255のどれかになります。
「a」が0、1、2……255、256、257……と増えていくにしたがって
「a % 256」は0、1、2……255、0、1……と変わっていくからです。

ということで、最初「黒(色指定:0)」だった円が
少しずつ「白(色指定:255)」になっていくサンプルでした。

これが色を変化させる基本です。

あとは色の種類を変えたり色を変えるタイミングを変えたりすると
いろいろと面白い変化をさせることができます。

例えば、こんなプログラムにするとφ(--)

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

int a = 0;
boolean plusFlg = true;  //足すか引くか判定用のフラグ

void draw(){
  
  //色(aを256で割った余り
  int iro = a % 256;

  stroke(iro);  //線の色を設定
  fill(iro);  //背景色を設定
  
  //円を描く
  ellipse(100, 100, 100, 100);
  
  if(iro >= 255 ){  //白(255)になったら数字を引くようにする
    plusFlg = false;
  }
  if(iro <= 0 ){  //黒(0)になったら数字を足すようにする
    plusFlg = true;
  }


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

}

円がゆっくりと点滅します。

こんなプログラムにするとφ(--)

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

int a = 0;
boolean plusFlg = true;  //足すか引くか判定用のフラグ

void draw(){
  
  //色(aを256で割った余り
  int iro = a % 256;

  stroke(iro,255,0);  //線の色を設定
  fill(iro,255,0);  //背景色を設定
  
  //円を描く
  ellipse(100, 100, 100, 100);
  
  if(iro >= 255 ){  //白(255)になったら数字を引くようにする
    plusFlg = false;
  }
  if(iro <= 0 ){  //黒(0)になったら数字を足すようにする
    plusFlg = true;
  }

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

点滅の色が黒と白ではなく緑と黄色になります。

あるいは、こんなプログラムにするとφ(--)

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

int a = 0;
boolean plusFlg = true;  //足すか引くか判定用のフラグ

int iro2 = (int)random(0,255);
int iro3 = (int)random(0,255);


void draw(){
  
  //色(aを256で割った余り
  int iro = a % 256;

  if(iro >= 255 ){
    iro2 = (int)random(0,255);
    iro3 = (int)random(0,255);
  }


  stroke(iro,iro2,iro3);  //線の色を設定
  fill(iro,iro2,iro3);  //背景色を設定
  
  //円を描く
  ellipse(100, 100, 100, 100);
  
  if(iro >= 255 ){  //白(255)になったら数字を引くようにする
    plusFlg = false;
  }
  if(iro <= 0 ){  //黒(0)になったら数字を足すようにする
    plusFlg = true;
  }

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

点滅のランダムになります。

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

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

  関連記事