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

function toothpick() {
  // set the color and brush style
  fill(60, 180, 0, 150)
  noStroke()

  // move the origin (0,0) to the current mouse point
  translate(mouseX, mouseY)

  // find the angle of the direction the mouse is moving in
  // then rotate the canvas by that angle
  const angle = Math.atan2(mouseY - pmouseY, mouseX - pmouseX)
  rotate(angle)

  // set minumum width and height of the toothpick-shaped ellipse
	const minSize = 4
	
	// find the distance between current mouse point and previous mouse point
	const distance = dist(mouseX, mouseY, pmouseX, pmouseY)
	
	// draw the toothpick-shaped ellipse
	ellipse(0, 0, distance * 2 + minSize, minSize)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.