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

我正在尝试从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);
  }
}

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


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

最佳答案

这称为弧线弧线（弧线或线段的高度）

我有Radius和Sagitta，需要使用以下公式计算弧度Width（也就是弦的长度）：



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>

关于javascript - P5.js用矩形绘制圆形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47995931/