For the past four years I've attended a private school which requires its students to wear ties. I've found that it's far easier to figure out what combination of shirt, pants, and tie that go together the night before, as it can sometimes be a tedious process. To make this process simpler, I had the idea to create a script to automatically generate new combinations of matching clothes.
As of now, I input all of my clothes into a JSON
file, separated into arrays representing categories (shirts, pants, ties). The first element of each array is a another array, filled with all available colors/patterns in that category (red, blue, etc). For each color, there is an array ID'd by its color, consisting of an object describing what color/pattern pants/ties/sweaters go with that shirt color. Finally there is an array with the names of each type of clothing item that falls under that color. In case you didn't follow any of that, here's a section of my JSON
file (full here):
"shirts": [{
"colors": [
"red"
],
"red": [{
"pants": [
"navy",
"khaki"
],
"sweaters": [
"navy",
"grey"
],
"ties": [
"all"
]
},
[
"Red Flannel",
"That Other Red Flannel"
]
]
}],
...
It's a pretty tedious structure (IMO), but I can't think of a better implementation since there are multiple criteria that the matching clothes need to match. My method of creating a random combination is equally tedious:
$.getJSON("clothes.json", function (clothes) {
window.clothes = clothes;
var colors = clothes["shirts"][0]["colors"];
$(colors).each(function (i) {
$("#color").append("<option>" + colors[i] + "</option>");
});
});
function randomArrayValue(array) {
var array = eval(array);
return array[Math.floor(Math.random() * array.length)];
}
function randomClothes(times, color, sweater, tie) {
$("#output").html("");
// Objects for everything
var shirts = clothes["shirts"][0];
pants = clothes["pants"][0];
sweaters = clothes["sweaters"][0];
ties = clothes["ties"][0];
shoes = clothes["shoes"][0];
for (var x = 0; x < times; x++) {
if (color) {
startShirt = shirts[color];
} else {
startShirt = shirts[randomArrayValue(shirts["colors"])]
}
shirt_optionsPants = startShirt[0]["pants"];
shirt_optionsSweaters = startShirt[0]["sweaters"];
shirt_optionsTies = startShirt[0]["ties"];
// Array to hold random combinations
combination = new Array();
for (var i = 0; i < shirt_optionsPants.length; i++) {
var currentPantColor = shirt_optionsPants[i];
var pant_optionsSweaters = pants[currentPantColor][0]["sweaters"];
if (tie) {
var pant_optionsTies = pants[currentPantColor][0]["ties"];
} else {
var pant_optionsTies = new Array("all");
}
// Availible ties between pants and shirt, tie color has to be both present in shirt and pant or it wont be added
var availableShirtPantTies = new Array();
$(shirt_optionsTies).each(function (i) {
var currentShirtTie = shirt_optionsTies[i];
if (pant_optionsTies[0] === "all") {
availableShirtPantTies.push(currentShirtTie);
} else {
$(pant_optionsTies).each(function (i) {
if (pant_optionsTies[i] === currentShirtTie) {
availableShirtPantTies.push(currentShirtTie);
} else if (currentShirtTie === "all") {
availableShirtPantTies.push(pant_optionsTies[i]);
}
});
}
});
for (var k = 0; k < pant_optionsSweaters.length; k++) {
var currentSweaterColor = pant_optionsSweaters[k];
var sweater_optionsTies = sweaters[currentSweaterColor][0]["ties"];
// Check if there are any ties that matches both the pants and shirt
if (availableShirtPantTies.length > 0) {
if (sweater) {
var availableShirtPantSweaterTies = new Array();
$(sweater_optionsTies).each(function (i) {
var currentSweaterTie = sweater_optionsTies[i];
if ($.inArray(currentSweaterTie, availableShirtPantTies) >= 0) {
availableShirtPantSweaterTies.push(currentSweaterTie)
} else if (currentSweaterTie === "all") {
$(availableShirtPantTies).each(function (i) {
availableShirtPantSweaterTies.push(availableShirtPantTies[i]);
});
} else {
if (sweater_optionsTies[i] === sweater_optionsTies[i]) {
availableShirtPantSweaterTies.push(sweater_optionsTies[i]);
}
}
});
} else {
availableShirtPantSweaterTies = availableShirtPantTies;
}
$(availableShirtPantSweaterTies).each(function (i) {
// Assign any tie to a color
if (tie) {
if (availableShirtPantSweaterTies[i] === "all") {
currentTieColor = randomArrayValue(ties["colors"]);
} else {
currentTieColor = availableShirtPantSweaterTies[i];
}
} else {
currentTieColor = ties["colors"][0];
}
//Result object
var result = new Object();
result.shoes = randomArrayValue(pants[currentPantColor][0]["shoes"]);
result.pants = currentPantColor;
result.sweater = currentSweaterColor;
result.tie = currentTieColor;
combination.push(result);
});
}
}
}
var randomCombination = randomArrayValue(combination);
pantsColor = randomCombination["pants"];
sweaterColor = randomCombination["sweater"];
tieColor = randomCombination["tie"];
shoesColor = randomCombination["shoes"];
var randomShirt = randomArrayValue(startShirt[1]);
randomPants = randomArrayValue(pants[pantsColor][1]);
randomSweater = randomArrayValue(sweaters[sweaterColor][1]);
randomTie = randomArrayValue(ties[tieColor][0]);
randomShoes = randomArrayValue(shoes[shoesColor][0]);
//Debugging
//console.log(randomShirt, randomPants, randomSweater, randomTie, randomShoes);
if (sweater) {
var sweaterContent = "Sweater: " + randomSweater + "<br />";
} else {
var sweaterContent = "";
}
if (tie) {
var tieContent = "Tie: " + randomTie + "<br />";
} else {
var tieContent = "";
}
var content = "Shirt: " + randomShirt + "<br />Pants: " + randomPants + "<br />" + sweaterContent + tieContent + "Shoes: " + randomShoes + "<br /><br />";
$("#output").append(content);
}
}
$("#random").click(function () {
randomClothes(1, "", true, true);
});
This isn't like anything I've really coded before, and I'm not the best when it comes to visualizing randomness. My original method of coding this did not take into account that certain shirts could go with certain ties, but those shirts might go with sweaters that the ties or pants do not. Consequently, the code is rather large. I have to believe, however, that there is a much better solution to what I'm trying to achieve. Also, I would like to add in implementations for regular T-Shirts or anything for that matter, but as it stands now, the structure is much too strict to allow for much modification.
Oh yes, if it wasn't clear, the code hinges off of the shirt. So it picks a random shirt, then sees what matches it. If the code wasn't as strict, it would be nice to be able to start with any article of clothing, such as pants.