p5.jsで葉っぱの図形を書いてみた

p5.jsで葉っぱの図形を書いてみた:

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のパラメーターはお好みでご調整ください！

完成図

参考URL

• 誉桜に浪漫の嵐！へし切長谷部のためにp5.js(Processing)で桜吹雪を描く
  
• Processing で描ける図形まとめ