Better animation, better color distribution in cetrain flags and with domains.

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");

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();
+    domain = $("#domainselect :selected").val();
-    previewLogo.setDomainMode(mode);
+    previewLogo.setDomainMode(domain);
+    queer.flagSelected();
 }
 
 window.queer.initColors = function() {

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];

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;