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

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

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

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

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

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.

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

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

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

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();
};
``````

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

2 Likes

here is my attempt at it in processing.

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);
}
``````

p5 version

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

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