コードサンプル:Color Wheel

Basics \ Processing.orgの、
ColorWheel \ Learning \ Processing.orgより。

カラーホイールを描画するサンプル。
ホイールの中心に近づくほど、明度を落としたホイールが描かれる。

int segs = 12;//基本12色
int steps = 6;//明度の段階
float rotAdjust = TWO_PI / segs / 2;//メインループで扇を描画するときに15度ずらすための変数
float radius;//ホイール半径
float segWidth;//減らすホイール半径値
float interval = TWO_PI / segs;//円弧1つの長さ
void setup() {
size(200, 200);
background(127);
smooth();
ellipseMode(RADIUS);
noStroke();
radius = min(width, height) * 0.45;
segWidth = radius / steps;
drawShadeWheel();
}
void drawShadeWheel() {
for (int j = 0; j < steps; j++) {
color[] cols = {//色情報(RGB)を配列で入れる。
color(255-(255/steps)*j, 255-(255/steps)*j, 0),//黄色(255,255,0)
color(255-(255/steps)*j, (255/1.5)-((255/1.5)/steps)*j, 0),//黄橙(255,255/1.5,0)
color(255-(255/steps)*j, (255/2)-((255/2)/steps)*j, 0),//橙(255,255/2,0)
color(255-(255/steps)*j, (255/2.5)-((255/2.5)/steps)*j, 0),赤橙(255,255/2.5,0)
color(255-(255/steps)*j, 0, 0),//赤(255,0,0)
color(255-(255/steps)*j, 0, (255/2)-((255/2)/steps)*j),//赤紫(255,0,255/2)
color(255-(255/steps)*j, 0, 255-(255/steps)*j),//紫purple(255,0,255)
color((255/2)-((255/2)/steps)*j, 0, 255-(255/steps)*j),//青紫(255/2,0,255)
color(0, 0, 255-(255/steps)*j),//青(0,0,255)
color(0, 255-(255/steps)*j, (255/2.5)-((255/2.5)/steps)*j),//青緑(0,255,255/2.5)
color(0, 255-(255/steps)*j, 0),//緑(0,255,0)
color((255/2)-((255/2)/steps)*j, 255-(255/steps)*j, 0)//黄緑(255/2,255,0)
};
//扇を30度ずつ回転させながら描画。
for (int i = 0; i < segs; i++) {
fill(cols[i]);
arc(width/2, height/2, radius, radius,
interval*i+rotAdjust, interval*(i+1)+rotAdjust);
}
radius -= segWidth;//扇半径をsegWidth分だけ減らす。
}
}

色情報の設定内容がRGBで一見ややこしいが、
カラーホイールの趣旨から考えると仕方がないかも。
HSBで設定すると少しラクだけど・・・、

void drawShadeWheel2() {
for (int j = 0; j < steps; j++) {
color[] cols = {
color(60, 100, 100-(100/steps)*j),
color(40, 100, 100-(100/steps)*j),
color(30, 100, 100-(100/steps)*j),
color(24, 100, 100-(100/steps)*j),
color(0, 100, 100-(100/steps)*j),
color(330, 100, 100-(100/steps)*j),
color(300, 100, 100-(100/steps)*j),
color(270, 100, 100-(100/steps)*j),
color(240, 100, 100-(100/steps)*j),
color(150, 100, 100-(100/steps)*j),
color(120, 100, 100-(100/steps)*j),
color(90, 100, 100-(100/steps)*j)
};
for (int i = 0; i < segs; i++) {
fill(cols[i]);
arc(width/2, height/2, radius, radius,
interval*i+rotAdjust, interval*(i+1)+rotAdjust);
}
radius -= segWidth;
}
}

見た目は同じでも、構造上問題アリかも。

Author

  • Shinichi Kuroda - 黒田晋一
  • 香川県高松市 - Takamatsu-shi, Kagawa, Japan.
  • Mail - info@studiobusstop.com