Skip to content

Commit

Permalink
Updates to a lot of stuff.
Browse files Browse the repository at this point in the history 
Fixes #8.
Fixes #4.
Closes #6.

Starts work on #5.
  • Loading branch information
@ChapelR
ChapelR committed Jun 21, 2018
1 parent 1bf77a3 commit 493a4d6
Show file tree
Hide file tree
Showing 10 changed files with 862 additions and 39 deletions.
186 changes: 185 additions & 1 deletion src/css/filters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,190 @@ svg.defs-only {
left: -1000px;
}

img.layer[data-group=hair].hair-ashen {
filter: url(#normalize) url(#hair-ashen);
}

img.layer[data-group=hair].hair-auburn {
filter: url(#normalise) url(#hair-auburn);
filter: url(#normalize) url(#hair-auburn);
}

img.layer[data-group=hair].hair-black {
filter: url(#normalize) url(#hair-black);
}

img.layer[data-group=hair].hair-blazing-red {
filter: url(#normalize) url(#hair-blazing-red);
}

img.layer[data-group=hair].hair-blonde {
filter: url(#normalize) url(#hair-blonde);
}

img.layer[data-group=hair].hair-blue {
filter: url(#normalize) url(#hair-blue);
}

img.layer[data-group=hair].hair-bright-red {
filter: url(#normalize) url(#hair-bright-red);
}

img.layer[data-group=hair].hair-brown {
filter: url(#normalize) url(#hair-brown);
}

img.layer[data-group=hair].hair-brunette {
filter: url(#normalize) url(#hair-brunette);
}

img.layer[data-group=hair].hair-burgundy {
filter: url(#normalize) url(#hair-burgundy);
}

img.layer[data-group=hair].hair-chestnut {
filter: url(#normalize) url(#hair-chestnut);
}

img.layer[data-group=hair].hair-chocolate-brown {
filter: url(#normalize) url(#hair-chocolate-brown);
}

img.layer[data-group=hair].hair-copper {
filter: url(#normalize) url(#hair-copper);
}

img.layer[data-group=hair].hair-dark {
filter: url(#normalize) url(#hair-dark);
}

img.layer[data-group=hair].hair-dark-blonde {
filter: url(#normalize) url(#hair-dark-blonde);
}

img.layer[data-group=hair].hair-dark-brown {
filter: url(#normalize) url(#hair-dark-brown);
}

img.layer[data-group=hair].hair-dark-red {
filter: url(#normalize) url(#hair-dark-red);
}

img.layer[data-group=hair].hair-deep-red {
filter: url(#normalize) url(#hair-deep-red);
}

img.layer[data-group=hair].hair-dirty-blonde {
filter: url(#normalize) url(#hair-dirty-blonde);
}

img.layer[data-group=hair].hair-fair-blonde {
filter: url(#normalize) url(#hair-fair-blonde);
}

img.layer[data-group=hair].hair-ginger {
filter: url(#normalize) url(#hair-ginger);
}

img.layer[data-group=hair].hair-golden {
filter: url(#normalize) url(#hair-golden);
}

img.layer[data-group=hair].hair-golden-blonde {
filter: url(#normalize) url(#hair-golden-blonde);
}

img.layer[data-group=hair].hair-green {
filter: url(#normalize) url(#hair-green);
}

img.layer[data-group=hair].hair-gray {
filter: url(#normalize) url(#hair-gray);
}

img.layer[data-group=hair].hair-grey {
filter: url(#normalize) url(#hair-grey);
}

img.layer[data-group=hair].hair-hazel {
filter: url(#normalize) url(#hair-hazel);
}

img.layer[data-group=hair].hair-light-brown {
filter: url(#normalize) url(#hair-light-brown);
}

img.layer[data-group=hair].hair-light-purple {
filter: url(#normalize) url(#hair-light-purple);
}

img.layer[data-group=hair].hair-neon-blue {
filter: url(#normalize) url(#hair-neon-blue);
}

img.layer[data-group=hair].hair-neon-green {
filter: url(#normalize) url(#hair-neon-green);
}

img.layer[data-group=hair].hair-neon-pink {
filter: url(#normalize) url(#hair-neon-pink);
}

img.layer[data-group=hair].hair-olive {
filter: url(#normalize) url(#hair-olive);
}

img.layer[data-group=hair].hair-onyx-black {
filter: url(#normalize) url(#hair-onyx-black);
}

img.layer[data-group=hair].hair-pale-blonde {
filter: url(#normalize) url(#hair-pale-blonde);
}

img.layer[data-group=hair].hair-peachy {
filter: url(#normalize) url(#hair-peachy);
}

img.layer[data-group=hair].hair-pink {
filter: url(#normalize) url(#hair-pink);
}

img.layer[data-group=hair].hair-platinum-blonde {
filter: url(#normalize) url(#hair-platinum-blonde);
}

img.layer[data-group=hair].hair-purple {
filter: url(#normalize) url(#hair-purple);
}

img.layer[data-group=hair].hair-raven-black {
filter: url(#normalize) url(#hair-raven-black);
}

img.layer[data-group=hair].hair-red {
filter: url(#normalize) url(#hair-red);
}

img.layer[data-group=hair].hair-red-blonde {
filter: url(#normalize) url(#hair-red-blonde);
}

img.layer[data-group=hair].hair-silver {
filter: url(#normalize) url(#hair-silver);
}

img.layer[data-group=hair].hair-strawberry-blonde {
filter: url(#normalize) url(#hair-strawberry-blonde);
}

img.layer[data-group=hair].hair-violet {
filter: url(#normalize) url(#hair-violet);
}

img.layer[data-group=hair].hair-white {
filter: url(#normalize) url(#hair-white);
}

img.layer[data-group=hair].hair-white-blonde {
filter: url(#normalize) url(#hair-white-blonde);
}
178 changes: 174 additions & 4 deletions src/js/filters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,185 @@
'<filter id="hair-auburn">' +
'<feColorMatrix type="matrix" values="0.8 0 0 0 0.2 0 0.5 0 0 0 0 0 0.15 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-ashen" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.7 0 0 0 0.1 0 0.7 0 0 0.1 0 0 0.7 0 0.1 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-black" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.2 0 0 0 0 0 0.15 0 0 0 0 0 0.1 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-blazing-red" color-interpolation-filters="sRGB">' +
'<feComponentTransfer>' +
'<feFuncR type="gamma" exponent="0.10" />' +
'<feFuncG type="gamma" exponent="3.00" />' +
'<feFuncB type="gamma" exponent="7.50" />' +
'</feComponentTransfer>' +
'</filter>' +
'<filter id="hair-blonde" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1.4 0 0 0 0 0 1.3 0 0 0 0 0 0.7 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-blue" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.3 0 0 0 0 0 0.5 0 0 0 0.4 0.2 0.25 0 0.1 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-bright-red" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1 0 0 0 0.2 0 0.4 0 0 0 0 0 0.1 0 0.1 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-brown" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.8 0 0 0 0 0 0.5 0 0 0 0 0 0.15 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-brunette" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.8 0 0 0 0 0 0.5 0 0 0 0 0 0.15 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-burgundy" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.45 0 0 0 0.25 0 0.2 0 0 0.1 0 0 0.3 0 0.2 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-chestnut" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.9 0 0 0 0.2 0 0.7 0 0 0 0 0 0.1 0 0.1 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-chocolate-brown" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.6 0 0 0 0 0 0.2 0 0 0 0 0 0.1 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-copper" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1.5 0 0 0 -0.2 0 0.8 0 0 -0.2 0 0 0.1 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-dark" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.5 0 0 0 0 0 0.2 0 0 0 0 0 0.1 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-dark-blonde" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1.1 0 0 0 0 0 0.9 0 0 0 0 0 0.4 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-dark-brown" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.6 0 0 0 0 0 0.35 0 0 0 0 0 0.1 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-dark-red" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.7 0 0 0 0.2 0 0.15 0 0 0.1 0 0 0 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-deep-red" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1.5 0 0 0 -0.3 0 0.3 0 0 -0.1 0 0 0 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-dirty-blonde" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.8 0 0 0 0.3 0 0.7 0 0 0.3 0 0 0.2 0 0.5 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-fair-blonde" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1 0 0 0 0.5 0 0.8 0 0 0.4 0 0 0.6 0 0.2 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-ginger" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1.2 0 0 0 0.1 0 0.9 0 0 0 0 0 0.1 0 0.3 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-golden" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1.7 0 0 0 -0.1 0 1.5 0 0 -0.1 0 0 0.1 0 0.3 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-golden-blonde" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1.8 0 0 0 -0.3 0 1.6 0 0 -0.4 0 0 0.3 0 0.1 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-green" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.7 0 0 0 0 0.2 0.65 0.15 0 0 0 0 0.5 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-gray" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-grey" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-hazel" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.8 0 0 0 0.2 0 0.5 0 0 0.2 0 0 0.15 0 0.15 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-light-brown" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.8 0 0 0 0 0 0.7 0 0 0 0 0 0.5 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-light-purple" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.7 0 0 0 0.4 0 0.1 0 0 0.2 0 0 0.7 0 0.3 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-neon-blue" color-interpolation-filters="sRGB">' +
'<feComponentTransfer>' +
'<feFuncR type="gamma" exponent="3.75" />' +
'<feFuncG type="gamma" exponent="0.75" />' +
'<feFuncB type="gamma" exponent="0.25" />' +
'</feComponentTransfer>' +
'</filter>' +
'<filter id="hair-neon-green" color-interpolation-filters="sRGB">' +
'<feComponentTransfer>' +
'<feFuncR type="gamma" exponent="3.00" />' +
'<feFuncG type="gamma" exponent="0.25" />' +
'<feFuncB type="gamma" exponent="0.98" />' +
'</feComponentTransfer>' +
'</filter>' +
'<filter id="hair-neon-pink" color-interpolation-filters="sRGB">' +
'<feComponentTransfer>' +
'<feFuncR type="gamma" exponent="0.10" />' +
'<feFuncG type="gamma" exponent="1.00" />' +
'<feFuncB type="gamma" exponent="0.50" />' +
'</feComponentTransfer>' +
'</filter>' +
'<filter id="hair-olive" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.7 0 0 0 0 0 0.6 0 0 0 0 0 0.15 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-onyx-black" color-interpolation-filters="sRGB">' +
'<feComponentTransfer>' +
'<feFuncR type="gamma" exponent="5.50" />' +
'<feFuncG type="gamma" exponent="6.00" />' +
'<feFuncB type="gamma" exponent="7.00" />' +
'</feComponentTransfer>' +
'</filter>' +
'<filter id="hair-pale-blonde" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.45 0 0 0 0.7 0 0.4 0 0 0.7 0 0 0.6 0 0.4 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-peachy" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1.45 0 0 0 0 0 1.4 -0.1 0 -0.1 0 0 0.85 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-pink" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1.5 0 0 0 0 0 1.5 -0.2 0 -0.2 0 0 1 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-platinum-blonde" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.6 0 0 0 0.4 0 0.6 0 0 0.4 0 0 1 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-purple" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.9 0 0 0 0 0 0.2 0 0 0 0 0 1 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-raven-black" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.3 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-red" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.6 0 0 0 0.4 0 0.25 0 0 0.2 0 0 0 0 0.3 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-red-blonde" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1 0 0 0 0.25 0 0.8 0 0 0.1 0 0 0.35 0 0.15 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-silver" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.8 0 0 0 0.3 0 0.8 0 0 0.3 0 0 0.8 0 0.3 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-strawberry-blonde" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="1.2 0 0 0 0.2 0 1.2 0 0 0 0 0 0.7 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-violet" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="2 -1 0 0 0 0 2 -1 0 0 -1 0 2 0 0 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-white" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.6 0 0 0 0.5 0 0.6 0 0 0.5 0 0 0.6 0 0.5 0 0 0 1 0"/>' +
'</filter>' +
'<filter id="hair-white-blonde" color-interpolation-filters="sRGB">' +
'<feColorMatrix type="matrix" values="0.7 0 0 0 0.5 0 0.7 0 0 0.5 0 0 0.5 0 0.4 0 0 0 1 0"/>' +
'</filter>' +
'</svg>';

$(svg).insertBefore('body');

// filter classes
var hairFilters = [
'hair-auburn'
];
var filters = ['hair-ashen', 'hair-auburn', 'hair-black', 'hair-blazing-red', 'hair-blonde', 'hair-blue', 'hair-bright-red', 'hair-brown', 'hair-brunette', 'hair-burgundy', 'hair-chestnut', 'hair-chocolate-brown', 'hair-copper', 'hair-dark', 'hair-dark-blonde', 'hair-dark-brown', 'hair-dark-red', 'hair-deep-red', 'hair-dirty-blonde', 'hair-fair-blonde', 'hair-ginger', 'hair-golden', 'hair-golden-blonde', 'hair-green', 'hair-gray', 'hair-grey', 'hair-hazel', 'hair-light-brown', 'hair-light-purple', 'hair-neon-blue', 'hair-neon-green', 'hair-neon-pink', 'hair-olive', 'hair-onyx-black', 'hair-pale-blonde', 'hair-peachy', 'hair-pink', 'hair-platinum-blonde', 'hair-purple', 'hair-raven-black', 'hair-red', 'hair-red-blonde', 'hair-silver', 'hair-strawberry-blonde', 'hair-violet', 'hair-white', 'hair-white-blonde'];

var skinFilters = [];
function testHairFilter (classOrColor) {
if (typeof classOrColor !== 'string') {
return;
}
if (!classOrColor.includes('hair-')) {
classOrColor = 'hair-' + classOrColor;
}
if (!filters.includes(classOrColor)) {
console.error('invalid hair color filter');
return;
}

$('img.layer[data-group=hair]').addClass(classOrColor);
}

// filters will be applied for real via the Portrait API
}());
Loading

0 comments on commit 493a4d6

Please sign in to comment.