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

function rainbowBeads() {
	// find the hue, which is a number from 0 to 360
	const hue = (frameCount * 10) % 360
  
	// set the color and brush style
	const hsbaColor = color(`hsba(${hue}, 100%, 100%, 0.6)`)
	fill(hsbaColor)
	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)
}