​

let numberOfTiles = 20;

let tileGridSize = 5;

​

function preload(){

    img = loadImage("https://picsum.photos/400/400");

}

​

function setup() {

  createCanvas(img.width + 20, img.height + 20);

  background(100);

  //image(img, 0, 0);

  for (let i = 0; i < img.width / numberOfTiles; i ++)

  {

    for (let j = 0; j < img.height / numberOfTiles; j ++)

    {

      rect(i * numberOfTiles, j * numberOfTiles, i * numberOfTiles, j * numberOfTiles + numberOfTiles - 1, i * numberOfTiles, j * numberOfTiles + numberOfTiles - 1);

      let cornerColour1 = 

          color(img.get(i * numberOfTiles, j * numberOfTiles));

      let cornerColour2 = 

          color(img.get(i * numberOfTiles + numberOfTiles - 1, 

                        j * numberOfTiles));

      let cornerColour3 = 

          color(img.get(i * numberOfTiles, 

                        j * numberOfTiles + numberOfTiles - 1));

      let cornerColour4 = 

          color(img.get(i * numberOfTiles + numberOfTiles - 1, 

                        j * numberOfTiles + numberOfTiles - 1));

      for (let y = 0; y < numberOfTiles / tileGridSize; y ++)

      {

        leftColour = lerpColor(cornerColour1, cornerColour3, y / tileGridSize);

        rightColour = lerpColor(cornerColour2, cornerColour4, y / tileGridSize);

        for (let x = 0; x < numberOfTiles / tileGridSize; x ++)

        {

          fill(lerpColor(leftColour, rightColour, x / tileGridSize));

          //circle(i * numberOfTiles + x * tileGridSize, j * numberOfTiles + y * tileGridSize, tileGridSize)

        }

      }

    }

  }

}

​

function draw() {

}