P5.js用矩形绘制圆形

Question

I'm trying to form a circle shape from the outline of several rectangles in P5.js

This is what I have so far but as you can see it's not quite a circle.
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);
  }
}

This is the formulas I'm using to find a circles chord.

I'm not sure if there is something wrong with my maths or I'm using the completely wrong formula. Thanks

Answer 1

This is called an arcs Sagitta (The height of an arc or segment)

I had the Radius and Sagitta and needed to calculate the arcs Width (aka. the length of the chord) using the following formula:

s: is the length of the sagitta
r: is the radius of the arc
l: is one half of distance across the base of the arc (half the chord length)
Note In all the above formulae, the length l is half the width of the arc. The full width will be double this. Simply multiply l by 2

JavaScript code using 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> 

Answer 2

I wrote you a function for doing this:

This is p5.js:

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

This is Processing:

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' is the angle (were doing this 360 times. if you want finer detail or you are drawing really big corcles you may want to go smaller steps. eg: i += 0.1 this will however increase the time needed to caluclate this) 'x' and 'y' is the position and radius is the circle radius.

You call the function like this:

P5.js:

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

Processing:

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

This is what the circle looks like (who guessed - i looks like a circle):

If we visualize the rectangles:

My totally professional formulas:

I hope this could help. Have a nice day! :D