let ps;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  radius = 8;

​

  ps = [];

  ps.push({

    x: random(radius, width - radius),

    y: random(radius, height - radius),

    vx: random(-1, 1),

    vy: random(-1, 1),

  });

​

  ps.push({

    x: random(radius, width - radius),

    y: random(radius, height - radius),

    vx: random(-3, 3),

    vy: 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.x < radius || p.x > width - radius) {

      p.vx *= -1;

    }

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

      p.vy *= -1;

    }

    p.x += p.vx;

    p.y += p.vy;

​

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

  }

​

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

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

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

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

​

  // using p5js function

  let p5jsDist = dist(ps[1].x, ps[1].y, ps[0].x, ps[0].y);

​

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

  pop();

}

​