​

let strokes = [];

​

let drawing = false;

let currentStroke = null;

let drawingShift = null;

​

function setup() {

  //noCanvas();

  noLoop();

}

function realSetup() {

  document.getElementById("span_awaiting_input").remove();

​

  createCanvas(800, 800);

  loop();

  started = true;

}

​

function draw() {

  tick();

  render();

}

​

function tick() {

  if (drawing) {

    let add = false;

    if (drawingShift != keyIsDown(SHIFT)) {

      drawingShift = !drawingShift;

      add = true;

    }

    else if (!drawingShift) {

      add = true;

    }

    if (add) {

      currentStroke.addMousePoint();

    }

  }

}

function render() {

  background(220);

  stroke(255,0,0);

  strokeWeight(3);

  strokes.forEach(_stroke => _stroke.render());

  if (drawing) {

    stroke(0,0,255);

    fill(0,0,255);

    if (drawingShift)

      currentStroke.addMousePoint(true);

    currentStroke.render();

    if (drawingShift)

      currentStroke.removeLastPoint();

    ellipse(mouseX, mouseY, 8, 8);

  }

}

​

function startStroke() {

  drawing = true;

  drawingShift = false;

  currentStroke = new Stroke();

  currentStroke.addMousePoint();

}

function stopStroke() {

  currentStroke.addMousePoint();

  strokes.push(currentStroke);

  drawing = false;

  drawingShift = null;

  currentStroke = null;

}

​

function mousePressed() {

  if (!started) {

    realSetup();

    return true;

  }

  if (mouseX < 0 || mouseX > width || mouseY < 0 || mouseY > height) {

    return true;

  }

  if (!drawing) {

    startStroke();

  }

  return false;

}

function mouseReleased() {

  let ret = false;

  if (mouseX < 0 || mouseX > width || mouseY < 0 || mouseY > height) {

    ret = true;

  }

  if (drawing) {

    stopStroke();

  }

  return ret;

}

function keyPressed() {

  if (keyCode === BACKSPACE) {

    strokes = [];

    return false;

  }

  return true;

}

​