How can I make 90 degree intersections/angles more arched?

p5.js
1

Something like this I mean:
unknown.png (discordapp.com)

How angles look in my code right now:
unknown.png (discordapp.com)

I know there’s the arc() function, but I’m not sure if that’s what I’m looking for.

My code can be found here: p5.js Web Editor

2 Likes
2

you could play around with rectangles, they can have rounded edges if insert enough inputs.

3

I don’t think that’s a feasible option here.

4

Unless the internal angles of the rectangle are all different, then rect is the simplest method. Alternatively you could use beziers, or arcs. Complexity will depend on are all the corners the same and is the shape rotated skewed or sheared in any way

5

There’s also going to be 45 degree angles, so I guess Arcs would be easiest, but I’m still not sure on implementing it.

6

Depends if you want all corners to be different.
You’ll probably want to take a look at the arc reference, this should give you some ideas on how to handle this.
https://processing.org/reference/arc_.html

7

Alright, thank you, I’ll keep this thread up until I can find a coded answer.

8

this should give you an idea of how I would approach the problem

2021-07-02 13_54_05-Greenshot
2021-07-02 13_54_05-Greenshot1366×768 63.4 KB

9

Ive coded one corner here, please make use of the diagram in the previous post to undertstand how to do the other corners.
After this you may want to consider how to fill the shape, which is currently no possible as you are drawing with lines.
The following post should help with this.

I have a feeling this may be homework related so I’ll leave some challenges for you.

float x,y,w,h,r,x1,x2,y2,w2,h2;

void setup(){
  size(400,400);
  x = 50;
  y = 50;
  w = 200;
  h = 100;
  r = 10;
  x2 = x+r;
  y2 = y+r;
  w2 = w-r*2;
  h2 = h-r*2;
  
  background(0);
  stroke(255);
  //fill(0,50);
  noFill();
  line(x2,y2,x2+w2,y2);
  line(x2+w2,y2,x2+w2,y2+h2);
  line(x2+w2,y2+h2,x2,y2+h2);
  arc(x2+w2,y2+h2, r*2, r*2, 0, HALF_PI);
  line(x2,y2+h2,x2,y2);
  
  line(x+r,y,x+w-r,y);
  line(x+w,y+r,x+w,y+h-r);
  line(x+w-r,y+h,x+r,y+h);
  line(x,y+h-r,x,y+r);
  
  
};

void draw(){
  noLoop();
};

2021-07-02 14_22_24-sketch_210702i

10

Alright, thanks. Also, this isn’t homework, It’s just me being a perfectionist.

2 Likes
11

here is my attempt at it in processing.

image
image597×599 798 Bytes

Code 
int cx=300,cy=300,l1=100,l2=150,c=3;

void setup() {
  size(600,600);
}
void draw() {
  background(0);
  stroke(255);
  displayCorner(cx,cy,l1,l2,c, 15);
  if(frameCount%50==0) c++;
  c%=4;
}

void displayCorner(int x, int y, int ll, int ll2, int c, int rnd) {
  noFill();
  line(x+cos(c*HALF_PI)*rnd,y+sin(c*HALF_PI)*rnd,x+cos(c*HALF_PI)*ll,y+sin(c*HALF_PI)*ll);
  line(x+cos((c+1)*HALF_PI)*rnd,y+sin((c+1)*HALF_PI)*rnd,x+cos((c+1)*HALF_PI)*ll2,y+sin((c+1)*HALF_PI)*ll2);
  arc(x+cos((c+0.5)*HALF_PI)*rnd*sqrt(2),y+sin((c+0.5)*HALF_PI)*rnd*sqrt(2),rnd*2,rnd*2,(c+2)*HALF_PI,(c+3)*HALF_PI);
}
12

p5 version
image

Code 
let cx=200,cy=200,l1=100,l2=150,c=3;
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  displayCorner(cx,cy,l1,l2,c, 15);
  if(frameCount%50==0) c++;
  c%=4;
}

function displayCorner(x, y, ll, ll2, c, rnd) {
  noFill();
  line(x+cos(c*HALF_PI)*rnd,y+sin(c*HALF_PI)*rnd,x+cos(c*HALF_PI)*ll,y+sin(c*HALF_PI)*ll);
  line(x+cos((c+1)*HALF_PI)*rnd,y+sin((c+1)*HALF_PI)*rnd,x+cos((c+1)*HALF_PI)*ll2,y+sin((c+1)*HALF_PI)*ll2);
  arc(x+cos((c+0.5)*HALF_PI)*rnd*sqrt(2),y+sin((c+0.5)*HALF_PI)*rnd*sqrt(2),rnd*2,rnd*2,(c+2)*HALF_PI,(c+3)*HALF_PI);
}
1 Like
13

Some clarifications:
c=1 ==> |‾
c 2 ==> ‾‾‾|
c 3 ==> _ |
c 4 == |___

it tells you what direction the corner is pointing at

If you want to rotate it so it looks more like < add cos/sin(xyz+rot)

I took a look at your project. I think this should be of help (probably : P)
https://p5js.org/reference/#/p5/strokeCap
(strokeCap)

2 Likes