Processing Examples Basic Color

Color.pde

// カーソルの位置が高いほど暗い色になる
 
int barWidth = 5;
int lastBar = -1;

void setup() {
  size(200, 200);
  colorMode(HSB, 360, 100, height);
  noStroke();
  background(0);
}

void draw() {
  int whichBar = mouseX / barWidth;
  if (whichBar != lastBar) {
    int barX = whichBar * barWidth;
    // Y値をそのまま明るさにする。左上が原点なので、下に行くほど明るくなる。
    // HSBなので色相、彩度、明度
    fill(barX, 100, mouseY);
    rect(barX, 0, barWidth, height);
    lastBar = whichBar;
  }
}

ColorWheel.pde

/**
 * Subtractive Color Wheel 
 * by Ira Greenberg. 
 * 
 * The primaries are red, yellow, and blue. The secondaries are green, 
 * purple, and orange. The tertiaries are  yellow-orange, red-orange, 
 * red-purple, blue-purple, blue-green, and yellow-green.
 * 
 * Create a shade or tint of the subtractive color wheel using
 * SHADE or TINT parameters.
 *
 * Updated 26 February 2010.
 */
// 1番目は赤、黄、青。
// 2番目は緑、紫、オレンジ。
// 3番目は黄・オレンジ、赤・オレンジ、赤・紫、青・紫、青・緑、黄・緑。
// 合計12色を輪の形に配置する

int segs = 12;
int steps = 6;
float rotAdjust = TWO_PI / segs / 2;
float radius;
float segWidth;
float interval = TWO_PI / segs;


void setup() {
  size(200, 200);
  background(127);
  smooth();
  // 起点を図形の中央とし、楕円の位置を指定します
  ellipseMode(RADIUS);
  noStroke();
  // make the diameter 90% of the sketch area
  radius = min(width, height) * 0.45;
  segWidth = radius / steps;
  
  // swap which line is commented out to draw the other version
  //drawTintWheel();
  drawShadeWheel();
}


void drawShadeWheel() {
  for (int j = 0; j < steps; j++) {
    color[] cols = { 
      color(255-(255/steps)*j, 255-(255/steps)*j, 0), 
      color(255-(255/steps)*j, (255/1.5)-((255/1.5)/steps)*j, 0), 
      color(255-(255/steps)*j, (255/2)-((255/2)/steps)*j, 0), 
      color(255-(255/steps)*j, (255/2.5)-((255/2.5)/steps)*j, 0), 
      color(255-(255/steps)*j, 0, 0), 
      color(255-(255/steps)*j, 0, (255/2)-((255/2)/steps)*j), 
      color(255-(255/steps)*j, 0, 255-(255/steps)*j), 
      color((255/2)-((255/2)/steps)*j, 0, 255-(255/steps)*j), 
      color(0, 0, 255-(255/steps)*j),
      color(0, 255-(255/steps)*j, (255/2.5)-((255/2.5)/steps)*j), 
      color(0, 255-(255/steps)*j, 0), 
      color((255/2)-((255/2)/steps)*j, 255-(255/steps)*j, 0) 
    };
    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;
  }
}


void drawTintWheel() {
  for (int j = 0; j < steps; j++) {
    color[] cols = { 
      color((255/steps)*j, (255/steps)*j, 0), 
      color((255/steps)*j, ((255/1.5)/steps)*j, 0), 
      color((255/steps)*j, ((255/2)/steps)*j, 0), 
      color((255/steps)*j, ((255/2.5)/steps)*j, 0), 
      color((255/steps)*j, 0, 0), 
      color((255/steps)*j, 0, ((255/2)/steps)*j), 
      color((255/steps)*j, 0, (255/steps)*j), 
      color(((255/2)/steps)*j, 0, (255/steps)*j), 
      color(0, 0, (255/steps)*j),
      color(0, (255/steps)*j, ((255/2.5)/steps)*j), 
      color(0, (255/steps)*j, 0), 
      color(((255/2)/steps)*j, (255/steps)*j, 0)
    };
    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;
  }
}

CreatingColors.pde

// 色に名前をつけ、プログラムの別の箇所から参照できるようにする

size(200, 200);
noStroke();

// 色に「inside」「middle」「outside」という名前をつける
color inside = color(204, 102, 0);
color middle = color(204, 153, 0);
color outside = color(153, 51, 0);

// 以下のように書いてもよい
//color inside = #CC6600;
//color middle = #CC9900;
//color outside = #993300;

// 先ほど名前をつけた色を使う
fill(outside);
rect(0, 0, 200, 200);
fill(middle);
rect(40, 60, 120, 120);
fill(inside);
rect(60, 90, 80, 80);

Gradient.pde

// 1方向のグラデーション

// 定数
int Y_AXIS = 1;
int X_AXIS = 2;

void setup(){
  size(200, 200);

  // グラデーションを作る
  // 背景
  color b1 = color(190, 190, 190);
  color b2 = color(20, 20, 20);
  // 上(0, 0)が明るく、下(width, height)が暗い、グラデーションはy軸方向で
  setGradient(0, 0, width, height, b1, b2, Y_AXIS);
  // 中心の四角形
  color c1 = color(255, 120, 0);
  color c2 = color(10, 45, 255);
  color c3 = color(10, 255, 15);
  color c4 = color(125, 2, 140);
  color c5 = color(255, 255, 0);
  color c6 = color(25, 255, 200);

  // x, yからdx, dyまでをcolor1からcolor2までx/y軸方向にグラデーションさせる
  // 左上、赤→青、Y軸方向
  setGradient(25, 25, 75, 75, c1, c2, Y_AXIS);
  // 右上、緑→紫、X軸方向
  setGradient(100, 25, 75, 75, c3, c4, X_AXIS);
  // 左下、青→黄、X軸方向
  setGradient(25, 100, 75, 75, c2, c5, X_AXIS);
  // 右下、紫→青緑、Y軸方向
  setGradient(100, 100, 75, 75, c4, c6, Y_AXIS);
}

