Skip to content

Commit

Permalink
feat: Fitness Assignment Scheme including all the metrics #25
Browse files Browse the repository at this point in the history
  • Loading branch information
@sergiomrebelo
sergiomrebelo committed Aug 15, 2023
1 parent d48b3aa commit 84677e0
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 133 deletions.
3 changes: 0 additions & 3 deletions src/client/controllers/Population.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,9 +357,6 @@ export class Population {

#staticPenalty = async () => {
this.population = this.population.sort((a,b) => (b.fitness-b.constraint) - (a.fitness-a.constraint));
// debug
// best individual fitness
// console.log ("best individual=", this.population[0].fitness, this.population[0].constraint);
}

copy = (obj) => {
Expand Down
118 changes: 61 additions & 57 deletions src/client/controllers/Poster.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
import * as evaluator from '@evoposter/evaluator/lib/evaluator.min.js';

// DEV LINK
// import * as evaluator from '@evoposter/evaluator/src/index.mjs';

import {Params} from "../Params.js";
import backgroundStyles from "./BackgroundStyles.js";

import {randomScheme, contrastChecker} from "./ColorGenerator.js";
import {sumProduct} from "../utils.js";

import {sumArr, sumProduct} from "../utils.js";

import {Params} from "../Params.js";
import * as config from './../../../evo-poster.config.js';

const MAX_COLOR_SCHEME_ATTEMPT = config["default"]["COLOR"] !== undefined ? config["default"]["COLOR"]["MAX_COLOR_SCHEME_ATTEMPT"] : 200;
Expand All @@ -29,11 +23,31 @@ class Poster {
this.constraint = 0;

this.metrics = {
legibility: 1,
gridAppropriateness: 1
constraints: {
legibility: 0,
gridAppropriateness: 0,
general: 0
},
aesthetics: {
alignment: 0,
regularity: 0,
justification: 0,
typefaceParing: 0,
whiteSpace: 0,
balance: 0,
general: 0,
weights: 0
},
semantics: {
emphasis: 0,
layout: 0,
visuals: 0,
general: 0,
weights: [0,0,0]
}
}
this.sentencesLength = [];

this.sentencesLength = [];

const h = (genotype === null) ? params["size"]["height"] : genotype["size"]["height"];
this.maxFontSize = Params.typography.maxSize * h;
Expand All @@ -43,7 +57,6 @@ class Poster {

this.#showGrid = params !== null ? params.display.grid : false;
this.phenotype = null;
// this.evaluate();
}

copy = () => {
Expand Down Expand Up @@ -109,7 +122,7 @@ class Poster {
JSON.parse(JSON.stringify(params.size.margin))
);

// define texboxes
// define textboxes
const textboxes = [];

const alignment = params.typography.verticalAlignment === 0 ?
Expand Down Expand Up @@ -160,7 +173,6 @@ class Poster {
}

const images = [];
// console.log(`params.images`, params.images);
for (let input of params.images) {
const src = input.src;
const img = loadImage(src, async (img) => {
Expand All @@ -176,7 +188,6 @@ class Poster {
})
}


// create genotype
return {
grid: grid,
Expand Down Expand Up @@ -242,69 +253,62 @@ class Poster {
let semantics = 0; // semantic part of fitness
let aesthetics = 0; // aesthetics part of fitness

//const ls = layoutSemantics(this.genotype["grid"]["rows"]["l"], dist, `FIXED`, this.genotype["size"]);
// const semanticsEmphasis = evaluator.semanticsEmphasis(this.genotype["textboxes"], dist, noCurrentTypefaces);
// const justification = evaluator.legibility(this.sentencesLength, this.genotype["grid"].getAvailableWidth(), `JUSTIFY`);
// const visualSemantics = evaluator.semanticsVisuals(emotionalData, this.genotype["textboxes"], this.genotype.background.colors, this.params.typography.typefaces);

if (weights[0] > 0) {
const semanticsWeights = this.params["evaluation"]["semanticsWeights"];
const emphasis = (semanticsWeights[0] > 0) ? evaluator.semanticsEmphasis(this.genotype["textboxes"], dist, noCurrentTypefaces) : 0;
const layoutMode = this.params["evaluation"]["modes"]["semanticsVisuals"] !== undefined ? this.params["evaluation"]["modes"]["semanticsVisuals"] : `FIXED`;
const layout = (semanticsWeights[1] > 0) ? evaluator.semanticsLayout(this.genotype["grid"]["rows"]["l"], dist, layoutMode, this.genotype["size"]) : 0;
const visuals = (semanticsWeights[2] > 0) ? await evaluator.semanticsVisuals(emotionalData, this.genotype["textboxes"], this.genotype.background.colors, this.params.typography.typefaces) : 0;
semantics = sumProduct( [emphasis, layout, visuals], semanticsWeights);
}


// semantics
// const ls = layoutSemantics(this.genotype["grid"]["rows"]["l"], dist, `FIXED`, this.genotype["size"]);
// const semanticsEmphasis = evaluator.semanticsEmphasis(this.genotype["textboxes"], dist, noCurrentTypefaces);
// const justification = evaluator.legibility(this.sentencesLength, this.genotype["grid"].getAvailableWidth(), `JUSTIFY`);
// const visualSemantics = evaluator.semanticsVisuals(emotionalData, this.genotype["textboxes"], this.genotype.background.colors, this.params.typography.typefaces);

// const alignment = evaluator.alignment(this.sentencesLength, this.genotype["textboxes"].map(tb => tb["alignment"]));
// const regularity = evaluator.regularity(this.genotype["grid"]["rows"]["l"]);
// save info
this.metrics["semantics"]["emphasis"] = emphasis;
this.metrics["semantics"]["layout"] = layout;
this.metrics["semantics"]["visuals"] = visuals;
this.metrics["semantics"]["general"] = semantics;
this.metrics["semantics"]["weights"] = semanticsWeights;
}

// textboxes have the same typography colour
// const whiteSpace = evaluator.whiteSpaceFraction(this.phenotype, this.genotype["textboxes"][0]["color"]);
//const typefaceParing = evaluator.typefaceParing(this.genotype["textboxes"].map(gene => gene["typeface"]), this.params["typography"]["typefaces"])

let balanceMode = this.genotype["textboxes"][0]["alignment"] === 0 ? `LEFT` : this.genotype["textboxes"][0]["alignment"] === 1 ? `CENTER` : `RIGHT`;
balanceMode += this.genotype["typography"]["verticalAlignment"] === 0 ? `-TOP` : this.genotype["typography"]["verticalAlignment"] === 1 ? `-CENTER` : `-BOTTOM`;

const balance = await evaluator.visualBalance(
this.phenotype,
this.genotype["size"],
this.genotype["grid"]["rows"],
this.genotype["textboxes"].map(tb => tb.size),
this.sentencesLength,
balanceMode
);

console.log (`balance=${balance}`)
if (weights[1] > 0) {
const aestheticsWeights = this.params["evaluation"]["aestheticsWeights"];
const alignment = (aestheticsWeights[0] > 0) ? evaluator.alignment(this.sentencesLength, this.genotype["textboxes"].map(tb => tb["alignment"])) : 0;
const regularity = (aestheticsWeights[1] > 0) ? evaluator.regularity(this.genotype["grid"]["rows"]["l"]) : 0;
const justification = (aestheticsWeights[2] > 0) ? evaluator.legibility(this.sentencesLength, this.genotype["grid"].getAvailableWidth(), `JUSTIFY`) : 0;
const typefaceParing = (aestheticsWeights[3] > 0) ? evaluator.typefaceParing(this.genotype["textboxes"].map(gene => gene["typeface"]), this.params["typography"]["typefaces"]) : 0;
const whiteSpace = (aestheticsWeights[4] > 0) ? evaluator.whiteSpaceFraction(this.phenotype, this.genotype["textboxes"][0]["color"]) : 0;
let balanceMode = this.genotype["textboxes"][0]["alignment"] === 0 ? `LEFT` : this.genotype["textboxes"][0]["alignment"] === 1 ? `CENTER` : `RIGHT`;
balanceMode += this.genotype["typography"]["verticalAlignment"] === 0 ? `-TOP` : this.genotype["typography"]["verticalAlignment"] === 1 ? `-CENTER` : `-BOTTOM`;
const balance = (aestheticsWeights[5] > 0) ? await evaluator.visualBalance(this.phenotype, this.genotype["size"], this.genotype["grid"]["rows"], this.genotype["textboxes"].map(tb => tb.size), this.sentencesLength, balanceMode) : 0;
aesthetics = sumProduct([alignment, regularity, justification, typefaceParing, whiteSpace, balance], aestheticsWeights);

// this.fitness = layoutSemantics;
// this.fitness = (visualSemantics * 0.3 + layoutSemantics * 0.3 + justification * 0.4);
// save info
this.metrics["aesthetics"]["alignment"] = alignment;
this.metrics["aesthetics"]["regularity"] = regularity;
this.metrics["aesthetics"]["justification"] = justification;
this.metrics["aesthetics"]["typefaceParing"] = typefaceParing;
this.metrics["aesthetics"]["whiteSpace"] = whiteSpace;
this.metrics["aesthetics"]["balance"] = balance;
this.metrics["aesthetics"]["general"] = aesthetics;
this.metrics["aesthetics"]["weights"] = aestheticsWeights;
}


// constraints
// const legibility = evaluator.legibility(this.sentencesLength, this.genotype["grid"].getAvailableWidth(), `OVERSET`);
/*const gridAppropriateness = evaluator.gridAppropriateSize(
const legibility = evaluator.legibility(this.sentencesLength, this.genotype["grid"].getAvailableWidth(), `OVERSET`);
const gridAppropriateness = evaluator.gridAppropriateSize(
this.genotype["size"].width, this.genotype["size"].height,
this.genotype["grid"].rows.l, this.genotype["grid"].columns.l, this.genotype["grid"].marginsPos
);
this.constraint = legibility + gridAppropriateness;*/

// this.metrics["legibility"] = legibility;
// this.metrics["gridAppropriateness"] = gridAppropriateness;

this.fitness = sumProduct([semantics, aesthetics], weights);
console.log (`fitness=${this.fitness} (semantics=${semantics}, aesthetics=${aesthetics})`);
this.constraint = 1;
this.constraint = legibility + gridAppropriateness;

this.metrics["constraints"]["legibility"] = legibility;
this.metrics["constraints"]["gridAppropriateness"] = gridAppropriateness;
this.metrics["constraints"]["general"] = this.constraint;

// returns a number between 0 and 0.5
// subtracted to fitness
return {
"fitness": this.fitness,
"constraints": this.constraint
Expand Down
Loading

0 comments on commit 84677e0

Please sign in to comment.