//

let circlePath

​

function setup() {

  let canvas = createCanvas(400, 400);

  paper.setup(canvas);

​

  circlePath = new paper.Path.Circle({

    center: [width / 2, height / 2],

    radius: 50,

    fillColor: 'black'

  });

}

​

function draw() {

  background(255)

  fill(0)

​

  let mouseOverSegment = closestSegment()

  moveHandle(mouseOverSegment)

​

  for (let seg of circlePath.segments) {

    drawSegment(seg, mouseOverSegment === seg)

  }

​

  fill('black')

  stroke('black')

  PaperUtils.drawShape(circlePath)

}

​

function moveHandle(segment) {

  if (mouseIsPressed) {

    segment.handleIn.x = mouseX - segment.point.x

    segment.handleIn.y = mouseY - segment.point.y

  }

}

​

function drawSegment(seg, isMousedOver) {

  let handleX = seg.point.x + seg.handleIn.x

  let handleY = seg.point.y + seg.handleIn.y

​

  if (isMousedOver) {

    fill('teal')

    stroke('teal')

  } else {

    fill('black')

    stroke('black')

  }

​

  line(seg.point.x, seg.point.y, handleX, handleY)

  ellipse(handleX, handleY, 5)

}

​

function closestSegment() {

  let closestSegment = null

  let closestDistance = Infinity

  let mousePt = {

    x: mouseX,

    y: mouseY

  }

​

  for (let seg of circlePath.segments) {

    let handlePt = {

      x: seg.point.x + seg.handleIn.x,

      y: seg.point.y + seg.handleIn.y

    }

​

    let d = dist(mousePt.x, mousePt.y, handlePt.x, handlePt.y)

    if (d < closestDistance) {

      closestSegment = seg

      closestDistance = d

    }

  }

​

  return closestSegment

}