// a pixel art editor inspired by

// street artist stork

// 2022-01-17, @jmutterer

​

let c;

let s = 12;

let rs;

let im = [];

let reds = [];

let greens = [];

let blues = [];

let cs = [

  "#e0e0e0",

  "#ff0000",

  "#000000",

  "#ffffff",

  "#ffdd00",

  "#8bbb81",

  "#c0c0c0",

  "#e4dbc5",

  "#552c2a",

];

let help, inp;

let helpVisible;

let saveImage;

let title, author;

let imP="";

let params;

​

function setup() {

  // doesn't work for some reason

  params = getURLParams();

  helpVisible = true;

  rs = 0;

  title = "";

  author = "";

  createCanvas(640, 480);

  pixelDensity(1);

  c = 0;

  for (i = 0; i < 45 * 30; i++) im[i] = -1;

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

    reds[i] = red(color(cs[i]));

    greens[i] = green(color(cs[i]));

    blues[i] = blue(color(cs[i]));

  }

  rslider = createSlider(0, 255);

  rslider.position(0, height / 2);

  rslider.style("width", "50px");

​

  gslider = createSlider(0, 255);

  gslider.position(0, height / 2 + 15);

  gslider.style("width", "50px");

​

  bslider = createSlider(0, 255);

  bslider.position(0, height / 2 + 30);

  bslider.style("width", "50px");

​

  updateSliders(c);

  hideSliders(true);

  help = createDiv("<- available color tiles<br><-<br>...");

  help.style("font-size", "25px");

  help.style("font-family", "sans-serif");

  help.position(30, 0);

  hideSliders(false);

​

  help2 = createDiv("<- adust color");

  help2.style("font-size", "25px");

  help2.style("font-family", "sans-serif");

  help2.position(60, 245);

​

  help3 = createDiv("drawing area");

  help3.style("font-size", "45px");

  help3.style("font-family", "sans-serif");

  help3.style("transform", "rotateZ(-45deg)");

  help3.position(200, 200);

​

  help4 = createDiv(

    "x: clear all<br>r: randomize concrete<br>s: save<br>?: toggle help"

  );

  help4.style("font-size", "25px");

  help4.style("font-family", "sans-serif");

  help4.position(10, 355);

​

  toggleHelp();

  saveImage = false;

  // get image from URL

  // https://editor.p5js.org/jmutterer/full/nQpDKQZ_0

}

​

function draw() {

  background(cs[0]);

  text(params.cImage,10,10);

  randomSeed(rs);

​

  for (i = 0; i < width * height; i = i + random(1000)) {

    fill(64 + random(64));

    noStroke();

    if (random(10) < 2) ellipse(i % width, i / height, random(5), random(3));

  }

​

  cs[c + 1] = color(rslider.value(), gslider.value(), bslider.value());

  if (!saveImage)

    for (i = 0; i < 8; i++) {

      strokeWeight(0.5);

      stroke(0);

      if (i == c) {

        strokeWeight(3);

        stroke(255);

      }

      fill(cs[i + 1]);

      rect(5, 5 + 30 * i, 20, 20);

    }

  fill(128);

  strokeWeight(0);

  textAlign("right", "bottom");

  textFont("Helvetica");

  textSize(14);

  text("storkify@ibmp", width - 5, height - 5);

  strokeWeight(0.5);

​

  if (isDrawingArea() && !saveImage) {

    noFill();

    stroke("white");

    for (x = 0; x < 43; x++)

      for (y = 0; y <= 30; y++)

        rect(width / 10 + x * s, height / 10 + y * s, s, s);

​

    stroke("red");

    xm = floor((mouseX - width / 10) / s);

    ym = floor((mouseY - height / 10) / s);

    rect(width / 10 + xm * s, height / 10 + ym * s, s, s);

    //hideSliders(true);

  }

  for (

    i = 0;

    i < 44 * 30 + 13;

    i++ // why??????

  )

    if (im[i] != -1) {

      stroke("gray");

      fill(cs[im[floor(i / 43) * 43 + (i % 43)]]);

      rect(width / 10 + (i % 43) * s, height / 10 + floor(i / 43) * s, s, s, 1);

    }

  if (!helpVisible && !saveImage) drawQuestionmark();

  /*

  textAlign(CENTER,TOP);

  noStroke();

  fill(0);

  textSize(30);

  text(title,width/2,9*height/10);

  */

  if (saveImage) {

    saveCanvas("Storkify", "png");

    saveImage = false;

  }

}

