​

let hats = [

  [1, 0, 1],

  [0, 1, 1],

  [0, 0, 1]

];

​

let randomHatSet;

​

let characters = 3;

​

function preload() {

  blackHatImg = loadImage('blackHat.png');

  whiteHatImg = loadImage('whiteHat.png');

}

​

function setup() {

  createCanvas(400, 400);

  background(150);

​

  // Check if the images have been loaded before using them

  if (blackHatImg && whiteHatImg) {

    // randomly choose hat set

    randomHatSet = floor(random(3))

​

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

      let x = width / characters * (i + 0.5);

      let y = height / 2;

​

      // Draw the assigned hat images

      if (hats[randomHatSet][i] === 1) {

          image(blackHatImg, x - 20, y - 20, 100, 50);

      } else if (hats[randomHatSet][i] === 0) {

          image(whiteHatImg, x - 20, y - 20, 100, 50);

      }

    }

  }

}

​