<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)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.