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; } }
見た目は同じでも、構造上問題アリかも。