diff --git a/node/server/server.js b/node/server/server.js index 84f9c38..94fd8b0 100644 --- a/node/server/server.js +++ b/node/server/server.js @@ -173,7 +173,7 @@ app.get('/design/download', async function (req, res) { gradients.colorLetter(letter, color, false); }); } else { - const colormap = flags.flagmap(flags.linesInDesign(layout), flags.allFlags[flag], flag); + const colormap = flags.flagmap(flags.linesInDesign(layout), flags.allFlags[flag], flag, domain == "bold"); gradients.changeGradients(colormap); } gradients.setShadowMode(withshadow ? "on" : "off"); diff --git a/node/tool/browser.js b/node/tool/browser.js index 96f07e7..bc6d63e 100644 --- a/node/tool/browser.js +++ b/node/tool/browser.js @@ -6,10 +6,11 @@ var colorLib = require('color'); var lastLayout = ""; var activeColor = "#000000"; var lines = 1; +var domain = "off"; window.queer = {}; window.queer.showflag = function (flagName, animate = true) { - mainLogo.changeGradients(flags.flagmap(2, flags.allFlags[flagName], flagName), animate); + mainLogo.changeGradients(flags.flagmap(2, flags.allFlags[flagName], flagName, domain == "bold"), animate); } window.queer.initFlagAnimation = function () { @@ -32,7 +33,7 @@ window.queer.initFlagAnimation = function () { $("#identity").html("(" + flagName + ")").fadeIn(500); }); - mainLogo.changeGradients(flags.flagmap(2, flags.allFlags[flagName], flagName), true); + mainLogo.changeGradients(flags.flagmap(2, flags.allFlags[flagName], flagName, domain == "bold"), true); } } @@ -102,7 +103,7 @@ window.queer.flagSelected = function () { }); $("#colors").removeClass("hidden"); } else { - previewLogo.changeGradients(flags.flagmap(lines, flags.allFlags[flagName], flagName), false); + previewLogo.changeGradients(flags.flagmap(lines, flags.allFlags[flagName], flagName, domain == "bold"), false); $("#colors").addClass("hidden"); } shadow = $("#withshadow").is(":checked"); @@ -126,8 +127,9 @@ window.queer.layoutSelected = function () { } window.queer.domainSelected = function () { - mode = $("#domainselect :selected").val(); - previewLogo.setDomainMode(mode); + domain = $("#domainselect :selected").val(); + previewLogo.setDomainMode(domain); + queer.flagSelected(); } window.queer.initColors = function() { diff --git a/node/tool/flags.js b/node/tool/flags.js index 9975598..04b9221 100644 --- a/node/tool/flags.js +++ b/node/tool/flags.js @@ -1,19 +1,25 @@ -exports.flagmap = function (lines, c, flagName) { +exports.flagmap = function (lines, c, flagName, colorDomain = false) { if (lines == 1) { if (c.length == 3) { return { "Q0": c[0], "U0": c[0], "E0": c[0], "E1": c[0], "R0": c[0], "A0": c[1], "L0": c[1], "L1": c[1], "Y0": c[2], "E2": c[2], "A1": c[2], "R1": c[2] }; } else { var ret = {}; - for (let i = 0; i < exports.letters.length; i++) { + var relevantCount = exports.letters.length - (colorDomain ? 0 : 3); + console.log("Mapping on letter count: " + relevantCount); + for (let i = 0; i < relevantCount; i++) { const letter = exports.letters[i]; - ret[letter] = c[Math.floor(i * c.length / exports.letters.length)]; + ret[letter] = c[Math.floor(i * c.length / relevantCount)]; } } return ret; } if (lines == 2) { - if (c.length == 3) + if(flagName == "Inter") + return { "Q0": c[0], "U0": c[0], "E0": c[1], "E1": c[0], "R0": c[0], "A0": c[0], "L0": c[0], "L1": c[1], "Y0": c[0], "E2": c[1], "A1": c[0], "R1": c[0] }; + else if(flagName == "Polyamor") // [polyamBlue, polyamRed, polyamYellow, polyamRed, black]; + return { "Q0": c[0], "U0": c[0], "E0": c[1], "E1": c[3], "R0": c[4], "A0": c[0], "L0": c[0], "L1": c[1], "Y0": c[2], "E2": c[1], "A1": c[4], "R1": c[4] }; + else if (c.length == 3) return { "Q0": c[0], "U0": c[0], "E0": c[1], "E1": c[1], "R0": c[2], "A0": c[0], "L0": c[0], "L1": c[0], "Y0": c[1], "E2": c[1], "A1": c[2], "R1": c[2] }; else if (c.length == 4) return { "Q0": c[0], "U0": c[1], "E0": c[1], "E1": c[2], "R0": c[3], "A0": c[0], "L0": c[1], "L1": c[1], "Y0": c[2], "E2": c[2], "A1": c[3], "R1": c[3] }; @@ -28,7 +34,7 @@ exports.flagmap = function (lines, c, flagName) { if (lines == 3) { if(flagName == "Inter") return { "Q0": c[0], "U0": c[0], "E0": c[1], "E1": c[0], "R0": c[0], "A0": c[1], "L0": c[0], "L1": c[1], "Y0": c[0], "E2": c[0], "A1": c[1], "R1": c[0] }; - else if(flagName == "Polyamor") + else if(flagName == "Polyamor") return { "Q0": c[0], "U0": c[0], "E0": c[0], "E1": c[0], "R0": c[0], "A0": c[1], "L0": c[2], "L1": c[1], "Y0": c[4], "E2": c[4], "A1": c[4], "R1": c[4] }; else if(flagName == "Kinky") // [kinkBlue, black, kinkBlue, white, kinkRed, black, kinkBlue]; return { "Q0": c[0], "U0": c[1], "E0": c[0], "E1": c[1], "R0": c[0], "A0": c[3], "L0": c[4], "L1": c[3], "Y0": c[1], "E2": c[0], "A1": c[1], "R1": c[0] }; @@ -37,7 +43,7 @@ exports.flagmap = function (lines, c, flagName) { else if (c.length == 4) return { "Q0": c[0], "U0": c[1], "E0": c[1], "E1": c[2], "R0": c[3], "A0": c[0], "L0": c[1], "L1": c[1], "Y0": c[2], "E2": c[2], "A1": c[3], "R1": c[3] }; else if (c.length == 5) - return { "Q0": c[0], "U0": c[1], "E0": c[2], "E1": c[3], "R0": c[4], "A0": c[0], "L0": c[1], "L1": c[1], "Y0": c[2], "E2": c[2], "A1": c[3], "R1": c[4] }; + return { "Q0": c[0], "U0": c[0], "E0": c[1], "E1": c[2], "R0": c[4], "A0": c[1], "L0": c[2], "L1": c[3], "Y0": c[1], "E2": c[2], "A1": c[3], "R1": c[4] }; else if (c.length == 7) return { "Q0": c[1], "U0": c[2], "E0": c[3], "E1": c[4], "R0": c[5], "A0": c[0], "L0": c[1], "L1": c[2], "Y0": c[3], "E2": c[4], "A1": c[5], "R1": c[6] }; else if (c.length == 8) @@ -137,7 +143,7 @@ exports.allColors = [ exports.gay = [gayRed, gayOrange, gayYellow, gayGreen, gayBlue, gayViolet, gayPink]; -exports.philly = [black, phillyBrown, gayRed, gayOrange, gayYellow, gayGreen, gayBlue, gayPink]; +exports.philly = [black, phillyBrown, gayRed, gayOrange, gayYellow, gayGreen, gayBlue, gayViolet]; exports.aro = [romanticDarkGreen, romanticLightGreen, white, aceGrey, black]; exports.nonbinary = [nonbinaryYellow, white, nonbinaryViolet, black]; exports.genderqueer = [genderqueerViolet, white, genderqueerGreen]; diff --git a/node/tool/recolor.js b/node/tool/recolor.js index 2a8ed4e..f3594af 100644 --- a/node/tool/recolor.js +++ b/node/tool/recolor.js @@ -70,15 +70,21 @@ method.svgString = function() { } method.changeGradients = async function(flag, animate = false) { + indices = []; for (let i = 0; i < this.defs.children.length; i++) { - const gradient = this.defs.children.item(i); + indices[i] = i; + } + shuffleArray(indices); + + for (let i = 0; i < this.defs.children.length; i++) { + const gradient = this.defs.children.item(indices[i]); var id = gradient.id; if (id.length == 3) { var letter = id.substring(0,2); this.colorLetterGradient(gradient, flag[letter], animate); - } if(animate) - await sleep(25); + await sleep(35); // time per gradient + } } } @@ -91,9 +97,9 @@ method.colorLetter = async function(letterToColor, targetColor, animate = false) if(letter == letterToColor) { this.colorLetterGradient(gradient, targetColor, animate); } - } if(animate) - await sleep(45); + await sleep(35); // time per gradient + } } } @@ -126,7 +132,7 @@ method.colorLetterGradient = async function(gradient, targetColor, animate = fal for (let s = 0; s < stops.length; s++) { if(animate) - await sleep(45); + await sleep(55); // time per stop var stop = stops.item(s); var stopcolor = this.originalColors[id][s]; @@ -198,4 +204,11 @@ function getRange(stops, index) { }; } +function shuffleArray(array) { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } +} + module.exports = GradientSvg; \ No newline at end of file