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

function hatching() {
  // set the color and brush style
  stroke(15, 15, 255, 220)
  strokeWeight(1)

  // calculate the speed of the mouse
  let speed = abs(mouseX - pmouseX) + abs(mouseY - pmouseY)

  // make a vector by inverting X and Y values
  const vector = createVector(mouseY - pmouseY, mouseX - pmouseX)
  
  // set the vector magnitude (the line length) based on the mouse speed
  vector.setMag(speed / 2)
  
  // set the number of times we lerp the line
  const lerps = 3

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

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

		// draw a line
    line(x - vector.x, y - vector.y, x + vector.x, y + vector.y)
  }
}