Mirrors/queerallyear
2
0
Fork 0
mirror of https://github.com/lenaschimmel/queerallyear synced 2024-11-22 11:23:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Lena Schimmel 2019-06-30 00:37:16 +02:00
parent be60d136e7
commit 57dc0dea2b
4 changed files with 40 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
node/server/server.js
View file

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

12
node/tool/browser.js
View file

@ -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() {

20
node/tool/flags.js
View file

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

25
node/tool/recolor.js
View file

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