p5 drawing

Two primatives: a line object and a circle object. The line goes from the center of one circle to the next. a line goes from one point to the next.

p5.js provides these primatives..

https://p5js.org/reference/#/p5/ellipse, https://p5js.org/reference/#/p5/line

Also add text:
https://p5js.org/reference/#/p5/text

Code:

function setup() {
  createCanvas(200, 200);
}

function draw() {
  ellipse(56, 45, 55, 55);
  line(30, 20, 85, 75);
  text("Hello", 40, 50, 10);
}
~

Code:

function setup() {
  createCanvas(400, 400);
}

function draw() {
 line(56, 45, 185, 175);
  ellipse(56, 45, 55, 55);
  text("Hello", 40, 50, 10);
  ellipse(185, 175, 55, 55);
  text("World", 170, 180, 10);
}

With variables:
var x = 56;
var y = 45;
var z = 185;
var q = 175;
var radius = 55;

function setup() {
  createCanvas(400, 400);
}

function draw() {
 line(x, y, z, q);
  ellipse(x , y, radius, radius);
  text("Hello", 40, 50, 10);
  ellipse(z, q, radius, radius);
  text("World", 170, 180, 10);
}

With arrays:

var nums = [[56, 45],[185, 175]];
var radius = 55;

function setup() {
  createCanvas(400, 400);
}

function draw() {
 line(nums[0][0], nums[0][1], nums[1][0], nums[1][1]);
  ellipse(nums[0][0], nums[0][1],radius, radius);
  text("Hello", 40, 50, 10);
  ellipse(nums[1][0], nums[1][1], radius, radius);
  text("World", 170, 180, 10);
}

With more arrays:

var nums = [[56, 45],[185, 175]];
var radius = 55;
var tw = 10;
var titles = ["Hello","World"];

function setup() {
  createCanvas(400, 400);
}

function draw() {
 line(nums[0][0], nums[0][1], nums[1][0], nums[1][1]);
  ellipse(nums[0][0], nums[0][1],radius, radius);
  text(titles[0], nums[0][0] - titles[0].length - tw, nums[0][1] + 0.5*tw, tw);
  ellipse(nums[1][0], nums[1][1], radius, radius);
  text(titles[1], nums[1][0] - titles[1].length - tw, nums[1][1] + 0.5*tw, tw);
}
~         

Code:

var nums = [[56, 45],[185, 175],[185, 45]];
var radius = 55;
var tw = 10;
var titles = ["Hello","World","!"];

function setup() {
  createCanvas(400, 400);
}

function draw() {
 line(nums[0][0], nums[0][1], nums[1][0], nums[1][1]);
  ellipse(nums[0][0], nums[0][1],radius, radius);
  text(titles[0], nums[0][0] - titles[0].length - tw, nums[0][1] + 0.5*tw, tw);
 
  line(nums[1][0],nums[1][1], nums[2][0], nums[2][1]);
  ellipse(nums[1][0], nums[1][1], radius, radius);
  text(titles[1], nums[1][0] - titles[1].length - tw, nums[1][1] + 0.5*tw, tw);

  ellipse(nums[2][0],nums[2][1], radius, radius);
  text(titles[2],nums[2][0] - titles[2].length - tw, nums[2][1] + 0.5*tw, tw);

//  line(nums[1][0],nums[1][1], nums[2][0], nums[2][1]);
}

or modify the code to draw the lines first:

var nums = [[56, 45],[185, 175],[185, 45]];
var radius = 55;
var tw = 10;
var titles = ["Hello","World","!"];

function setup() {
  createCanvas(400, 400);
}

function draw() {
 line(nums[0][0], nums[0][1], nums[1][0], nums[1][1]);
 line(nums[1][0],nums[1][1], nums[2][0], nums[2][1]);

  ellipse(nums[0][0], nums[0][1],radius, radius);
  text(titles[0], nums[0][0] - titles[0].length - tw, nums[0][1] + 0.5*tw, tw);
 
//  line(nums[1][0],nums[1][1], nums[2][0], nums[2][1]);
  ellipse(nums[1][0], nums[1][1], radius, radius);
  text(titles[1], nums[1][0] - titles[1].length - tw, nums[1][1] + 0.5*tw, tw);

  ellipse(nums[2][0],nums[2][1], radius, radius);
  text(titles[2],nums[2][0] - titles[2].length - tw, nums[2][1] + 0.5*tw, tw);

//  line(nums[1][0],nums[1][1], nums[2][0], nums[2][1]);
}