2022年5月19日読了時間: 3分

Processing クレヨンでお絵かき

更新日：2022年6月3日

今回はProcessingでクレヨンのような質感を表現していきます。

この関数を作ったのは、Processingで西洋絵画のような表現を追求してみたいというのがきっかけです。

西洋絵画というと油絵が主流かなと思ったので、油絵がどのような構造をしているのかを観察しました。

しかし、その構造をProcessingで作ってみたらクレヨンのような質感になってしまいました笑。。。

油絵の質感

油絵の塗った部分を観察してみると、絵の具が盛り上がって下の部分に影ができています。

これは以下のような手順で表現できます。

点を描画
1の点の下に影を描画（影は1に近いほど濃く離れていくと薄くなる）

それではこの手順をProcessingで実装してみます。

実装

crayonPoint関数はpoint関数に追加機能を加えたものになります。


void crayonPoint(float x, float y, color c) {
  
  //影の色作成
  float r = red(c);//赤
  float g = green(c);//緑
  float b = blue(c);//青
  float shade = 0.7;//描いた後にできる影の濃さ(0に近いと濃い)
  color cb = color(r*shade, g*shade, b*shade);//影の色
  
  //手順1
  strokeWeight(random(3, 5));
  stroke(c);
  point(x, y);
  
  //手順2（初期位置に近いほど影が濃い）
  for (float i = 0; i<=3; i+=0.1) {
    color lerpC = lerpColor(cb, c, i/3);
    strokeWeight(random(2));
    stroke(lerpC);
    //描画位置をずらすことで擦れ具合を表現
    point(x+(3*random(-1, 1)), (y+2)+i);
  }
    
}

影の色作成ついては以下手順です。

引数のcolor型をR,G,Bに分解
変数shadeの値をそれぞれに掛ける

わざわざ色を分解して値を掛ける理由としては、影の色が真っ黒すぎて違和感が出てしまいます。少し色が見えるぐらいの値を掛け合わせた方が自然な仕上がりになります。

手順1は引数のx,y座標と色を指定してpoint関数を描画します。

strokeWeight関数をランダムにしているのは、点の大きさをブレさせて手書きのような印象を与えるためです。

手順2は影の描画になります。

影の色作成で取得した色と引数の色をlerpColor関数でグラデーション描画していきます。

これで初期位置に近いほど影が濃く、離れるほど薄くなります。

お試しコード

背景と中心に円を描画するコードをのせました。


color c1 = color(239, 193, 12);//背景
color c2 = color(28,134,236);//円
int num = 600;
int rad = 150;

void setup() {
  size(600, 600);
  background(255);
  pixelDensity(2);
  //背景
  for (float i = 0; i<num; i+=3) {
    for (float j = 0; j<num; j+=1) {
      crayonPoint(i+random(-5, 5), j+random(-5, 5), c1);
    }
  }
  //円
  for (float i = 0; i<180; i+=2) {
    float cosx = (width/2)+(rad*cos(radians(i)));
    float siny = (height/2)+(rad*sin(radians(i)));
    float dist = abs((height/2)-siny);
    for (float j = 0; j<(dist*2); j+=1) {
     crayonPoint(cosx+random(-2, 2), siny+random(-2, 2)-j, c2);
    }
  }
  save("crayonPoint");
}

void crayonPoint(float x, float y, color c) {
  float r = red(c);//赤
  float g = green(c);//緑
  float b = blue(c);//青
  float shade = 0.7;//描いた後にできる影の濃さ(0に近いと濃い)
  color cb = color(r*shade, g*shade, b*shade);//影の色
  
  //初期位置
  strokeWeight(random(3, 5));
  stroke(c);
  point(x, y);
  
  //描いた後にできる影（初期位置に近いほど影が濃い）
  for (float i = 0; i<=3; i+=0.1) {
    color lerpC = lerpColor(cb, c, i/3);
    strokeWeight(random(2));
    stroke(lerpC);
    //描画位置をずらすことで擦れ具合を表現
    point(x+(3*random(-1, 1)), (y+2)+i);
  }
}

以上が、クレヨンの質感表現になります。

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

この作品はシンプルな形をどのように配置すれば美しい構図になるかを考えて制作しました。配置のバランスはかなり考えたので自信があります！！

ただ、美しいの基準は自分が見てて気持ち良いと思うかなので、あまり参考にはならないと思います笑

おそらくこのコードに改良を加えることで他の質感表現もできると思うので、

是非みなさん使ってみてdailycoding(takaoさんから引用)の表現の幅を広げてください。

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

Processing クレヨンでお絵かき

最新記事

Comments