klara[dot]nz

// Define canvasText as a global variable.
let canvasText = 'Drag an image file onto the canvas.';
const GRID_SIZE = 4;
const jitter = 0.5;
const size_multiplier = 1.4;
let canvas2;

const ww = 376*2
const hh = 542*2

// Function for first canvas
function sketch1(p) {
 p.setup = function() {
  // Assign the dropArea variable to the canvas.
  let dropArea = p.createCanvas(ww, hh);

  // Add the drop() method to the canvas. Call the gotFile
  // function when a file is dropped into the canvas.
  dropArea.drop(p.gotFile);
  p.noLoop();
}

 p.draw = function() {
  p.background(100);

  // Add instructions for dropping an image file in the canvas.
  p.fill(255);
  p.noStroke();
  p.textSize(24);
  p.textAlign(p.CENTER);
  p.text(canvasText, p.width / 2, p.height / 2);

  p.describe(`Grey canvas with the text "${canvasText}" in the center.`);
}

  p.gotFile = function(file) {
  // If the file dropped into the canvas is an image,
  // create a variable called img to contain the image.
  // Remove this image file from the DOM and only
  // draw the image within the canvas.
  if (file.type === 'image') {
    // Pass in an empty string for the alt text. This should only be done with
    // decorative photos.
    let img = p.createImg(file.data, '').hide();
    p.tint(255, 0)
    p.background(255)
    p.tint(255, 255)
    p.image(img, 0, 0, p.width, p.height);
    p.fill(0)
    let currMin = 1
    let currMax = 0
    for (let x = 0; x < p.width; x += GRID_SIZE) {
      for (let y = 0; y < p.height; y += GRID_SIZE) {
        try{
          let col = p.get(x,y).slice(0,3)
          let brightnessValue = col.reduce((acc,curr)=>acc+curr)/255/3
          // find nearest palette color and return error
          let nearest = Math.round((1-((brightnessValue - currMin)/(currMax-currMin)))*GRID_SIZE*size_multiplier)
          let real = ((1-((brightnessValue - currMin)/(currMax-currMin)))*GRID_SIZE*size_multiplier)
          let err = real - nearest
          if (err > 0) {
            if (Math.random() < err) nearest++
          } else {
            if (Math.random()< Math.abs(err)) nearest--
          }
          p2.fill(col)
          p2.stroke(col)
          if (brightnessValue > currMax) currMax = brightnessValue
          if (brightnessValue < currMin) currMin = brightnessValue
          p2.rect(x-(p2.width/2) + (Math.random()*jitter*nearest), y-(p2.height/2) + (Math.random()*jitter*nearest), nearest)
        } catch (e) {
          console.log(e)
        }
      }
    }
  } else {
    // If the file dropped into the canvas is not an image,
    // change the instructions to 'Not an image file!'
    p.canvasText = 'Not an image file!';
    p.redraw();
  }
}
}

new p5(sketch1);

// Function for second canvas
function sketch2(p) {
  p.setup = function () {
    p.createCanvas(ww, hh, p.WEBGL);
    p.background(255);
    p.fill(0);
    p.stroke(255);
  };
  // p.draw = function () {
  //   p.square(p.mouseX, p.mouseY, 50);
  // };
}

// Run second p5 instance
const p2 = new p5(sketch2);