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にも取り入れやすいです!
この記事が気に入ったらサポートをしてみませんか?