【p5.js】黄金長方形

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

function draw() {
  background(220);
  divRect(50, 100, 300, 8);
}

function divRect(x, y, length, level) {
  const R = (1+sqrt(5))/2;
  let ax, ay, bx, by, px, py, qx, qy;
  
  rect(x, y, length, length/R);
  
  if (level >= 1) {
    ax = x;
    ay = y;
    bx = x+length;
    by = y;
    px = ax*(1-1/R)+bx*1/R;
    py = ay*(1-1/R)+by*1/R;
    qx = px+(ay-py);
    qy = py-(ax-px);
    line(px, py, qx, qy);
  }
  
  if (level >= 2) {
    ax = px;
    ay = py;
    bx = qx;
    by = qy;
    px = ax*1/R+bx*(1-1/R);
    py = ay*1/R+by*(1-1/R);
    qx = px+(by-py);
    qy = py-(bx-px);
    line(px, py, qx, qy);
  }
  
  if (level >= 3) {
    for (let i = 0; i < level-2; ++i) {
      ax = qx;
      ay = qy;
      bx = px;
      by = py;
      px = ax*(1-1/R)+bx*1/R;
      py = ay*(1-1/R)+by*1/R;
      qx = px+(ay-py);
      qy = py-(ax-px);
      line(px, py, qx, qy);
    }
  }
}

今回は、以下のように出力される。

golden-rectangle by inoha_naito -p5.js Web Editor
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators,...

参考

黄金長方形 - Wikipedia
PHPで黄金螺旋を描く
黄金比は安定した美しさをもつ比率とされ、美術品や、さまざまな工業デザインに取り入れられている。黄金比を使って螺旋を描いたものを黄金螺旋と呼び、オウムガイの螺旋模様がこれに当たる。今回は、PHPを使って黄金螺旋を描くプログラムを作ってみる。
タイトルとURLをコピーしました