Connecting to points with an arc

p5.js Coding Questions
1

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.

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

  }
2

Hello @cristiano_b ,

Example based on your code:

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.

:)

3

Thank you @glv,

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

4

Hello,

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

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

Vector approach is always fun!

:)

5

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

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

}
1 Like
6

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

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

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).
I’m trying to develop something on that line but a little more usable for certain training activities.

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

2 Likes