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

**URL:** <https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010>\
**Category:** p5.js\
**Created:** [July 2, 2021, 7:38am UTC](https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010 "2021-07-02T07:38:24Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![alt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alt/32/10934_2.png) [@alt](https://discourse.processing.org/u/alt)\
**Post date:** [July 2, 2021, 7:38am UTC](https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010/1 "2021-07-02T07:38:24Z")

</div>

Something like this I mean:  
[unknown.png (discordapp.com)](https://cdn.discordapp.com/attachments/720596986793033759/860414319170813982/unknown.png)

How angles look in my code right now:  
[unknown.png (discordapp.com)](https://cdn.discordapp.com/attachments/720596986793033759/860414284004982814/unknown.png)

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](https://editor.p5js.org/IamRifki/sketches/ozXCkoPhF)

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [July 2, 2021, 11:47am UTC](https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010/2 "2021-07-02T11:47:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![alt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alt/32/10934_2.png) [@alt](https://discourse.processing.org/u/alt)\
**Post date:** [July 2, 2021, 12:33pm UTC](https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010/3 "2021-07-02T12:33:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 2, 2021, 12:42pm UTC](https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010/4 "2021-07-02T12:42:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![alt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alt/32/10934_2.png) [@alt](https://discourse.processing.org/u/alt)\
**Post date:** [July 2, 2021, 12:43pm UTC](https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010/5 "2021-07-02T12:43:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 2, 2021, 12:47pm UTC](https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010/6 "2021-07-02T12:47:54Z")

</div>

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](https://processing.org/reference/arc_.html)

---

<div class="post-metadata">

**Author:** ![alt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alt/32/10934_2.png) [@alt](https://discourse.processing.org/u/alt)\
**Post date:** [July 2, 2021, 12:51pm UTC](https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010/7 "2021-07-02T12:51:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 2, 2021, 12:56pm UTC](https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010/8 "2021-07-02T12:56:02Z")

</div>

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

 ![2021-07-02 13_54_05-Greenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/81aa0c7ab034384778ad318622eabaebff15adc9.jpeg)

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 2, 2021, 1:20pm UTC](https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010/9 "2021-07-02T13:20:01Z")

</div>

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.

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/39681d73b386a253d429060d50a21e1a89b2e53a.jpeg)

---

<div class="post-metadata">

**Author:** ![alt](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alt/32/10934_2.png) [@alt](https://discourse.processing.org/u/alt)\
**Post date:** [July 2, 2021, 1:26pm UTC](https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010/10 "2021-07-02T13:26:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [July 2, 2021, 2:52pm UTC](https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010/11 "2021-07-02T14:52:22Z")

</div>

here is my attempt at it in processing.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/ba591ac2ec743746876bf6bb981ef7a4b74f4b46.png)

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

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [July 2, 2021, 2:55pm UTC](https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010/12 "2021-07-02T14:55:54Z")

</div>

p5 version  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cc77148435cb5d42bd1e4d16ebd1922f2a80a621.png)

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

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [July 2, 2021, 2:59pm UTC](https://discourse.processing.org/t/how-can-i-make-90-degree-intersections-angles-more-arched/31010/13 "2021-07-02T14:59:22Z")

</div>

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](https://p5js.org/reference/#/p5/strokeCap)  
(strokeCap)