V5 Perpendicular lines

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0);

}

​

const colours = [

  "#ff4242",

  "#f4fad2",

  "#d4ee5e",

  "#e1edb9",

  "#f0f2eb"

]

​

function draw() {

}

​

function mouseDragged() {

  drawLine(pmouseX, pmouseY, mouseX, mouseY)

}

​

function drawLine(pX, pY, cX, cY){

  const prev = createVector(pX, pY)

  const current = createVector(cX, cY)

  const delta = p5.Vector.sub(current, prev)

  const angle = delta.heading()

  const magnitude = delta.mag()

  //colour calc

  const c1 = color("#ff4242")

  const c2 = color("#d4ee5e")

  const frac = map(magnitude, 20, 100, 0, 1, true)

  stroke(lerpColor(c1, c2, frac))

  push()

  translate(pX, pY)

  rotate(angle)

  strokeWeight(magnitude/3)

  line(0, magnitude/2, 0, -magnitude/2)

  pop()

}