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

function fountainPen() {
  // set the color and brush style
  stroke(0, 0, 0, 255)
  strokeWeight(1)
	const width = 5

  // set the number of times we lerp the line in the for loop
  const lerps = 16

	// repeat the slanted line with lerping
  for (let i = 0; i <= lerps - 1; i++) {

		// find the lerped x and y coordinates between the mouse points
    const x = lerp(mouseX, pmouseX, i / lerps)
    const y = lerp(mouseY, pmouseY, i / lerps)

		// draw a slanted line
    line(x - width, y - width, x + width, y + width)
  }
}