<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

body {
  margin: 0;
  overflow: hidden;
}

function setup() {
  createCanvas(windowWidth, windowHeight)
  background('#fbf8f3')
}

// prevent touch gestures from dragging the page on touchscreens
function touchMoved() {
  return false
}

function draw() {
  if (mouseIsPressed) {
    wiggle()
  }
}

function wiggle() {
  // set the color and brush style
  stroke(255, 120, 0, 255)
  strokeWeight(2)
  noFill()

  // find the distance between the current and previous mouse points
  const distance = dist(mouseX, mouseY, pmouseX, pmouseY)

  // find the midpoint between the current and previous mouse points
  const midX = (mouseX + pmouseX) / 2
  const midY = (mouseY + pmouseY) / 2

  // find the angle of the direction the mouse is moving in
  const angle = Math.atan2(mouseY - pmouseY, mouseX - pmouseX)

  // find which way to flip the arc
  const flip = (frameCount % 2) * PI

  // draw the arc as a half circle 
  arc(midX, midY, distance, distance, angle + flip, angle + PI + flip)
}