void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ){
  // 色成分の差分をRGB別に計算する。
  float deltaR = red(c2)-red(c1);
  float deltaG = green(c2)-green(c1);
  float deltaB = blue(c2)-blue(c1);

  // y軸の場合
  if(axis == Y_AXIS){
    // 
    // 列
    for (int i=x; i<=(x+w); i++){
      // 行方向に変化させる
      for (int j = y; j<=(y+h); j++){
        color c = color(
        // 色をRGBで作る
        (red(c1)+(j-y)*(deltaR/h)),
        (green(c1)+(j-y)*(deltaG/h)),
        (blue(c1)+(j-y)*(deltaB/h)) 
          );
        // (i, j)に色cをセットする
        set(i, j, c);
      }
    }  
  }  
  // x軸の場合
  else if(axis == X_AXIS){
    // 行 
    for (int i=y; i<=(y+h); i++){
      // 列方向に変化させる
      for (int j = x; j<=(x+w); j++){
        color c = color(
        (red(c1)+(j-x)*(deltaR/h)),
        (green(c1)+(j-x)*(deltaG/h)),
        (blue(c1)+(j-x)*(deltaB/h)) 
          );
        set(j, i, c);
      }
    }  
  }
}

Hue.pde

// 色相
 
int barWidth = 5;
int[] hue;

void setup() 
{
  size(200, 200);
  colorMode(HSB, 360, height, height);  
  hue = new int[width/barWidth]; // 5pxずつ区切る
  noStroke();
}

void draw() 
{
  int j = 0;
  for (int i=0; i<=(width-barWidth); i+=barWidth) {  
    // i < mouseX < i+barWidthならば・・・
    if ((mouseX > i) && (mouseX < i+barWidth)) {
      hue[j] = mouseY; // マウスのy値が色相になる
    }
    // hueの配列にしたがって塗りつぶす色を決め・・・
    fill(hue[j], height/1.2, height/1.2);
    // 矩形を描く
    rect(i, 0, barWidth, height);  
    j++;
  }
}

RadialGradient.pde

// 放射状のグラデーション

void setup(){
  size(200, 200);
  background(0);
  smooth();

  // 1つの方向に4つのグラデーションを描く
  // 半径は幅の8分の1
  int columns = 4;
  int radius = (width/columns)/2;
  // グラデーションをつくる
  for (int i=radius; i< width; i+=radius*2){
    for (int j =radius; j< height; j+=radius*2){
      createGradient(i, j, radius, 
      color(int(random(255)), int(random(255)), int(random(255))), 
      color(int(random(255)), int(random(255)), int(random(255))));
    }
  }
}

// (x, y)を中心に半径radiusのグラデーションの円を塗る
void createGradient (float x, float y, float radius, color c1, color c2){
  float px = 0, py = 0, angle = 0;

  // 色成分の差分を計算する 
  float deltaR = red(c2)-red(c1);
  float deltaG = green(c2)-green(c1);
  float deltaB = blue(c2)-blue(c1);
  // hack to ensure there are no holes in gradient
  // needs to be increased, as radius increases
  float gapFiller = 8.0;

  for (int i=0; i< radius; i++){
    for (float j=0; j<360; j+=1.0/gapFiller){
      px = x+cos(radians(angle))*i;
      py = y+sin(radians(angle))*i;
      angle+=1.0/gapFiller;
      color c = color(
      (red(c1)+(i)*(deltaR/radius)),
      (green(c1)+(i)*(deltaG/radius)),
      (blue(c1)+(i)*(deltaB/radius)) 
        );
      set(int(px), int(py), c);      
    }
  }
  // エッジをなめらかにする 
  // アンチエイリアス
  noFill();
  strokeWeight(3);
  ellipse(x, y, radius*2, radius*2);
}

Saturation.pde

// マウスカーソルでなぞるとy値に応じた彩度になる
 
int barWidth = 5;
int lastBar = -1;


void setup() {
  size(200, 200);
  colorMode(HSB, width, height, 100); 
  noStroke();
}


void draw() {
  int whichBar = mouseX / barWidth;
  if (whichBar != lastBar) {
    int barX = whichBar * barWidth;
    // Xに応じた色相、マウスでのYに応じた彩度で描く
    fill(barX, mouseY, 66);
    rect(barX, 0, barWidth, height);
    lastBar = whichBar;
  }
}

WaveGradient.pde

// sin波形に応じたグラデーションをつくる

float angle = 0;
float px = 0, py = 0;
float amplitude = 30; // 波長
float frequency = 0; // 周波数
float fillGap = 2.5;
color c;

void setup() {
  size(200, 200);
  background(200,200,200);
  noLoop();
}

void draw() {
  // Y方向
  for (int i =- 75; i < height+75; i++){
    // Reset angle to 0, so waves stack properly
    angle = 0;
    // Increasing frequency causes more gaps
    frequency+=.006;
    // X方向
    for (float j=0; j<width+75; j++){
      py = i+sin(radians(angle))*amplitude;
      angle+=frequency;
      c =  color(abs(py-i)*255/amplitude, 255-abs(py-i)*255/amplitude, j*(255.0/(width+50)));
      // Hack to fill gaps. Raise value of fillGap if you increase frequency
      for (int filler = 0; filler<fillGap; filler++){
        set(int(j-filler), int(py)-filler, c);
        set(int(j), int(py), c);
        set(int(j+filler), int(py)+filler, c);
      }
    }
  }
}