p5.jsで花を描く

画像のような単純な花模様を描く。
花びら部分の曲線はbeginShapeのcurveVertexが使いやすい。
クラスの勉強を兼ねて放り込んでみる。

let theta=0;
let split;
let num=[3,5,8,13,21];
let hana1;

function setup() {
  createCanvas(400, 400);
  background(220);
  noFill();
  noStroke();
  frameRate();
  hana1=new Hana();
  split=TAU/num[Math.round(random(0,4))];
}

function draw() {
   
  translate(200,200);
  rotate(theta);

  hana1.hanabira();
  hana1.tane();

  theta+=split;
}

class Hana{
  constructor(){
  }
  hanabira(){
    const firsty=10;
    const secondx=70;
    const secondy=20;
    const thirdx=130;
    const thirdy=10;
    const topx=150;
    fill(240,240,100);

    beginShape();
    curveVertex(0,firsty);
    curveVertex(0,firsty);
    curveVertex(secondx,secondy);
    curveVertex(thirdx,thirdy);
    curveVertex(topx,0);
    curveVertex(thirdx,-thirdy);
    curveVertex(secondx,-secondy);
    curveVertex(0,-firsty);
    curveVertex(0,-firsty);
    endShape(); 
}
  tane(){
  fill(100,100,0);
  circle(0,0,70);
  }
}

クラスの機能を使えば同じ変数、関数を使ったものの内容を変えて簡単に複製できる。