### P5.js draw circle shape with rectangles

663 观看

2回复

465 作者的声誉

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

### 回应 (2)

0

0 作者的声誉

I wrote you a function for doing this:

This is p5.js:

``````function drawCircle(x, y, radius) {
for (var i = 0; i <= 360; i++) {
}
}
``````

This is Processing:

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

'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. e.g.: `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

1

465 作者的声誉

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>``