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（弧或段的高度）

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

s：是sagitta的长度 r：是弧的半径
l：是弧形底部距离的一半（弦长的一半）
注意在上述所有公式中，长度l是弧的宽度的一半。全宽将是这个的两倍。只需将l乘以2

使用P5.js的JavaScript代码

＆＃13;

＆＃13;

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)
  }
  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我写了一个执行此操作的函数：

这是p5.js：

function drawCircle(x, y, radius) {
  for (var i = 0; i <= 360; i++) {
    rect(x, y, cos(i) * radius, sin(i) * radius);
  }
}

这是处理：

void drawCircle(float x, float y, float radius) {
  for (int i = 0; i <= 360; i++) {
    rect(x, y, cos(i) * radius, sin(i) * radius);
  }
}

'我'是角度（这样做了360次。如果你想要更精细的细节，或者你正在绘制真正的大脑圈，你可能想要更小的步骤。例如：i += 0.1这将增加所需的时间来计算这个） 'x'和'y'是位置，半径是圆半径。

你可以这样调用这个函数：

P5.js：

function setup() {
   createCanvas(100, 100);
   background(0);
   drawCircle(width / 2, height / 2, 50);
}

处理：

void setup () {
  size(100, 100);
  background(0);
  drawCircle(width / 2, height / 2, 60);
}

这就是圆圈的样子（谁猜到了 - 我看起来像一个圆圈）：

如果我们想象出矩形：

我完全专业的公式：

我希望这可以提供帮助。祝你今天愉快！ ：d