<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) {
    beads()
  }
}

function beads() {
  // set the color and brush style
  fill(185, 83, 213, 180)
  noStroke()

  // 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

  // draw a circle at the midpoint, with distance as its diameter
  circle(midX, midY, distance)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.