読者です 読者をやめる 読者になる 読者になる

Processing中毒者の嘔吐物

ProcessingやらopenFrameworksやら色んなプログラミングについて吐きます

Processingの加算合成モードを使う

Processingでは、blendMode()メソッドによって色の合成の仕方を変えることが出来ます。デフォルトではblendMode(BLEND)になっていて、図形が重なると、後から描画された図形が先に描画された図形を完全に塗りつぶします(透明度を指定している場合は別ですが)。blendMode(ADD)とすると、加算合成モードになります。加算合成モードでは、図形が重なると重なった所はより明るく表示されます。これを使うとちょっとした発光表現ができたりします。サンプルがこちら↓
f:id:P5Aholic:20150611010246j:plain

/*
図形の明度を簡単にコントロールするために
HSBモードにしておくと良いかも
加算合成モードにして
図形の重なりが多いところは明るくなるようにする
背景の明るさも加算されてしまうから背景は暗く
*/

void setup(){
  size(960, 540, P2D);
  // HSBカラーモード
  colorMode(HSB, 360, 100, 100, 100);
  // 加算合成モード
  blendMode(ADD);
  noLoop();
}

void draw(){
  // 背景は暗め
  background(200, 99, 15);
  
  // 値がランダムな長方形を300個描く
  for(int i = 0; i < 300; i++){
    float x = random(width);    // x座標
    float y = random(height);   // y座標
    float w = random(50, 100);  // 幅
    float h = random(50, 100);  // 高さ
    int hue = (int)random(160, 230); // 色相
    int saturation = 80;             // 彩度
    int brightness = 30;             // 明度
    noStroke();
    fill(hue, saturation, brightness);
    rect(x, y, w, h);
  }
  
  saveFrame("image/img.jpg");
}

void mousePressed(){
  redraw();
}

図形が重なっているところはより明るく表示されているのがわかるかと思います。