p5.jsで葉っぱを描いたので、ご紹介いたします！
春夏秋冬を代表するモノ(桜、葉、紅葉、雪)を散らそうと思って、ググってみると葉っぱだけ見つからなかった…(私の知る範囲)
なので色んな記事を参考にして、作ってみました。参考になれば幸いです！
サンプルソース
花や葉っぱを表現する関数”花葉曲線”を用いて作成します！
・花の曲線を描く”
葉っぱ(葉脈除く)のソースがこちら！
leaf.js
const w = 400;
const h = 400;
const n = 4;
const size = 100;
const bulge = 1.2; //葉の膨らみ
function setup() {
createCanvas(w, h);
background(0);
}
function draw() {
background(0);
const ox = w / 2;
const oy = h / 2;
push();
noStroke();
translate(ox, oy);
beginShape();
for (let t = 0; t < 360 / n; t++) {
A = (n / PI) * radians(t);
md = floor(A) % 2;
r = pow(-1, md) * (A - floor(A)) + md;
R = r;
x = size * R * cos(bulge * radians(t));
y = size * R * sin(radians(t));
vertex(x, y);
}
endShape(CLOSE);
pop();
}
変数bulgeをイジると、葉っぱが細くなったり、太くなったりします。お好みで調整してみて下さい！
でも、何か物足りない…そう、葉脈や茎っぽいやつ(葉柄というらしい)があってこその、葉っぱでしょう。
葉脈と葉柄を付け加えたソースがこちら！
leaf.js
const w = 400;
const h = 400;
const n = 4;
const size = 100;
function setup() {
createCanvas(w, h);
background(0);
}
function draw() {
background(0);
const ox = w / 2;
const oy = h / 2;
let xmax;
let ymax;
const veins = 0.75; //葉脈の長さ
const petiole = -0.25; //葉柄の長さ
push();
noStroke();
translate(ox, oy);
beginShape();
for (let t = 0; t < 360 / n; t++) {
const bulge = 1.2; //葉の膨らみ
A = (n / PI) * radians(t);
md = floor(A) % 2;
r = pow(-1, md) * (A - floor(A)) + md;
R = r;
x = size * R * cos(bulge * radians(t));
y = size * R * sin(radians(t));
if (t == 45) {
xmax = x;
ymax = y;
}
vertex(x, y);
}
endShape(CLOSE);
stroke(0); // 線の色
strokeWeight(0.5); // 線の太さ
line(0, 0, xmax * veins, ymax * veins);
stroke(255); // 線の色
strokeWeight(2); // 線の太さ
line(0, 0, xmax * petiole, ymax * petiole);
pop();
}
ソース内のt=45のときに葉脈の頂点が得られます。この頂点を起点に、線を引く感じです。
葉脈veinsや葉柄petioleのパラメーターはお好みでご調整ください！
完成図
