# Connecting to points with an arc

**URL:** <https://discourse.processing.org/t/connecting-to-points-with-an-arc/40009>\
**Category:** Coding Questions\
**Created:** [December 3, 2022, 2:53pm UTC](https://discourse.processing.org/t/connecting-to-points-with-an-arc/40009 "2022-12-03T14:53:07Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![cristiano\_b](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cristiano_b/32/17396_2.png) [@cristiano\_b](https://discourse.processing.org/u/cristiano_b)\
**Post date:** [December 3, 2022, 2:53pm UTC](https://discourse.processing.org/t/connecting-to-points-with-an-arc/40009/1 "2022-12-03T14:53:07Z")

</div>

Ok, this is probably easy but I can’t find a way.  
How can I connect two random points with an arc?

The code below shows the final result, but I’d like to do it calculating the arc starting from any position of the two circles.

Thanks for your help.

```auto
function setup() {
    createCanvas(600, 600);
  }
  
  function draw() {
    angleMode(DEGREES);
    background(0);
    stroke(255);
    noFill();
  
    let x1 = 170;
    let y1 = 170;
    let r1 = 30;

    let x2 = 400;
    let y2 = 400;
    let r2 = 50;
  
    circle(x1, y1, r1);
    circle(x2, y2, r2);
  
    let d = dist(x1, y1, x2, y2);
    let xm = (x1+x2)/2;
    let ym = (y1+y2)/2;

    arc(xm, ym, d, d, -135, 45);

  }

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 3, 2022, 3:18pm UTC](https://discourse.processing.org/t/connecting-to-points-with-an-arc/40009/2 "2022-12-03T15:18:13Z")

</div>

Hello @cristiano_b ,

Example based on your code:

```auto
let x1 = 170;
let y1 = 170;
let r1 = 30;

let x2 = 400;
let y2 = 400;
let r2 = 30;

function setup() {
    createCanvas(600, 600);
  }
  
  function draw() {
    angleMode(DEGREES);
    background(0);
    stroke(255);
    noFill();
  
    circle(x1, y1, r1);
    circle(x2, y2, r2);
  
    let d = dist(x1, y1, x2, y2);
    let xm = (x1+x2)/2;
    let ym = (y1+y2)/2;
    
    //let a1 = -135;
    //let a2 = 45;
    
    let a1 = atan2(?); // For you to complete.
    let a2 = atan2(?); // For you to complete.

    arc(xm, ym, d, d, a1, a2);
    }
    
function keyPressed()
  {
  x2 = random(width/2, width);
  y2 = random(height/2, height);
  }

```

The above works!

You will have to look up the `atan2()` reference and complete the code.

`:)`

---

<div class="post-metadata">

**Author:** ![cristiano\_b](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cristiano_b/32/17396_2.png) [@cristiano\_b](https://discourse.processing.org/u/cristiano_b)\
**Post date:** [December 3, 2022, 4:23pm UTC](https://discourse.processing.org/t/connecting-to-points-with-an-arc/40009/3 "2022-12-03T16:23:35Z")

</div>

Thank you @glv,

atan2() helps a little but not enough … I probably miss something.  
I’m trying with vectors …

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 3, 2022, 7:27pm UTC](https://discourse.processing.org/t/connecting-to-points-with-an-arc/40009/4 "2022-12-03T19:27:34Z")

</div>

Hello,

This is what I did in the code example I provided:

```auto
let a1 = atan2(ym-y1, xm-x1);
let a2 = atan2(ym-y2, xm-x2);

```

Vector approach is always fun!

`:)`

---

<div class="post-metadata">

**Author:** ![cristiano\_b](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cristiano_b/32/17396_2.png) [@cristiano\_b](https://discourse.processing.org/u/cristiano_b)\
**Post date:** [December 4, 2022, 4:03pm UTC](https://discourse.processing.org/t/connecting-to-points-with-an-arc/40009/5 "2022-12-04T16:03:10Z")

</div>

Ah … right. That is much better. Thank you.  
I have a lot to learn 🙂  
Here is my solution …

```auto
let x1;
let y1;
let r1 = 30;

let x2;
let y2;
let r2 = 80;

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  x1 = random(100, windowWidth - 100);
  y1 = random(100, windowHeight - 100);

  x2 = random(100, windowWidth - 100);
  y2 = random(100, windowHeight - 100);

}

function draw() {
  
  angleMode(DEGREES);
  background(0);
  stroke(255);
  noFill();

    // Calculates the discance between the 2 circles
    let d = dist(x1, y1, x2, y2);

    // Calculates the mid point on the distance
    let xm = (x1+x2)/2;
    let ym = (y1+y2)/2;

    circle(xm, ym, 5);

    // Calculates the necessary rotation of the arc
    let dx = x2 - x1;
    let dy = y2 - y1;
    let ang = Math.atan2(dy, dx) * 180 / Math.PI;

    push();
      translate(xm, ym);
      rotate(ang);
      arc(0, 0, d, d, 0, 180);
    pop();

    push();
      fill(0);
      circle(x1, y1, r1);
      circle(x2, y2, r2);
    pop();

}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 4, 2022, 11:46pm UTC](https://discourse.processing.org/t/connecting-to-points-with-an-arc/40009/6 "2022-12-04T23:46:43Z")

</div>

> [@cristiano\_b](#):
>
> I have a lot to learn 🙂

Well, I did some small re-arrangements on your final code. Take a look: 👓

```javascript
// https://Discourse.Processing.org/t/connecting-to-points-with-an-arc/40009/6
// 2022-Dec-04

'use strict';

const DIAM_0 = 5, DIAM_1 = 30, DIAM_2 = 80, OFFSET = 100;
let bg;

function setup() {
  createCanvas(windowWidth, windowHeight).mousePressed(redraw);
  noLoop();
  stroke(255).fill(0).angleMode(DEGREES);
  bg = color(0);
}

function draw() {
  const
    // Coordinates for the circles:
    x1 = random(OFFSET, width - OFFSET),
    y1 = random(OFFSET, height - OFFSET),

    x2 = random(OFFSET, width - OFFSET),
    y2 = random(OFFSET, height - OFFSET),
    
    // Calculates the discance between the 2 circles:
    d = dist(x1, y1, x2, y2),

    // Calculates the mid point on the distance:
    xm = x1 + x2 >> 1,
    ym = y1 + y2 >> 1,

    // Calculates the necessary rotation of the arc:
    dx = x2 - x1,
    dy = y2 - y1,
    ang = atan2(dy, dx) * RAD_TO_DEG;

  background(bg);

  push();
  noFill().circle(xm, ym, DIAM_0);
  translate(xm, ym).rotate(ang);
  arc(0, 0, d, d, 0, 180);
  pop();

  circle(x1, y1, DIAM_1).circle(x2, y2, DIAM_2);
}

```

---

<div class="post-metadata">

**Author:** ![cristiano\_b](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cristiano_b/32/17396_2.png) [@cristiano\_b](https://discourse.processing.org/u/cristiano_b)\
**Post date:** [December 5, 2022, 10:55am UTC](https://discourse.processing.org/t/connecting-to-points-with-an-arc/40009/7 "2022-12-05T10:55:25Z")

</div>

Uhh … nice. Thank you.  
This is just a little piece of a much bigger project.  
You may know Loopy ([LOOPY: a tool for thinking in systems](https://ncase.me/loopy/)).  
I’m trying to develop something on that line but a little more usable for certain training activities.

It will be a loooooooooong journey 😉 not being a programmer at all … but with the help of this community … maybe … who knows.