​

// This array will hold the squares we split our image into.

var imgSquares = [];

​

// How many squares should we split our image into?

// Try changing these values!

var horizontalSquareCount = 10;

var verticalSquareCount = 10;

​

// These variables will hold the size of the image squares.

// We need this to draw the squares in the right places.

var squareWidth;

var squareHeight;

​

function preload() {

  img = loadImage('images/gvjhjh.jpg');

​

  // Click the > menu to the left and look in

  // the images directory for more images to try!

  // Or upload your own image!

  // URLs also work, like this:

  // img = loadImage('https://upload.wikimedia.org/wikipedia/commons/6/69/June_odd-eyed-cat_cropped.jpg')

}

​

function setup() {

  createCanvas(850, 480);

​

  // Resizes the image so it fits on the screen

  img.resize(width, height);

​

  // Calculates the size of the squares.

  squareWidth = width / horizontalSquareCount;

  squareHeight = height / verticalSquareCount;

​

  // Split the image up into squares.

  img.loadPixels();

  for (var y = 0; y < height; y += squareHeight) {

    for (var x = 0; x < width; x += squareWidth) {

      imgSquares.push(img.get(x, y, squareWidth, squareHeight));

    }

  }

​

  // other setup

  pd = pixelDensity();

  noLoop();

}

​

// We called noLoop() above so the draw() function is only called once.

// To redraw the squares, click the mouse!

function mouseClicked() {

  draw();

}

​

function draw() {

​

  // This randomizes the order of the squares

  imgSquares = shuffle(imgSquares);

​

  // Keeps track of the position of the current square.

  // We change these as we draw each square,

  // so we know where to draw the next one.

  var squareX = 0;

  var squareY = 0;

  for (var square of imgSquares) {

    // Draw this square.

    image(square, squareX, squareY);

​

    // Draw the next square to the right of this square.

    squareX += squareWidth;

    // If we went off the right edge, we should move down

    // one row and start over at the left edge.

    if (squareX >= width) {

      squareX = 0;

      squareY += squareHeight;

    }

  }

}