javascript - P5.js 用矩形绘制圆形

Question

我正在尝试从 P5.js 中的几个矩形的轮廓形成一个圆形

这是我到目前为止所拥有的，但正如你所看到的，它不完全是一个圆圈。
https://codepen.io/anon/pen/KZaOKB

const width = 400;
function setup() { 
  createCanvas(width, width);
} 
function draw() { 
  background(220);
  noStroke();
  fill(color(175,100,220));

  for (var i = 0; i <= 36; i++) {
    var e = radians(i * 10);
    var height = 150 * sin(e/2) * 2;

    rect(i*11 ,(width/2)-10-(height/2), 10, height);
  }
}

这是我用来查找圆和弦的公式。

我不确定我的数学是否有问题，或者我使用了完全错误的公式。谢谢

Answer 1

这称为弧 Sagitta(弧或线段的高度)

我有半径和矢形，需要使用以下公式计算弧宽(又名弦长):

s:是矢状面的长度
r:是圆弧的半径
l:是弧底距离的一半(弦长的一半)
注意在上述所有公式中，长度 l 是弧宽的一半。全宽度将是这个宽度的两倍。只需将 l 乘以 2

使用 P5.js 的 JavaScript 代码

const r = 200;
const lineWidth = 10;
const lines = (r * 2) / lineWidth;
  
function setup() { 
  createCanvas(400, 400);
} 

function draw() { 
  background(220);
  noStroke();
  fill(color(175,100,220));
  
  for (var i = 0; i <= lines; i++) {
    const s = (i * lineWidth) + lineWidth;
    const chordLength = (Math.sqrt((2 * s * r) - (s*s)) * 2);
    rect(i * lineWidth, r - (chordLength / 2), lineWidth-1, chordLength);
    // rect(x, y, width, height)
  }
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>