let img;

let cnv;

function preload (){

  img = loadImage()

}

​

function setup() {

  //createCanvas(200, 200)

  // cnv = createCanvas(img.width, img.height); 

  // let newCanvasX = (windowWidth - img.width)/2;

  // let newCanvasY = (windowHeight - img.hieght)/2;

  // cnv.position = (newCanvasX, newCanvasY);

  dropzone = select('#dropzone');

  dropzone.dragOver(highlight);

  dropzone.dragLeave(unhighlight);

  dropzone.drop(gotFile, unhighlight);

  // for (let col = 0; col < img.width; col +=20){

  //   for (let row = 0; row < img.height; row += 20){

  //     let c = img.get(col, row);

  //     stroke(color(c));

  //     strokeWeight(15);

  //     point(col, row);

  //   }

  // }

}

​

function gotFile(file){

  //var imgU = createImg(file.data);

  //imgU.hide();

   img = loadImage(file.data);

  // createP(file.name);

  print(img);

  popIt(img);

  // cnv = createCanvas(img.width, img.height); 

  // let newCanvasX = (windowWidth - img.width)/2;

  // let newCanvasY = (windowHeight - img.hieght)/2;

  // cnv.position = (newCanvasX, newCanvasY);

 }

​

function popIt (img){

  for (let col = 0; col < img.width; col +=20){

    for (let row = 0; row < img.height; row += 20){

      let c = img.get(col, row);

      stroke(color(c));

      strokeWeight(15);

      point(col, row);

    }

  }

}

​

function highlight (){

  dropzone.style('background-color', '#ccc')

}

​

function unhighlight (){

  dropzone.style('background-color', '#1D1D1D')

}

​

​

// function draw() {

//   noLoop();

// }