Skip to content

Commit

Permalink
feat: fitness asigment scheme of semantics #25
Browse files Browse the repository at this point in the history
  • Loading branch information
@sergiomrebelo
sergiomrebelo committed Aug 15, 2023
1 parent 3769cbd commit d48b3aa
Show file tree
Hide file tree
Showing 4 changed files with 249 additions and 377 deletions.
31 changes: 30 additions & 1 deletion src/client/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import * as config from '../../evo-poster.config.js';

import 'bootstrap/scss/bootstrap.scss';
import './main.css';

import {arrSum} from "@evoposter/evaluator/src/utils.js";


window.preload = () => {}
Expand Down Expand Up @@ -67,6 +67,27 @@ export class App extends LitElement {

const fonts = this.#getAvailableTypefaces();


let evaluationWeights = [
config["default"]["evaluation"]["GLOBAL_WEIGHTS"]["SEMANTICS"],
config["default"]["evaluation"]["GLOBAL_WEIGHTS"]["AESTHETICS"]
];

let semanticsWeights = [
config["default"]["evaluation"]["SEMANTICS_WEIGHTS"]["EMPHASIS"],
config["default"]["evaluation"]["SEMANTICS_WEIGHTS"]["LAYOUT"],
config["default"]["evaluation"]["SEMANTICS_WEIGHTS"]["VISUALS"]
];

let aestheticsWeights = [
config["default"]["evaluation"]["AESTHETICS_WEIGHTS"]["ALIGNMENT"],
config["default"]["evaluation"]["AESTHETICS_WEIGHTS"]["REGULARITY"],
config["default"]["evaluation"]["AESTHETICS_WEIGHTS"]["JUSTIFICATION"],
config["default"]["evaluation"]["AESTHETICS_WEIGHTS"]["TYPEFACE_PARING"],
config["default"]["evaluation"]["AESTHETICS_WEIGHTS"]["WHITE_BALANCE_FRACTION"],
config["default"]["evaluation"]["AESTHETICS_WEIGHTS"]["BALANCE"]
]

// evolution controllers
this.config = {
evo: {
Expand All @@ -76,6 +97,14 @@ export class App extends LitElement {
mutationProb: Params.evolution.mutationProb,
eliteSize: Params.evolution.eliteSize,
},
evaluation: {
weights: evaluationWeights.map((x) => x/arrSum(evaluationWeights)),
aestheticsWeights: aestheticsWeights.map ((x) => x/arrSum(aestheticsWeights)),
semanticsWeights: semanticsWeights.map((x) => x/arrSum(semanticsWeights)),
modes: {
semanticsVisuals: config["default"]["evaluation"]["MODES"]["SEMANTICS_VISUALS"]
}
},
size: {
width: Params.visualisationGrid.width,
height: Params.visualisationGrid.height,
Expand Down
63 changes: 49 additions & 14 deletions src/client/controllers/Poster.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
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 * as evaluator from "../../@evoposter/evaluator/src/index.mjs";
import {randomScheme, contrastChecker} from "./ColorGenerator.js";
import {sumArr} from "../utils.js";
import {alignment, semanticsEmphasis, whiteSpaceFraction} from "../../@evoposter/evaluator/src/index.mjs";

import {sumArr, sumProduct} from "../utils.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;

const MAX_COLOR_SCHEME_ATTEMPT = config["default"]["COLOR"] !== undefined ? config["default"]["COLOR"]["MAX_COLOR_SCHEME_ATTEMPT"] : 200;

class Poster {
#showGrid = false;
Expand Down Expand Up @@ -233,8 +237,28 @@ class Poster {
evaluate = async (dist, emotionalData = {predominant: []}) => {
this.phenotype = await this.draw();
const noCurrentTypefaces = this.params["typography"]["typefaces"].length;
const weights = this.params["evaluation"]["weights"];

// const layoutSemantics = evaluator.layoutSemantics(this.genotype["grid"]["rows"]["l"], dist, `FIXED`, this.genotype["size"]);
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);
Expand All @@ -244,29 +268,40 @@ class Poster {

// 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"]);
const balance = evaluator.visualBalance(
//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
this.sentencesLength,
balanceMode
);

console.log (`balance=${balance}`)

// this.fitness = layoutSemantics;
// this.fitness = (visualSemantics * 0.3 + layoutSemantics * 0.3 + justification * 0.4);
this.fitness = balance;


// 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.constraint = legibility + gridAppropriateness;*/

// this.metrics["legibility"] = legibility;
// this.metrics["gridAppropriateness"] = 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;

// returns a number between 0 and 0.5
// subtracted to fitness
Expand Down
6 changes: 5 additions & 1 deletion src/client/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,8 @@ export const shuffleArr = (arr) => {

export default () => {
console.log (`default export utils`);
}
}

export const sumProduct = (arr, weights) => {
return arr.reduce((s, v, i) => s + v * weights[i], 0);
}
Loading

0 comments on commit d48b3aa

Please sign in to comment.