----- Coding Tutorial by Patt Vira ----- 

Name: Collage - Grid

Video Tutorial: https://youtu.be/Ra1IHHeWBPs

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

let img;

let grid = [];

let cols = 10; let rows = 10;

let gridWidth, gridHeight;

let x0, y0; let margin = 100; 

​

function preload() {

  img = loadImage("cnx.jpg");

}

​

function setup() {

  img.resize(600, 0);

  createCanvas(img.width, img.height);

  noLoop();

  x0 = margin;

  y0 = margin;

  gridWidth = (width - margin*2)/cols; 

  gridHeight = (height - margin*2)/rows;

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

    grid[i] = [];

    for (let j=0; j<rows; j++) {

      let x = x0 + i*gridWidth;

      let y = y0 + j*gridHeight;

      grid[i][j] = img.get(x, y, gridWidth, gridHeight);

    }

  }

}

​

function draw() {

  background(0);

  image(img, 0, 0);

  let shuffledGrid = shuffle(grid);

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

    for (let j=0; j<rows; j++) {

      let shuffledElements = shuffle(shuffledGrid);

      let x = x0 + i*gridWidth;

      let y = y0 + j*gridHeight;

      image(shuffledElements[i][j], x, y);

    }

  }

  // save('img.png');

}