feat: legibility metric (not-weighted) #25

src/@evoposter/evaluator/src/Legibility.mjs

@@ -15,106 +15,59 @@
 
 import {arrMean, map} from "./utils.js";
 
-const modes = [
-    [`OVERSET`, 0]
-]
+const MAX_CONSTRAINT = 0.5;
+const WHITE_SPACE_FACTOR = 3;
 
-export const compute = (sentencesLength = [], minSize, mode= 'OVERSET', maxLimitScale= 2) => {
+const MODES = [`OVERSET`, `JUSTIFY`,`ATTEMPT_JUSTIFY`];
+
+export const compute = (sentencesLength = [], minSize, mode= 'OVERSET', maxLimitScale= 1) => {
     let results = [];
     let max = minSize * maxLimitScale;
     for (let sentence of sentencesLength) {
         let dif = minSize-sentence;
-        // OVERSET MODE
-        dif = calculateOverset(dif, max);
-        results.push(dif);
+        let value = MAX_CONSTRAINT;
+        switch (mode) {
+            case `JUSTIFY`:
+                value = justify(dif, max);
+                break;
+            case `ATTEMPT_JUSTIFY`:
+                value = attemptJustify(dif, max);
+                break;
+            default:
+                value = overset(dif, max);
+                break;
+        }
+        results.push(value);
     }
 
     // calculate mean
-    const value = arrMean([...results]);
-    return value;
+    const mean = arrMean([...results]);
+    return mean;
 }
 
-
-const calculateOverset = (value, max, maxConstraint = 0.5) => {
+const overset = (value, max) => {
     // only prejudice when text overfits the poster
     // if dif bigger than 0
     value = value >= 0 ? 0 : value;
     // if dif lower than limit
     value = value <= -max ? -max : value;
     // transform in scale of 1 (bad) to 0 (good)
-    value = map (value, -max, 0, maxConstraint, 0);
-    return value;
+    return map (value, -max, 0, MAX_CONSTRAINT, 0);
 }
 
+const justify = (value, max) => {
+    // prejudice both overset and small lettering
+    value = Math.abs(value)
+    // if the dif is bigger than max
+    value = value > max ? max : value;
+    // transform in scale of 1 (bad) to 0 (good)
+    return map (value, max, 0, MAX_CONSTRAINT, 0);
+}
 
-/**
- * async _assessLegibility (scale=2, assesMethod='softComingOut&WS', visualLimit=200, max=10000, min=500, weighted=true) {
- *         let tws = this.state.phenotype.ref.current.tws;
- *         let resByLine = [];
- *
- *         for (let tw of tws) {
- *             let value = tw[0]-tw[1];
- *             if (tw[1] === 0) {
- *                 //blank elements are good to layout
- *                 value = 1;
- *             } else {
- *                 // compensate in the same way when the text is to big or to small.
- *                 if (assesMethod === 'minWhiteSpace') {
- *                     value = Math.abs(value) > visualLimit ? visualLimit : value;
- *                 }
- *                 // only compensate texts that overfits the textbox
- *                 else if (assesMethod === 'minComingOut') {
- *                     value = value > 0 ? 0 : value; //if text inside poster
- *                     value = value < -(visualLimit) ? -(visualLimit) : value; //if not
- *                 }
- *                 //compensate more when the text overfits that when it
- *                 else if (assesMethod === 'hardComingOut&WS') {
- *
- *                     if (value < 0) { //if content outfits the poster, i.e. the value is negative
- *                         value = visualLimit;
- *                     } else { //if inside of poster
- *                         if (Math.abs(value) < visualLimit) {
- *                             const dif = Math.abs(value - visualLimit);
- *                             const d = map(dif, 0, visualLimit, 1, 2);
- *                             value = Math.abs(value) / d;
- *                         } else {
- *                             value = visualLimit;
- *                         }
- *                     }
- *                 } else if (assesMethod === 'softComingOut&WS') {
- *                     if (value < 0) {
- *                         value = visualLimit;
- *                     } else {
- *                         if (Math.abs(value) > visualLimit) {
- *                             const dif = Math.abs(value - visualLimit * 2);
- *                             const d = map(dif, 0, visualLimit * 2, 1, 3);
- *                             value = Math.abs(value) / d;
- *                         } else {
- *                             value = 0;
- *                         }
- *                     }
- *                 }
- *
- *                 value = map(Math.abs(value), 0, visualLimit, 1, 0);
- *             }
- *
- *             resByLine.push(value);
- *         }
- *
- *         let w = Array(resByLine.length).fill(1/resByLine.length);
- *
- *         if  (weighted) {
- *             w = this.state.genotype[1].map(x => x[2]);
- *             let sumw = arrSum(w);
- *
- *             w = w.map(x => x / sumw);
- *         }
- *
- *         for (let l=0; l<resByLine.length; l++) {
- *             resByLine[l] = resByLine[l]*w[l];
- *         }
- *
- *
- *         return Math.pow(arrSum(resByLine),1.5);
- *     }
- */
+// attempt to justify the text
+// prejudice more when the text overset box than when it is smaller
+const attemptJustify = (value, max) => {
+    // if dif bigger than 0 (it is not overset), soften the value
+    value = value >= 0 ? value/WHITE_SPACE_FACTOR : value;
+    return justify(value, max);
+}

src/client/components/panels/GenerationPanel.js

@@ -35,6 +35,7 @@ export class GenerationPanel extends LitElement {
         this.errorMessage = errorMessage;
 
         // input fields
+        // TODO: refactor to list or array
         this.fields = {
             content: new TextArea(`<b>Content</b> The text lines are defined by pilcrows (¶)`,
                 this.params["sentences"], `text-area-content`, (e) => {

src/client/controllers/Poster.js

@@ -165,12 +165,13 @@ class Poster {
     }
 
     evaluate = () => {
-        this.fitness = 1;
+        this.fitness = 1; // multicreatira
 
         // constraint
-        const legibility = evaluator.legibility(this.sentencesLenght, this.genotype.grid.getAvailableWidth());
+        const legibility = evaluator.legibility(this.sentencesLenght, this.genotype.grid.getAvailableWidth(), `ATTEMPT_JUSTIFY`);
         // returns a number between 0 and 0.5
         // subtracted to fitness
+        // TODO: read paper
         this.fitness -= legibility;
         // this.fitness = Math.round(this.fitness*100)/100;
     }