Processingで三角関数を使った処理～色相環を作ってみた。

今回はProcessingを使って色相環を作ってみた。
こんなやつ。

前回の記事で簡単にHSB形式(Hue/色相・Saturation/彩度・Brightness/明度)で色を指定できるという話を書いたけど、これを使えば単にループ内で色相の値を増加させていくだけで綺麗な色相グラデーションになる。

コード

int particle_size = 50;
float radius = 200.0;
float x = 0.0;
float y = 0.0;
 
size(800, 600);
background(255);
translate(width/2, height/2);  // (1)

colorMode(HSB, 360, 100, 100, 100); // (2)

float saturation, brightness, alpha;
saturation = 100;
brightness = 200;
alpha = 50;

for (int angle=0; angle < 360; angle += 10) { 
   // (3)
  fill(color(angle, saturation, brightness, alpha));

   // (4)
  x = radius*cos(radians(angle));
  y = radius*sin(radians(angle));
  ellipse(x, y, particle_size, particle_size);
}

説明

(1) translateについて

この命令はネットのサンプルで見つけて感動したのだが、普通は画面の左上が座標(0, 0)となるのに対し、translate命令を出しておくと好きな場所を(0, 0)として扱うことができるようになる。

これを付けないとこうなる。

さすがProcessing。座標のオフセットって自前でやると結構面倒くさくて混乱増長ポイントなのでこれはありがたい。

(2) colorModeについて

ここではHSB形式を指定しているが、ここで凄いのが引数として色相・彩度・明度の諧調を指定できるということ。
例えば普通の言語では0～255で明度を指定するとしよう。ここで0は黒、255が白で中間はグレーになる。
Processingでは100を指定すると0が黒で100が白の100諧調という風に、扱うプログラムの都合に応じて諧調を分かりやすく指定できる。

例えば今回は角度angleが0度～360度でループさせるのでそれに合わせて明度を360諧調で指定すると、0が黒、360が白となり、次のような描画を簡単に作成することができる。