let ps;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  radius = 8;

​

  ps = [];

  ps.push({

    loc: createVector(

      random(radius, width - radius),

      random(radius, height - radius)

    ),

    vel: createVector(random(-1, 1), random(-1, 1)),

  });

​

  ps.push({

    loc: createVector(

      random(radius, width - radius),

      random(radius, height - radius)

    ),

    vel: createVector(random(-3, 3), random(-3, 3)),

  });

}

​

function draw() {

  background(220, 20, 120);

​

  fill(255);

  stroke(0);

  strokeWeight(1);

  for (let i = 0; i < ps.length; i++) {

    let p = ps[i];

    if (p.loc.x < radius || p.loc.x > width - radius) {

      p.vel.x *= -1;

    }

    if (p.loc.y < radius || p.loc.y > height - radius) {

      p.vel.y *= -1;

    }

​

    p.loc.add(p.vel);

​

    ellipse(p.loc.x, p.loc.y, 2 * radius, 2 * radius);

  }

​

  // manually calculate sqrt(x^2 + y^2)

  let dpx = ps[1].loc.x - ps[0].loc.x;

  let dpy = ps[1].loc.y - ps[0].loc.y;

  let mDist = sqrt(dpx * dpx + dpy * dpy);

​

  // using p5js function

  let vecDist = ps[0].loc.dist(ps[1].loc);

​

  noFill();

​

  push();

  translate(width / 2, height / 2);

​

  stroke(250, 215, 0);

  strokeWeight(10);

  ellipse(0, 0, mDist, mDist);

​

  stroke(0);

  strokeWeight(2);

  ellipse(0, 0, vecDist, vecDist);

  pop();

}

​