コードサンプル:Color Wheel

コードサンプル: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