Assignment 4 Outfit Generator

Sketch: 

Concept: 

The concept for this sketch came from my roommate and I’s  constant struggle each morning to decide what to wear for the next day. What I decided to produce was an random outfit generator that takes a list of hats, shirts, jackets, pants and shoes, and corresponding colors for each item that I had, in a form of an csv, and produces random results, yielding a different outfit.

Code Highlight: 

 

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);
  }
}

This was the main function that was utilized within the sketch. the function is in charge of generating a random color option for each article of clothing. I first created an array called categories, which had the names of each category of clothing, which corresponds to the same name within each row in the csv file. Following this is a triple nested loop. The first loop loops through the categories array. and then creates an empty array called colorOptions, which would store the color options for each category.  The second loop loops through each row of the csv file. If the first string of the row matches with the same category in the categories array, an array: row, would be created, which would store each of the color options found within that row in the csv file, without the first item, which is the category. Then the third loop loops through the length of the row, if there is a string available, we push the item within the array to the coloOptions array. We exit the third loop once  the category is finished. Once all the categories are done, a random color option is chosen, and applied to the category of clothing.

Future Improvements:

As this is intended to be a tool, I hope to further improve this project through photos of the actual items I own, in order to visualize what the items would look like together. I would also want to add a toggle switch for each article of clothing, so I could for example, choose whether I want to wear a hat or jacket or not.

Leave a Reply