Processing 油絵の質感表現

以前、クレヨンの質感表現(crayonPoint関数)を書いた際に、本来は油絵の質感を出すことが目標と書きました。

今回はクレヨンのコードを改良して油絵っぽさを出してみたので紹介します。

実装

油絵の質感の分析については前回の記事である程度記載したので、

今回は早速実装方法について記載します。

oilPoint関数の処理はcrayonPoint関数に-y方向のpoint描画処理を加えたものになります。

void oilPoint(float x, float y, color c, float sw, float maxi, float r_n) {
  float r = red(c);//赤
  float g = green(c);//緑
  float b = blue(c);//青
  float shade = 0.2;//描いた後にできる影の濃さ(0に近いと濃い)
  float light = 1.3;
 
  color cb = color(r*shade, g*shade, b*shade);//影の色
  //絵の具が盛り上がった時のテカリ具合
  color cw = color(r*light, g*light, b*light);

  //描いた後にできる影（初期位置に近いほど影が濃い）
  for (float i = 0; i<=int(maxi); i+=0.1) {
    float mapi = map(i, 0, maxi, 0, 3);
    float rn = random(-r_n, r_n);
    color lerpCW = lerpColor(cw, c, mapi);
    color lerpCB = lerpColor(cb, c, mapi);
    
    //引数で点の太さを調整
    strokeWeight(random(sw));

    //初期位置から離れるとテカリが薄くなる
    stroke(lerpCW);
    point(x+(2*rn), (y)-i);
    
    stroke(lerpCB);
    point(x+(2*rn), (y)+i);
  }
}
  

crayonPoiny関数に-y方向の処理を加えた理由としては

絵の具が盛り上がった時に光が当たってテカった部分が足りていなかった為です。

テカリを出すには引数.cをR,G,Bに分解して変数.lightに設定した値を

掛け合わせていきます。

RGBは255,255,255が最も白い値なので、その値に近づけていく為です。

color cw = color(r*light, g*light, b*light);

lerpColorで先ほど設定した変数.cwの色から元の色(引数.c)へグラデーションをかけていきます。

lerpColor関数の第三引数mapiを0~3に設定しているところが今回のポイントになります。

本来であればlerpColor関数は第三引数は0~1の間でグラデーションがかかります。

あえて値の範囲を0~3に設定することで白から元の色への変化を早くすることができます。

そうすることで絵の具の盛り上がりを表現できます。

//あえて3にすることでグラデーションのかかり具合を早くできる
float mapi = map(i, 0, maxi, 0, 3);

color lerpCW = lerpColor(cw, c, mapi);

色を設定したらあとは-y方向にpoint関数を描画するだけです。

point(x+(2*rn), (y)-i);

お試しコード

oilPoint関数にx軸方向のpoint描画を追加して、背景と中心に円を描画するコードをのせました

color c1 = color(185, 22, 17);
color c2 = color(17, 63, 185);
color c3 = color(28, 134, 236);
int rad = 150;

void setup() {
  size(600, 600);
  background(0);
  pixelDensity(2);

  //背景
  for (float i = 20; i<height-20; i+=8) {
    color l_c = lerpColor(c1, c2, i/height);
    for (float j = 20; j<width-20; j+=4) {
      oilPoint(j, i, l_c, random(1, 3), random(4,8), 1);
    }
  }
  
  //円
  oilEllipse(width/2,height/2, rad, c1, c3);
  
}

void oilPoint(float x, float y, color c, float sw, float maxi, float r_n) {
  float r = red(c);//赤
  float g = green(c);//緑
  float b = blue(c);//青
  float shade = 0.1;//描いた後にできる影の濃さ(0に近いと濃い)
  float light = 1.3;

  color cb = color(r*shade, g*shade, b*shade);//影の色
  //絵の具が盛り上がった時のテカリ具合
  color cw = color(r*light, g*light, b*light);

  //描いた後にできる影（初期位置に近いほど影が濃い）
  for (float i = 0; i<=int(maxi); i+=0.1) {
    float mapi = map(i, 0, maxi, 0, 3);
    float rn = random(-r_n, r_n);
    color lerpCW = lerpColor(cw, c, mapi);
    color lerpCB = lerpColor(cb, c, mapi);

    //引数で点の太さを調整
    strokeWeight(random(sw));

    //初期位置から離れるとテカリが薄くなる
    stroke(lerpCW);
    point(x+(2*rn), (y)-i);
    point(x-i, (y)+(2*rn));//x軸方向追加

    stroke(lerpCB);
    point(x+(2*rn), (y)+i);
    point(x+i, (y)+(2*rn));//x軸方向追加
  }
}

//oilPoint関数を使用して円を描画
void oilEllipse(float x, float y, float r, color c_1, color c_2) {
  for (float i = 90; i<270; i+=1) {
    float mapi = map(i, 90, 270, 0, 1);
    color l_c = lerpColor(c_1, c_2, mapi);
    float cosx = (x)+(r*cos(radians(i)));
    float siny = (y)+(r*sin(radians(i)));
    float dist = abs((x)-cosx);
    for (float j = (dist*2); j>0; j-=3) {
      oilPoint(cosx+random(-2, 2)+j, siny+random(-2, 2), l_c, random(1, 3), random(2, 4), 1);
    }
  }
}
  

以上が、油絵の質感表現になります。

こちらの作品は今回紹介した関数を使用して制作しました。

クレヨンのときに制作したコンポジションシリーズの第二弾となります。

今回は色を沢山使用して、構図を意識したシンプルな形の作品です。

僕の感覚ですが、円の配置がミリ単位でずれるだけでも構図が崩れてしまい、

配置はかなり考えました。

僕は色を沢山使いたくない主義なのですが、配色を考えて作品を作ると

ゴチャゴチャせず纏まりのある作品ができるという発見がありました！

是非皆さんもこの関数を使用して絵の具で描いたような作品を作ってみてください！

曲線を使った作品を作ってみると、この関数の面白さ伝わるかなと思います！

最後まで読んでいただきありがとうございました。