​

let numberOfTiles = 10;

let tileGridSize = 20;

​

function preload(){

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

}

​

function setup() {

  createCanvas(img.width, img.height);

  background(100);

  //image(img, 0, 0);

  for (let i = 0; i < numberOfTiles; i ++)

  {

    for (let j = 0; j < numberOfTiles; j ++)

    {

     // circle(i * img.width / numberOfTiles, j * img.height / numberOfTiles, 20);

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

      let cornerColour1 = 

          color(img.get(i * img.width / numberOfTiles, 

                        j * img.height / numberOfTiles));

      let cornerColour2 = 

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

                        j * img.height / numberOfTiles));

      let cornerColour3 = 

          color(img.get(i * img.width /  numberOfTiles, 

                        j * img.height / numberOfTiles + numberOfTiles - 1));

      let cornerColour4 = 

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

                        j * img.height / numberOfTiles + numberOfTiles - 1));

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

      {

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

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

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

        {

          let blotColour = lerpColor(leftColour, rightColour, x / tileGridSize);

          fill(blotColour);

          stroke(blotColour)

          circle(i * img.width / numberOfTiles + x * img.width / (numberOfTiles * tileGridSize), 

                 j *  img.height / numberOfTiles + y * img.width / (numberOfTiles * tileGridSize), 

                 img.width / (numberOfTiles * tileGridSize))

        }

      }

    }

  }

}

​

function draw() {

}