let outfit = {}; //variable that saves randomly generated outfits

​

function preload() {      //preload the clothes.csv file

  clothesData = loadTable('clothes.csv', 'csv', 'header');

}

​

function setup() {

  createCanvas(400, 300);

  textSize(16);

  textAlign(CENTER, CENTER);

  generateOutfit();

}

​

function draw() {

  background(255);

  let yOffset = 50;

  text("Random Outfit:", width / 2, yOffset); 

  yOffset += 50;

  for (let key in outfit) {                //loop to increase the gap between each section by 30 pixels

   text(key + ": " + outfit[key], width / 2, yOffset);  //displays clothing item with emoji followed by ':' and then the color

    yOffset += 30;

  }

}

​

function mousePressed() {

  generateOutfit();      //randomizes the color for each keypress

}

​

function generateOutfit() {

  let categories = ["Hat 🧢", "Shirt 👕", "Jacket 🧥", "Pants 👖", "Shoes 👟"];    //array for each article of clothing

  for (let c = 0; c < categories.length; c++) {  //loop through each category

    let category = categories[c]; //current category

    let colorOptions = [];        //array that color options for current category

    //loops through each row in clothesData to find the matching category

    for (let i = 0; i < clothesData.getRowCount(); i++) {

      //find a match for category based on first column in current row

      if (clothesData.getString(i, 0) === category) {

      //once the category of the table and the corresponding category matches, the colors in the same row are stored in the coloroptions array. 

        let row = clothesData.getRow(i).arr.slice(1);

        for (let j = 0; j < row.length; j++) {

          if (row[j] !== "") {

            colorOptions.push(row[j]);

          }

        }

        break;    //exit the loop once the matching category is found

      }

    }

    //randomly assign one of the color attributes to the corresponding category

    outfit[category] = random(colorOptions);

  }

}

​