change color

今回は色について。色の変化について。

Processingでの色の表現方法はいくつかありますが、私は0から255で表されるRGBのものを使用しています。（たまに色を先にイメージしておいてピンポイントで欲しい時はカラーピッカーを使ってます）

Processingをそもそもやってみたいと思った理由の一つに『延々と動き続けるイメージを作りたい』というものがあります。色がゆっくり変わっていってそれがループするやつです。スクリーンセーバーとか結構ずっと見ていられるタイプの人間です。

角度に連動させて色が変化する

マウスの座標と連動して、回転したり、またその角度によって色が変化するものを作ろうと思いましたが、いろいろ詰め込みすぎてなんだかわからなくなりました。

void setup(){
 size(800, 600,P3D);
 rectMode(CENTER);
 noStroke();
 frameRate(120);
}

int angleX = 0;
int angleY = 0;
int angleZ = 0;
int R = 0;
int G = 0;
int B = 0;


void draw(){
 background(255);
 translate(width/2, height/2);
 
 rotateX(angleX);
 rotateY(angleY);
 rotateZ(angleZ);
 
 fill(R, G, B);
 rect(0, 0, 40, 40);
 
 angleX += 1;
 angleY += 2;
 angleZ += 1;
 
 R = map(angleX,1, 10, 0, 255);
 G = map(angleY,1, 100, 0, 255);
 B = map(angleZ,1, 1, 0, 255);
 
if(R = 255){
  R -= 1;
}
 
 
}

サイズのところの最後にあるP3Dですが、これがあると３Dの表現が可能になります。詳しいことはまた別の機会に。とりあえずネットの情報で見つけたので取り入れてみました。これをすることでX軸（横）Y軸（縦）に追加してZ軸（奥行き）の回転を追加することが可能です。

で。上のコードで私が想定していた結果は

『画面の中心で40x 40の四角が３次元の軸で回転しながら、その回転の角度に合わせて色が変わり続ける』

というものでした。
一番最後の関数でやりたかったのは色のパラメーターが255で最大になったら、そこから先は減らし続けると。というものです。

このコードを実行すると
R = map(angleX,1, 10, 0, 255);
この式の部分に黄色が入って
cannot convert from float to int
と出てしまい動きません。

float からintには転換できません。という意味ですが、なにがどうなっているのかわかりません。実は最初に書いた時にangleに関してはfloatで設定していました。角度はfloatで、色に関するものはintでした。これがいけないのかと思い、角度もintに合わせましたが、結局同じものが出てきてしまいました。

そもそも最後の式も
パラメーターが255で最大になったら、そこから先は減らし続ける

も、合ってないではないか。。。
関数の意味は『もしRが255になったら、Rから１引いたものをRに代入する』
なので255になった時点で１を引いて254。その先がない。。。。
減算、加算代入演算子は、足し続ける、引き続けると理解していましたが、その前の条件がずれていると何も効果は発揮できません。

色だけに的を絞る

さてどうするか。まずは理解したい部分だけ分解。
色を変化させ続けたい。

次に考えたのはforを使用しての繰り返し。繰り返して条件を指定していけば変わり続けるのではないかと考えました。

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

int R =0;

void draw(){
 
 translate(width/2, height/2);
 noStroke();
 ellipse(0, 0, 100, 100);
 for(int i = 0 ; i < 255 ; i += 1){
   R += 1;
 }
fill(R, 100, 100);
    
 
}

 

結果は色が変わらず、赤い円が残ったまま。

日の丸弁当

違う！そうじゃない！
調べていると私と同じ悩みの人を見つけました。

Processingについて円が虹色に変化し続けるようにしたいのですがうまく行きません。

答えの部分

なので、drawの方を
int i;
void draw(){
fill(i,100,100);
ellipse(height/2,width/2,30,30);
i=(i+1)%101;
}

forの繰り返しは使っていない。
多分繰り返しの理解の仕方を間違えていたようです。
forの反復はあくまで繰り返したものの結果を表示するもので、その過程を見せるもの＝変化がフレーム内で表示される　ものではないようです。
これは、また新たな発見。

％？

答えの部分にある　i = (i+1)%101 
iが赤色のパラメーターに影響するのでここが色の変化に関わっていそう。
まずは結果だけ見てみよう。

お！なんかやりたいことに近い！

でもこの謎の％はなんだろうか。

Processing、色を変化させる｜マコトのおもちゃ箱　～ぼへぼへ自営業者の技術メモ～

こちらに答えがありました！
%は単なる割り算ではなく、割ったあまりを表示する演算子のようです。
（ちなみに本の方だと単なる割り算の演算子として表記されています。ちがうじゃん！）

こうすることによって数字が増え続けていったとしても必ず数字の値は0から255の間で変化し続けるようです。
すごい！シンプル！

最初に挑戦したものだと

R = map(angleX,1, 10, 0, 255);
 G = map(angleY,1, 100, 0, 255);
B = map(angleZ,1, 1, 0, 255);

それぞれの値を角度のパラメーターをわざわざmap()で値を0-255の間にしてましたが、無駄な努力だったことがわかります。Simple is best.

色の変え方がわかったので今日はここまで。
次回はこれを使って当初の目的である角度と連動させた色変えに挑戦したいと思います。