let bgColor = [255, 255, 255, 255];

​

let padding = 50;

​

let penSize = 10;

let penColor;

​

let colorPicker;

let submitBgBtn;

​

let showingBorders = true;

​

let inBounds;

let eraserOn = false;

​

let eyedropping = false;

​

let setupDone;

​

let invertedIcons;

let dropperCol = "";

​

let undo;

​

function setup() {

  createCanvas(650, 600);

  setupDone = false;

  invertedIcons = false;

  undo = new Undo(100);

  colorPicker = createColorPicker("black");

  colorPicker.style("onclick", "changeColor(penColor)");

  colorPicker.id("colorpicker");

  colorPicker.size(padding, padding);

  colorPicker.position(0, height - padding);

  setPen(hex_(bgColor));

  let eraserCheckbox = createCheckbox("Eraser", false);

  eraserCheckbox.size(padding, padding * 2);

  eraserCheckbox.position(0, padding);

  eraserCheckbox.changed(function() {

    eraserOn = this.checked();

  });

  background(bgColor);

  dropperCol = hex_(bgColor);

  print(dropperCol, invertColor(dropperCol));

  $("#eyedropperbutton").css('transition', 'background-color 0.2s');

  setupDone = true;

}

​

function subArray(arr, num) {

  //

  // let array = [5, 6, 7, 8];

  // print(subArray(array, 3)); -- [2, 3, 4, 5]

  //

  let newArr = [];

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

    newArr[i] = constrain(arr[i] - num, 0, 255);

  }

  return newArr;

}

​

function setOutsides(des) {

  if (typeof des === 'string' || des instanceof String)

    des = rgb(des);

  let avgBg = des[0]+des[1]+des[2] / 3;

  if (avgBg <= 64) { // dark color

    outsideColor[0] = des[0] + 24;

    outsideColor[1] = des[1] + 24;

    outsideColor[2] = des[2] + 24;

  } else if (avgBg > 64) { // not dark color

    outsideColor[0] = des[0] - 24;

    outsideColor[1] = des[1] - 24;

    outsideColor[2] = des[2] - 24;

  }

}

​

function setButtons(des) {

  if (typeof des === 'string' || des instanceof String)

    des = rgb(des);

  let newDes = [];

  let avgBg = (des[0]+des[1]+des[2]) / 3;

  if (avgBg < 128) { // dark color

    newDes[0] = constrain(des[0] + 48, 0, 255);

    newDes[1] = constrain(des[1] + 48, 0, 255);

    newDes[2] = constrain(des[2] + 48, 0, 255);

    newDes = hex_(newDes);

    $("button").css('background-color', newDes);

  } else { // bright color

    newDes[0] = constrain(des[0] - 48, 0, 255);

    newDes[1] = constrain(des[1] - 48, 0, 255);

    newDes[2] = constrain(des[2] - 48, 0, 255);

    $("button").css('background-color', hex_([newDes[0]-48,newDes[1]-48,newDes[2]-48]));

  }

}

​

function draw() {

  if (setupDone) {

    if (invertedIcons) {

      $("#eyedropperbutton").css('filter', 'invert(100%)');

      $("#eyedropperbutton").css('background-color', 'transparent');

      $("#undobutton").css('filter', 'invert(100%)');

      $("#redobutton").css('filter', 'invert(100%)');

    }

    inBounds = (mouseX < width - padding &&

              mouseX > padding) &&

             (mouseY < height - padding &&

              mouseY > padding);

​

    //drawing functionality

    strokeWeight(penSize);

    stroke(colorPicker.color());

      if (eraserOn) {

        stroke(bgColor);

      }

​

    if (mouseIsPressed) {

      if (inBounds) {

        if (eyedropping) {

          cursor('cell'); // not auto because we know mouse is bounded

          changeColor(get(mouseX, mouseY));

          $("#eyedropperbutton").css('background-color','transparent');

        } else {

          line(mouseX, mouseY, pmouseX, pmouseY);

        }

      }

    } else {

      if (inBounds) {

        if (eyedropping) {

          cursor('crosshair');

        } else {

          cursor('cell');

        }

      } else {

        cursor('auto');

      }

    }

​

    noStroke();

​

    // border rectangles

    if (showingBorders) {

      fill(outsideColor);

      rect(0, 0, padding, height);

      rect(0, 0, width, padding);

      rect(width - padding, 0, padding, height);

      rect(0, height - padding, width, padding);

    }

​

    // for preview circle in bottom right, 

    // maybe i'll change this later to just an outlined circle

    // around the cursor's position

​

    fill(colorPicker.color());

    circle((width - (padding / 20) - padding / 2),

      (height - (padding / 20) - padding / 2),

      (penSize));

  }

}

