let fileReceived =  false;

​

function Box(i, j, color ){

  this.i = i;

  this.j = j; 

  this.color = color;

  this.discolor = [...color];

  this.discolor[3] = 60;

​

  this.disable = () =>{

    noStroke(); 

    fill(this.discolor);

    rect( (i * 10) + i+1 , (j*10)+j+1, 10, 10);  

  }

  this.draw = ()=> {

    noStroke();

    fill( this.color );

    rect( (i*10) +i+1 , (j*10) +j+1, 10, 10);

  }

}

​

function setup() { 

  var c = createCanvas(660, 660);

  c.drop(gotFile);

}

​

function gotFile(file) {

  if (file.type === 'image') {

    var ix = createImg(file.data);

    img = loadImage(file.data, ()=>{

      img.resize(60, 60);

      frameRate(8);

      for( let i = 0; i< 3600; i ++ ){

         let row = parseInt(i / 60);

         let col = i % 60;

         boxes[i] = new Box( col, row, img.get(col,row) );

      }

      fileReceived = true;

      redraw();

    });

  }

} 

​

​

function waitForFile(){

  fill(105);

  noStroke();

  textSize(24);

  textAlign(CENTER);

  text('Drag an image file onto the canvas.', width/2, height/2);

}

​

let currentCol = 0;

function draw() {

  background(255);

  if( fileReceived == true ){

    stroke(255,0, 0);

    strokeWeight(3);

    let lineStart = currentCol*10 + currentCol;

    line(lineStart-1, 0, lineStart-1, height ); 

    line(lineStart+12, 0, lineStart+12, height ); 

    for( let i in boxes ){  

      let check = i % 60;

      if( check == currentCol ){

        boxes[i].draw();

      }else{  

        boxes[i].disable();

      }

    }

    currentCol = (currentCol + 1) % 60;

  }else{

    waitForFile();

  }

}