let canvas = null

let pg = null

​

let newLineX = 0

let newLineY = 0

​

let lines = []

​

const highlightColor = '#FF5757'

​

function setup() {

  canvas = createCanvas(400, 400)

  pg = createGraphics(width, height)

  generatePoint()

}

​

function draw() {

  background(220)

  // draw background

  pg.background(0)

  pg.stroke(255)

  for( let i = 0; i < lines.length; i++ ){

    const l = lines[i] 

    pg.line( l.x1, l.y1, l.x2, l.y2 )

  }

  image(pg, 0, 0, width, height)

  // new line  

  stroke(highlightColor)

  drawingContext.setLineDash([5,5])

  line( mouseX, mouseY, newLineX, newLineY )

}

​

​

function generatePoint () {

  newLineX = random( width )

  newLineY = random( height )

}

​

function keyPressed() {  

  // save as image

  if (key == 's' || key == 'S') {

    saveCanvas(pg, 'sketch', 'png')

  }else if (key == 'z' || key == 'Z') {

    lines.pop()

  }

}

​

function mousePressed(){

  lines.push({

    x1:newLineX,

    y1:newLineY,

    x2:mouseX,

    y2:mouseY

  })

  generatePoint()

  /*

  lines.push({

    x2:newLineX,

    y2:newLineY,

    x1:mouseX,

    y1:mouseY

  })

  */

}