function rgb(hexstring) {

  if (hexstring[0] === "#") {

    hexstring = hexstring.substr(1);

  }

  let r, g, b;

  return([parseInt(hexstring[0] + hexstring[1], 16), parseInt(hexstring[2] + hexstring[3], 16), parseInt(hexstring[4] + hexstring[5], 16)]);

}

​

function hex_(r,g,b) {

    if (g !== undefined)

        return "#" + Number(0x1000000 + r*0x10000 + g*0x100 + b).toString(16).substring(1);

    else

        return "#" + Number(0x1000000 + r[0]*0x10000 + r[1]*0x100 + r[2]).toString(16).substring(1);

}

​

function changeColor(color) {

  colorPicker.value(hex_(color[0],color[1],color[2]));

}

​

function clamp(val, mini, maxi) {

  return min(max(val, mini), maxi);

}

​

//changing penSize

function mouseWheel(event) {

  penSize -= event.delta / 5;

  penSize = clamp(penSize, 5, padding);

}

​

function mouseReleased() {

  undo.takeSnapshot();

  if (eyedropping) {

    eyedropping = false;

  }

}

​

function keyTyped() {

  if (key === 'f') {

    flood_fill(mouseX, mouseY, get(mouseX, mouseY), colorPicker.color());

  }

}

​

function flood_fill(posx, posy, target, color) {

  loadPixels();

  if (posx + posy < 2 || get(posx, posy) == color) return;

  if (get(posx, posy) != target) return;

  set(posx, posy, color);

  flood_fill(posx + 1, posy, color);

  flood_fill(posx - 1, posy, color);

  flood_fill(posx, posy + 1, color);

  flood_fill(posx, posy - 1, color);

  updatePixels();

}

​

function eyeDrop() {

  eyedropping = true;

  cursor("crosshair");

  if (!invertedIcons) {

    $("#eyedropperbutton").css('background-color', dropperCol);

  } else {

    $("#eyedropperbutton").css('background-color', invertColor(dropperCol));

  }

}

​

function saveArt() {

  save();

}

​

function resetArt() {

  background(bgColor);

}

​

function getBg() {

  return bgColor;

}

​

function setBg(desColor) {

  if (typeof desColor === 'string' || desColor instanceof String) {

    bgColor = rgb(desColor);

  }

  bgColor = desColor;

}

​

function invertColor(hexColor) {

​

  let rgb_ = rgb(hexColor);

  let r = rgb_[0];

  let g = rgb_[1];

  let b = rgb_[2];

  let invertedColor = [255 - r, 255 - g, 255 - b];

  return hex_(invertedColor);

}

​

function grayScale(hexColor) {

  let rgb_ = rgb(hexColor);

  let r = rgb_[0];

  let g = rgb_[1];

  let b = rgb_[2];

  let avgC = round((r + g + b) / 3);

  avgC = round(avgC / 255) * 255;

  let grayScaleColor = [avgC, avgC, avgC];

  return hex_(grayScaleColor);

}

​

function setPen(desColor) {

  if (!setupDone) {

    if (rgb(grayScale(invertColor(desColor)))[0] > 128) {

      invertedIcons = true;

    } else {

      invertedIcons = false;

    }

    colorPicker.value(grayScale(invertColor(desColor)));

  }

}

​

function undoline() {

  undo.undo();

}

​

function redoline() {

  undo.redo();

}