function mousePressed() {

  helpVisible = true;

  toggleHelp();

  if (isDrawingArea()) {

    xm = floor((mouseX - width / 10) / s);

    ym = floor((mouseY - height / 10) / s);

    cc = im[ym * 43 + xm];

    if (cc==-1)im[ym * 43 + xm] = c+1;

    else im[ym * 43 + xm] = -1;

  } else if (isColorTilesArea()) {

    c = floor(mouseY / (height / 16));

    updateSliders(c);

    hideSliders(false);

  } else if (isQuestionmark()) {

    toggleHelp();

  }

}

function touchStarted() {

  helpVisible = true;

  toggleHelp();

  if (isDrawingArea()) {

    xm = floor((mouseX - width / 10) / s);

    ym = floor((mouseY - height / 10) / s);

    cc = im[ym * 43 + xm];

    if (cc==-1)im[ym * 43 + xm] = c+1;

    else im[ym * 43 + xm] = -1;

  } else if (isColorTilesArea()) {

    c = floor(mouseY / (height / 16));

    updateSliders(c);

    hideSliders(false);

  } else if (isQuestionmark()) {

    toggleHelp();

  }

}

function mouseDragged() {

  if (isDrawingArea()) {

    xm = floor((mouseX - width / 10) / s);

    ym = floor((mouseY - height / 10) / s);

    cc = im[ym * 43 + xm];

    im[ym * 43 + xm] = c + 1;

  }

}

function isDrawingArea() {

  return (

    mouseX > width / 10 &&

    mouseX < (9 * width) / 10 &&

    mouseY > height / 10 &&

    mouseY < (9 * height) / 10

  );

}

function isQuestionmark() {

  return mouseX < width / 20 && mouseY > (9 * height) / 10;

}

function isColorTilesArea() {

  return mouseX < width / 10 && mouseY < height / 2;

}

function updateSliders(col) {

  rslider.value(red(color(cs[c + 1])));

  gslider.value(green(color(cs[c + 1])));

  bslider.value(blue(color(cs[c + 1])));

}

function hideSliders(hide) {

  if (hide) {

    rslider.hide();

    gslider.hide();

    bslider.hide();

  } else {

    rslider.show();

    gslider.show();

    bslider.show();

  }

}

function keyTyped() {

  if (key === "x") reset();

  else if (key === "r") rs++;

  else if (key === "d") {

    /*

    let cImage = LZString.compressToBase64(im.join());

    let cReds = LZString.compressToBase64(reds.join());

    let cGreens = LZString.compressToBase64(greens.join());

    let cBlues = LZString.compressToBase64(blues.join());

    // let sUrl = getURL();

    let sUrl = "https://editor.p5js.org/jmutterer/full/nQpDKQZ_0";

    sUrl = sUrl + "?cImage=" + cImage;

    sUrl = sUrl + "&cReds=" + cReds;

    sUrl = sUrl + "&cGreens=" + cGreens;

    sUrl = sUrl + "&cBlues="+ cBlues;

    print(sUrl);

    */

  } else if (key === "s") saveImage = true;

  else if (key === "?") toggleHelp();

}

function reset() {

  for (i = 0; i < 44 * 30; i++) im[i] = -1;

}

function toggleHelp() {

  helpVisible = !helpVisible;

  if (helpVisible) {

    help.show();

    help2.show();

    help3.show();

    help4.show();

    hideSliders(false);

  } else {

    help.hide();

    help2.hide();

    help3.hide();

    help4.hide();

  }

}

function drawQuestionmark() {

  push();

  translate(10, height - 25);

  scale(3);

  strokeWeight(0.2);

  fill("darkgray");

  rect(0, 0, 1, 1);

  rect(1, -1, 1, 1);

  rect(2, -1, 1, 1);

  rect(3, 0, 1, 1);

  rect(2, 1, 1, 1);

  rect(2, 2, 1, 1);

  rect(2, 4, 1, 1);

  pop();

}

function titleInputEvent() {

  title = this.value();

}

function authorInputEvent() {

  author = this.value();

}

​

function utf8_to_b64(str) {

  return window.btoa(unescape(encodeURIComponent(str)));

}

​

function b64_to_utf8(str) {

  return decodeURIComponent(escape(window.atob(str)));

}

​