Bezier drawing tool - OpenProcessing

mySketch
Value
xxxxxxxxxx
 
let paths
let addPath = true
let hoveredPoint = null
let grabbedPoint = null
let selectedPath = -1
let output
let instructions
const keys = {}
​
const activeStrokeColor = '#E1E'
const grabbedStrokeColor = '#1DD'
​
function setup() {
  createCanvas(windowWidth, windowHeight)
  paths = new Value([])
  output = createElement('textarea')
  output.position(10, 10)
  output.style('width', '200px')
  output.style('height', '200px')
  output.mousePressed((e) => e.stopPropagation())
  output.mouseReleased((e) => e.stopPropagation())
  output.mouseMoved((e) => e.stopPropagation())
  
  instructions = createP()
  instructions.position(10, 210)
  instructions.style('width', '200px')
  instructions.style('height', '200px')
  instructions.html(`Click to add new points to a path. Click and drag to add and set tangents.<br /><br />
Hit ESC to finish a path.<br /><br />
When not adding to a path, click and drag existing points to modify them. Hold SHIFT to modify one side of a tangent asymmetrically.<br /><br />
The regular undo/redo shortcuts should work!`)
}
​
function windowResized() {
  resizeCanvas(windowWidth, windowHeight)
}
​
function draw() {
  background(255)
  translate(width/2, height/2)
  
  noFill()
  strokeWeight(1)
  for (const [pathIdx, path] of paths.value.entries()) {
    stroke(0)
    beginShape()
    for (let i = 0; i < path.length; i++) {
      const prev = path[i-1]
      const curr = path[i]
      if (prev) {
        const prevTan = prev.next || prev.pt
        const currTan = curr.prev || curr.pt
        bezierVertex(
          prevTan.x, prevTan.y,
          currTan.x, currTan.y,
          curr.pt.x, curr.pt.y
        )
      } else {
        vertex(curr.pt.x, curr.pt.y)
      }
    }
    endShape()
    
    if (pathIdx !== selectedPath && (!hoveredPoint || pathIdx !== hoveredPoint.path)) continue
    
    stroke(activeStrokeColor)
    for (const pt of path) {
      beginShape()
      if (pt.prev) vertex(pt.prev.x, pt.prev.y)
      vertex(pt.pt.x, pt.pt.y)
      if (pt.next) vertex(pt.next.x, pt.next.y)
      endShape()
    }
    const isHovered = (ptIdx, key = 'pt') => {
      return hoveredPoint && hoveredPoint.pt === ptIdx && hoveredPoint.key === key
    }
    for (const [ptIdx, pt] of path.entries()) {
      fill(isHovered(ptIdx) ? grabbedStrokeColor : activeStrokeColor)
      circle(pt.pt.x, pt.pt.y, 10)
      fill('white')
      if (pt.prev) {
        stroke(isHovered(ptIdx, 'prev') ? grabbedStrokeColor : activeStrokeColor)
        circle(pt.prev.x, pt.prev.y, 10)
      }
      if (pt.next) {
        stroke(isHovered(ptIdx, 'next') ? grabbedStrokeColor : activeStrokeColor)
        circle(pt.next.x, pt.next.y, 10)
      }
    }
  }
}
​
function getPt() {
  return createVector(mouseX - width/2, mouseY - height/2)
}
​
function mousePressed() {
  if (hoveredPoint) {
    const pt = paths.value[hoveredPoint.path][hoveredPoint.pt][hoveredPoint.key]
    hoveredPoint = {
      ...hoveredPoint,
      offset: getPt().sub(pt),
    }
    grabbedPoint = hoveredPoint
  } else if (addPath) {
    selectedPath = paths.value.length
    paths.set([ ...paths.value, [{ pt: getPt() }] ])
    addPath = false
  } else {
    const [lastPath] = paths.value.slice(-1) || []
    paths.set([
      ...paths.value.slice(0, -1),
      [
        ...(lastPath || []),
        { pt: getPt() },
      ],
    ])
  }
}
​
function mouseMoved(e) {
  updateModifiers(e)
  
  if (grabbedPoint) {
    hoveredPoint = grabbedPoint
  } else if (!addPath) {
    hoveredPoint = null
  } else {
    let minDist = Infinity
    let minPt = null
    let minPath = -1
    const mouse = createVector(mouseX - width/2, mouseY - height/2)
    const testPt = (pt, pathIdx, ptIdx, key = 'pt') => {
      const dist = mouse.dist(pt)
      if (dist < minDist) {
        minDist = dist
        minPt = { path: pathIdx, pt: ptIdx, key }
      }
    }
    for (const [i, path] of paths.value.entries()) {
      for (const [j, pt] of path.entries()) {
        testPt(pt.pt, i, j)
        if (pt.prev) testPt(pt.prev, i, j, 'prev')
        if (pt.next) testPt(pt.next, i, j, 'next')
      }
    }
    if (minDist < 50) {
      hoveredPoint = minPt
    } else {
      hoveredPoint = null
    }
  }
}
​
function mouseDragged() {
  if (grabbedPoint) {
    const newPaths = [...paths.value]
    newPaths[grabbedPoint.path] = [...newPaths[grabbedPoint.path]]
    newPaths[grabbedPoint.path][grabbedPoint.pt] = { ...newPaths[grabbedPoint.path][grabbedPoint.pt] }
    const newPt = newPaths[grabbedPoint.path][grabbedPoint.pt]
    const offset = getPt().add(grabbedPoint.offset).sub(newPt[grabbedPoint.key])
    if (grabbedPoint.key === 'pt') {
      if (newPt.prev) newPt.prev = newPt.prev.copy().add(offset)
      if (newPt.next) newPt.next = newPt.next.copy().add(offset)
      newPt.pt = newPt.pt.copy().add(offset)
    } else {
      const otherKey = grabbedPoint.key === 'prev' ? 'next' : 'prev'
      newPt[grabbedPoint.key] = newPt[grabbedPoint.key].copy().add(offset)
      if (!keyIsDown(SHIFT)) {
        newPt[otherKey] = newPt.pt.copy().sub(newPt[grabbedPoint.key].copy().sub(newPt.pt))
      }
    }
    paths.set(newPaths)
  } else {
    if (paths.isCommitted) return
    const [lastPath] = paths.value.slice(-1)
    const [lastPt] = lastPath.slice(-1)
    const tangent = getPt().sub(lastPt.pt)
    paths.set([
      ...paths.value.slice(0, -1),
      [
        ...lastPath.slice(0, -1),
        {
          pt: lastPt.pt,
          next: lastPt.pt.copy().add(tangent),
          prev: lastPt.pt.copy().sub(tangent),
        },
      ]
    ])
  }
}
​
function mouseReleased() {
  if (!paths.isCommitted) {
    paths.commit()
    output.html(toP5())
  }
  if (grabbedPoint) {
    grabbedPoint = null
  }
}
​
function keyReleased(e) {
  keys[e.key] = false
  updateModifiers(e)
}
​
document.addEventListener('keydown', function(e) {
  const handleEvent = () => {
    e.stopPropagation()
    e.preventDefault()
  }
  updateModifiers(e)
  if (e.key === 'z' && (keys.Control || keys.Meta)) {
    if (keys.Shift) {
      paths.redo()
      output.html(toP5())
    } else {
      paths.undo()
      output.html(toP5())
    }
    handleEvent()
  }
  if (e.key === 'y' && (keys.Control || keys.Meta)) {
    paths.redo()
    output.html(toP5())
    handleEvent()
  }
  if (e.key === 'Enter' || e.key === 'Escape') {
    selectedPath = -1
    addPath = true
    handleEvent()
  }
})
​
function updateModifiers(e) {
  keys.Shift = !!e.shiftKey
  keys.Meta = !!e.metaKey
  keys.Control = !!e.ctrlKey
}
​
function toP5() {
  let lines = []
  for (const path of paths.value) {
    lines.push('beginShape();')
    for (let i = 0; i < path.length; i++) {
      const prev = path[i-1]
      const curr = path[i]
      if (prev) {
        const prevTan = prev.next || prev.pt
        const currTan = curr.prev || curr.pt
        lines.push(`bezierVertex(
  ${Math.round(prevTan.x * 100) / 100}, ${Math.round(prevTan.y * 100) / 100},
  ${Math.round(currTan.x * 100) / 100}, ${Math.round(currTan.y * 100) / 100},
  ${Math.round(curr.pt.x * 100) / 100}, ${Math.round(curr.pt.y * 100) / 100}
);`)
      } else {
        lines.push(`vertex(${Math.round(curr.pt.x * 100) / 100}, ${Math.round(curr.pt.y * 100) / 100});`)
      }
    }
    lines.push('endShape();')
  }
  return lines.join('\n')
}