整列を使ってランダム表示をする

初めに整列の箱を作った後、箱内をランダムに混ぜる。
そして、ぐちゃぐちゃに混ざった箱を0から順番に左上から右へ、下へ並べていく。

let img = []; //images box
let num = 0; //image box number
let offset; //空白
let sell; //一人分の大きさ
let date;
let frame;

function setup() {
  createCanvas(windowHeight, windowHeight);
  shuffle(img, true);
}

function preload() {
  img[0] = loadImage("0.png");
  img[1] = loadImage("1.png");
  img[2] = loadImage("2.png");
  img[3] = loadImage("3.png");
  img[4] = loadImage("4.png");
  img[5] = loadImage("5.png");
  img[6] = loadImage("6.png");
  img[7] = loadImage("7.png");
  img[8] = loadImage("8.png");
  img[9] = loadImage("9.png");
  img[10] = loadImage("10.png");
  img[11] = loadImage("11.png");
  img[12] = loadImage("12.png");
  img[13] = loadImage("13.png");
  img[14] = loadImage("14.png");
    img[15] = loadImage("15.png");
}

function draw() {
  background(255);
  offset = 20;
  sell = (width - (offset * 2)) / 4;

  for (y = offset; y < width - (offset * 2); y = y + sell) {
    for (x = offset; x < height - (offset * 2); x = x + sell) {
            image(img[num % 16], x, y, sell, sell);
            num = num + 1;
    }
  }
    
　//枠
  noFill();
  stroke("#dab300");
  strokeWeight(20);
  rect(0, 0, width, height, 10);
    
  noLoop();
}

//クリックでシャッフル
function mousePressed() {
  shuffle(img, true);
  loop();
}

用意した画像で固定したいものがある場合、整列の箱の中に入れずに、num%（ここの数字を変える）で固定する。
（16分割の場合）変える数字は左下が0、右上が3、左下が12、右下が15。

let img = []; //images box
let num = 0; //image box number
let offset; //空白
let sell; //一人分の大きさ
let date;

function setup() {
  createCanvas(windowHeight, windowHeight);
  shuffle(img, true);
}

function preload() {
  img[0] = loadImage("0.png");
  img[1] = loadImage("1.png");
  img[2] = loadImage("2.png");
  img[3] = loadImage("3.png");
  img[4] = loadImage("4.png");
  img[5] = loadImage("5.png");
  img[6] = loadImage("6.png");
  img[7] = loadImage("7.png");
  img[8] = loadImage("8.png");
  img[9] = loadImage("9.png");
  img[10] = loadImage("10.png");
  img[11] = loadImage("11.png");
  img[12] = loadImage("12.png");
  img[13] = loadImage("13.png");
  img[14] = loadImage("14.png");
    //I want lock this image at right down 
    date = loadImage("date.png");
}

function draw() {
  background(255);
  offset = 20;
  sell = (width - (offset * 2)) / 4;

   for (y = offset; y < width - (offset * 2); y = y + sell) {
    for (x = offset; x < height - (offset * 2); x = x + sell) {
            //At 16 grid,num%16==15 is right down
      if (num % 16 == 15) {
        image(date, x, y, sell, sell);
      } else {
        image(img[num % 16], x, y, sell, sell);
      }
      num = num + 1;
    }
  }
    
　//frame
  noFill();
  stroke("#dab300");
  strokeWeight(20);
  rect(0, 0, width, height, 10);
    
  noLoop();
}

//click to shuffle
function mousePressed() {
  shuffle(img, true);
  loop();
}

大学のゼミの先生へのデジタル色紙として作りました。
正方形の画像を差し替えれば自由に使えます。

---

【まとめ】
shuffle(混ぜる箱の名前, true);
trueは直接箱内を混ぜる、の意味。