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

function splatter() {
  // set the color and brush style
  stroke(frameCount % 255, 180, 255, 160)
  strokeWeight(4)

  // set the number of times we lerp the point in the for loop
  const lerps = 8

	// repeat the point with lerping
  for (let i = 0; i < lerps; i++) {

		// find lerped x and y coordinates of the point
    const x = lerp(mouseX, pmouseX, i / lerps + lerps)
    const y = lerp(mouseY, pmouseY, i / lerps + lerps)

		// draw a point
    point(x, y)
  }
}