update
This commit is contained in:
parent
7f761fc31c
commit
4218cfb02a
64
html/main.js
64
html/main.js
|
@ -101,7 +101,6 @@ function filterArtist(artist){
|
||||||
for(var key in images){
|
for(var key in images){
|
||||||
image = images[key];
|
image = images[key];
|
||||||
var hideable_row = document.getElementById('row_'+key);
|
var hideable_row = document.getElementById('row_'+key);
|
||||||
console.log(hideable_row, 'row_'+key)
|
|
||||||
if(image.artist == artist){
|
if(image.artist == artist){
|
||||||
document.getElementById('list-'+key).classList.remove('nodisplay');
|
document.getElementById('list-'+key).classList.remove('nodisplay');
|
||||||
if(hideable_row!==null) hideable_row.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 clearFilters = ()=>{resetAppState(); window.history.back();};
|
||||||
var closeGallery = ()=>{resetAppState(true); closingGallery=true; 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 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 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 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 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 euclideanDistance = (a1, a2) => Math.sqrt(euclideanDistance2(a1, a2));
|
||||||
|
var avg = (...values) => [...values].reduce((acc, val) => acc+val)/values.length
|
||||||
|
|
||||||
function inflateFontAwesome(icon){
|
function inflateFontAwesome(icon){
|
||||||
var fa = document.createElement('i');
|
var fa = document.createElement('i');
|
||||||
|
@ -179,6 +179,34 @@ function colorSimilarity(color1, color2){
|
||||||
return 1-(euclideanDistance(c1, c2)/Math.sqrt(3));
|
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(){
|
function updateColorPaletteAverage(){
|
||||||
var fields = Array.from(document.querySelectorAll('#row_avg td'));
|
var fields = Array.from(document.querySelectorAll('#row_avg td'));
|
||||||
for(var fld of fields){
|
for(var fld of fields){
|
||||||
|
@ -188,9 +216,33 @@ function updateColorPaletteAverage(){
|
||||||
while(fld.firstChild) fld.firstChild.remove();
|
while(fld.firstChild) fld.firstChild.remove();
|
||||||
}
|
}
|
||||||
var relevantColors = new Object();
|
var relevantColors = new Object();
|
||||||
for(var idx in images){
|
for(var color of color_list){
|
||||||
var image = images[idx];
|
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`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
4
imgs.ini
4
imgs.ini
|
@ -231,14 +231,14 @@ color.horns@sclera=#f5f3c2
|
||||||
[image_2019-03-17_22-15-10.png]
|
[image_2019-03-17_22-15-10.png]
|
||||||
partof=image_2019-04-11_22-59-43.png
|
partof=image_2019-04-11_22-59-43.png
|
||||||
name=solo
|
name=solo
|
||||||
tags=charactermashup,wallpaper,commission,solo,winged,tail,outdated,angry
|
tags=charactermashup,wallpaper,ych,solo,winged,tail,outdated,angry
|
||||||
date=2019-03-17
|
date=2019-03-17
|
||||||
|
|
||||||
[image_2019-04-11_22-59-43.png]
|
[image_2019-04-11_22-59-43.png]
|
||||||
name=Avenger''s Special Composition
|
name=Avenger''s Special Composition
|
||||||
artist=Lobodongo
|
artist=Lobodongo
|
||||||
date=2019-04-14
|
date=2019-04-14
|
||||||
tags=charactermashup,wallpaper,commission,group,winged,tail,outdated,angry
|
tags=charactermashup,wallpaper,ych,group,winged,tail,outdated,angry
|
||||||
technology=digital
|
technology=digital
|
||||||
color.body=#6aa73d
|
color.body=#6aa73d
|
||||||
color.belly=#c7db5e
|
color.belly=#c7db5e
|
||||||
|
|
Loading…
Reference in New Issue
Block a user