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

我给你写了一个函数来做这个：

这是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);
  }
}

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

你这样调用函数：

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

Answer 2

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

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

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

JavaScript 代码使用 P5.js

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>

P5.js 用矩形画圆形

P5.js draw circle shape with rectangles

javascript

math

p5.js