diff --git a/html/main.js b/html/main.js index 233feaa..0d4fbc9 100644 --- a/html/main.js +++ b/html/main.js @@ -101,7 +101,6 @@ function filterArtist(artist){ for(var key in images){ image = images[key]; var hideable_row = document.getElementById('row_'+key); - console.log(hideable_row, 'row_'+key) if(image.artist == artist){ document.getElementById('list-'+key).classList.remove('nodisplay'); if(hideable_row!==null) hideable_row.classList.remove('nodisplay'); @@ -154,11 +153,12 @@ function resetAppState(skipScroll){ var clearFilters = ()=>{resetAppState(); window.history.back();}; var closeGallery = ()=>{resetAppState(true); closingGallery=true; window.history.back();}; -var parseHexColor = x=>/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/.exec(x).slice(1).map(i=>parseInt(i, 16)); -var toHexColor = l=>'#'+(l.map(i=>('0'+i.toString(16)).slice(-2))); +var parseHexColor = x=>(/^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/).exec(x).slice(1).map(i=>parseInt(i, 16)); +var toHexColor = l=>'#'+(l.map(i=>('0'+Math.round(i).toString(16)).slice(-2)).join('')).toUpperCase(); var zip = (...rows) => [...rows[0]].map((_,c) => rows.map(row => row[c])); var euclideanDistance2 = (a1, a2) => zip(a1, a2).map(x=>x[0]-x[1]).map(x=>x*x).reduce((a,v)=>a+v, 0); var euclideanDistance = (a1, a2) => Math.sqrt(euclideanDistance2(a1, a2)); +var avg = (...values) => [...values].reduce((acc, val) => acc+val)/values.length function inflateFontAwesome(icon){ var fa = document.createElement('i'); @@ -179,6 +179,34 @@ function colorSimilarity(color1, color2){ return 1-(euclideanDistance(c1, c2)/Math.sqrt(3)); } +function colorAverage(...colors){ + if(colors.length==0) + return null + else + return toHexColor( + zip( + ...colors.map(parseHexColor) + ).map(ch=>avg(...ch)) + ); +} + +function determineLightOrDark(color){ // True: light, False: dark + // https://en.wikipedia.org/wiki/Grayscale#Luma_coding_in_video_systems + y = [0.2126, 0.7152, 0.0722]; + c = parseHexColor(color); + hsp = Math.sqrt( + zip( + y, + c.map(x=>x*x) + ).map( + v => v[0]*v[1] + ).reduce( + (a,v)=>a+v + ) + ); + return hsp > 127 +} + function updateColorPaletteAverage(){ var fields = Array.from(document.querySelectorAll('#row_avg td')); for(var fld of fields){ @@ -188,9 +216,33 @@ function updateColorPaletteAverage(){ while(fld.firstChild) fld.firstChild.remove(); } var relevantColors = new Object(); - for(var idx in images){ - var image = images[idx]; - + for(var color of color_list){ + if(relevantColors[color]===undefined) + relevantColors[color] = new Array(); + for(var idx in images){ + var hideable_row = document.getElementById('row_'+idx); + var image = images[idx]; + var colorUsed = ((image.color || {})[color] || {}).colorUsed; + if(colorUsed!==null && colorUsed!==undefined && !hideable_row.classList.contains('nodisplay')){ + relevantColors[color].push(colorUsed); + } + } + } + for(var idx in relevantColors){ + var colorsShown = relevantColors[idx]; + var cell = document.querySelector('#row_avg td.clr_'+idx); + var canonical = canonical_colors[idx].color; + var avgColor = colorAverage(...colorsShown); + if(avgColor!==null){ + cell.style.background = avgColor; + var isLight = determineLightOrDark(avgColor); + var similarity = round(colorSimilarity(avgColor, canonical)*100, 2); + cell.classList.add(isLight ? 'blackText' : 'whiteText'); + cell.appendChild(document.createTextNode(avgColor)); + cell.appendChild(document.createElement('br')); + cell.appendChild(document.createTextNode(`(${similarity}%)`)); + cell.title = `${similarity}% similar to the ideal value`; + } } } diff --git a/imgs.ini b/imgs.ini index 8e05c86..cc13886 100644 --- a/imgs.ini +++ b/imgs.ini @@ -231,14 +231,14 @@ color.horns@sclera=#f5f3c2 [image_2019-03-17_22-15-10.png] partof=image_2019-04-11_22-59-43.png name=solo -tags=charactermashup,wallpaper,commission,solo,winged,tail,outdated,angry +tags=charactermashup,wallpaper,ych,solo,winged,tail,outdated,angry date=2019-03-17 [image_2019-04-11_22-59-43.png] name=Avenger''s Special Composition artist=Lobodongo date=2019-04-14 -tags=charactermashup,wallpaper,commission,group,winged,tail,outdated,angry +tags=charactermashup,wallpaper,ych,group,winged,tail,outdated,angry technology=digital color.body=#6aa73d color.belly=#c7db5e diff --git a/tags.ini b/tags.ini index 997b78f..ae0d5d2 100644 --- a/tags.ini +++ b/tags.ini @@ -84,6 +84,9 @@ icon=usd [selfdrawn] name=Selfdrawn icon=usd +[ych] +name=Your Character Here +icon=usd [winged]