Dress Up

dress-up.markdown

Dress Up

This pen uses CSS filters to change the color of the model's garments. I used JavaScript to calculate the offset for the CSS filter function and combined that with a color picker. Color availability and accuracy aren't perfect because they work with a base color that isn't as neutral as it could be. I used an AI-generated model and I used ChatGPT to alphabetize my SCSS properties because, why not use AI to achieve perfection when we can?

A Pen by Connie Finkelman on CodePen.

License.

index.html

<div id="container">
  <div id="sliderPicker">
    <p>
      Choose a color for:
    </p>
    <ul id="colorTarget">
      <li><label class="label" for="shirt">
          <input type="radio" id="shirt" name="colors" value="shirt" checked />Shirt
        </label></li>
      <li><label class="label" for="pants">
          <input type="radio" id="pants" name="colors" value="pants" />Pants
        </label></li>
      <li><label class="label" for="shoes">
          <input type="radio" id="shoes" name="colors" value="shoes" />Shoes
        </label></li>
    </ul>
    <div id="picker"></div>
  </div>

  <div id="model">
    <img id="bodyImg" src="https://assets.codepen.io/11614/body.png" alt="" />
    <img id="shoesImg" src="https://assets.codepen.io/11614/shoes_1.png" alt="shoes" />
    <img id="pantsImg" src="https://assets.codepen.io/11614/pants_1.png" alt="pants" />
    <img id="shirtImg" src="https://assets.codepen.io/11614/shirt_1.png" alt="Shirt" />
  </div>
</div>

script.js

const shirtImg = document.getElementById("shirtImg");
const panstImg = document.getElementById("pantsImg");
const shoesImg = document.getElementById("shoesImg");
const targets = document.querySelectorAll("input[name='colors']");

let colorTarget = "shirt";
targets.forEach((target) => {
  target.addEventListener("change", () => {
    colorTarget = target.value;
  });
});

// Sliders
var sliderPicker = new iro.ColorPicker("#sliderPicker", {
  width: 250,
  color: "{h: 35, s: 55, l: 91}",
  borderWidth: 1,
  borderColor: "#ccc",
  layout: [
    {
      component: iro.ui.Slider,
      options: {
        sliderType: "hue"
      }
    },
    {
      component: iro.ui.Slider,
      options: {
        sliderType: "saturation"
      }
    },
    {
      component: iro.ui.Slider,
      options: {
        sliderType: "value"
      }
    }
  ]
});

sliderPicker.on("color:change", (color) => {
  const hexString = color.hsl;
  let rotateH = 0;
  let rotateS = 50;
  let rotateL = 100;
  let cssString;
  switch (colorTarget) {
    case "shirt":
      rotateH = color.hsl.h - 35;
      rotateS = 100 + (color.hsl.s - 55);
      rotateL = 100 + (color.hsl.l - 91);
      cssString = `hue-rotate(${rotateH}deg) saturate(${rotateS}%) brightness(${rotateL}%)`;
      shirtImg.style.setProperty("filter", cssString);
      break;
    case "pants":
      rotateH = color.hsl.h - 218;
      rotateS = 100 + (color.hsl.s - 37);
      rotateL = 100 + (color.hsl.l - 64);
      cssString = `hue-rotate(${rotateH}deg) saturate(${rotateS}%) brightness(${rotateL}%)`;
      pantsImg.style.setProperty("filter", cssString);
      break;
    case "shoes":
      rotateH = color.hsl.h - 33;
      rotateS = 100 + (color.hsl.s - 13);
      rotateL = 100 + (color.hsl.l - 72);
      cssString = `hue-rotate(${rotateH}deg) saturate(${rotateS}%) brightness(${rotateL}%)`;
      shoesImg.style.setProperty("filter", cssString);
      break;
  }
});

scripts

<script src="https://assets.codepen.io/11614/iro.min.js"></script>

style.scss

#container {
  display: flex;
  flex-flow: row nowrap;
  margin: 24px auto;
  max-width: 640px;
}

#model {
  height: 512px;
  position: relative;
  width: 256px;

  #pantsImg,
  #shirtImg,
  #shoesImg {
    left: 0;
    position: absolute;
    top: 0;
  }

  #pantsImg {
    left: 81px;
    top: 233px;
  }

  #shirtImg {
    left: 67px;
    top: 95px;
  }

  #shoesImg {
    left: 84px;
    top: 450px;
  }
}

#sliderPicker {
  border: solid 2px #999;
  border-radius: 8px;
  font: normal 14px/1.2 sans-serif;
  height: auto;
  margin-top: 80px;
  max-height: 250px;
  padding: 24px;
  p {
    font-size: 18px;
    font-weight: bold;
    line-height: 2;
  }

  #colorPicker {
    padding: 0 24px;
  }

  ul[id="colorTarget"] {
    display: flex;
    flex-flow: row nowrap;
    list-style: none;
    margin: 0 0 12px;
    padding: 0;

    li {
      margin-right: 1em;
    }
  }
}