CODEWITHSUNDEEP
javascriptmathp5.js
Owen
Owen

Reputation: 790

P5.js draw circle shape with rectangles

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.
enter image description here

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

Upvotes: 0

Views: 2645

Answers (2)

Owen
Owen

Reputation: 790

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:

l = √2sr−s2

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

circle arc

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>

Upvotes: 2

user7878464
user7878464

Reputation:

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. 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):

The Circle

If we visualize the rectangles:

Circle visualized

My totally professional formulas:

Formulas

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

Upvotes: 0

Related Questions