見出し画像

p5.js 水彩毛筆風描画のつくりかた

かに

こんにちは、AQUARING かに です。
今回は最近のスケッチでよくやっている、noise() を使った水彩毛筆風描画を紹介します。手順はとても簡単なのでクリエイティブコーディングを始めたばかりの方でも挑戦しやすいテクニックかと思います。

作例

こんな感じの淡い水彩絵の具と毛筆で線を引いたような画が作れます。


作り方

なんとたったの3ステップで作れます！

1. circle() を直線上にたくさん並べる

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(240);
  
  noStroke();
  fill(0);
  for (let i = 0; i < width; i++) {// 1pxごとに円を描画
    circle(i, height / 2, 30);
  }
  
  noLoop();
}
この時点ではまだただの太い直線です。

2. circle() の直径を noise() で決める

for (let i = 0; i < width; i++) {
  let d = noise(i / 99) * 30;// noiseに渡す値の変化量を小さくして粗くする
  circle(i, height / 2, d);
}
これだけで墨の毛筆のような筆圧の粗さがでました。

3. fill() で半透明の色を指定する

fill(0, 0, 180, 24);// 塗りを半透明の青にする
塗りを透明にすることで直径が大きいところほど濃く
小さいところほど薄くなって水彩っぽくなりました。


応用

このテクニックでは circle() を連続して描画することで繋がった線にみえるようにしているだけなので、直線である必要はありません。座標を円周状に変更するだけで手書き風の円が描画できます。

function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(240);
  
  noStroke();
  fill(0, 0, 180, 24);
  let radius = width * 0.35;
  for (let i = 0; i < width; i++) {
    // 円周上の座標に描画
    let angle = i * TWO_PI / width;
    let x = width / 2 + cos(angle) * radius;
    let y = width / 2 + sin(angle) * radius;
    let d = noise(i / 60) * 30;
    circle(x, y, d);
  }
  
  noLoop();
}
水彩毛筆風の円。
直線のときよりも曲線のほうが手書きっぽさがでますね。


まとめ

「半透明のcircle()の大きさをnoise()で決めていっぱい並べる」だけでできるので、やってみてください〜！
コードもシンプルなのでつぶやきProcessingにも取り入れやすいです！

この記事が気に入ったらサポートをしてみませんか？