Merge pull request #49 from sergiomrebelo/41-initialization-method-de…

…fine-background-and-text-colors-not-randomgly

41 initialization method define background and text colors not randomgly

src/@evoposter/evaluator/src/constraints/GridAppropriateSize.mjs

@@ -0,0 +1,18 @@
+/**
+ * Measure the appropriate of the used grid to the size of container
+ * it is related to if the width and height of the grid is
+ * in accordance with poster size
+ *
+ * Sérgio M. Rebelo
+ * CDV lab. (CMS, CISUC, Portugal)
+ * srebelo[at]dei.uc.pt
+ *
+ * v1.0.0 November 2023
+ */
+
+export const compute = (containerSize, grid) => {
+    console.log("colSize=", grid);
+    return 1;
+}
+
+export { compute as default };

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

@@ -13,7 +13,7 @@
  * v3.0.0 November 2023
  */
 
-import {arrMean, map} from "./utils.js";
+import {arrMean, map} from "../utils.js";
 
 const MAX_CONSTRAINT = 0.5;
 const WHITE_SPACE_FACTOR = 3;
@@ -70,4 +70,6 @@ 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);
-}
+}
+
+export { compute as default };

src/@evoposter/evaluator/src/index.mjs

@@ -7,12 +7,14 @@
  * v0.0.1 July 2023
  */
 
-import * as Legibility from "./Legibility.mjs";
+import * as Legibility from "./constraints/Legibility.mjs";
+import * as GridAppropriateSize from "./constraints/GridAppropriateSize.mjs";
 
 export const info = () => {
     console.log ("Evaluator working");
 }
 
 export const legibility = Legibility.compute;
+export const gridAppropriateSize = GridAppropriateSize.compute;
 
 export { info as default };

src/client/Params.js

@@ -9,7 +9,6 @@ export class Params {
     ];
 
 
-    // JOIN
     static availableTypefaces = [
         'Amstelvar', 'Anybody', 'Barlow', 'Cabin', 'Emberly', 'Epilogue', 'IBMPlexSans', 'Inconsolata'
     ]
@@ -45,7 +44,7 @@ export class Params {
 
     static evolution = {
         popSize: 10,
-        noGen: 1000,
+        noGen: 400,
         crossoverProb: 0.75,
         mutationProb: 0.30,
         eliteSize: 1

src/client/app.js

@@ -12,13 +12,11 @@ import {Header} from "./components/Header.js";
 
 import Population from "./controllers/Population.js";
 
-// TODO: upload from package.json
 import {info} from "../@evoposter/evaluator/src/index.mjs";
 
 import 'bootstrap/scss/bootstrap.scss';
 import './main.css';
 
-// TODO: separe app.js from entry point
 window.preload = () => {}
 
 window.setup = () => {
@@ -47,9 +45,9 @@ window.windowResized = () => {
 
 window.keyPressed = () => {
     if (window.app.screen < 2) return null;
-    if (key.toUpperCase() === 'S') {
+    // if (key.toUpperCase() === 'S') {
         // window.app.save();
-    }
+    // }
 }
 
 export class App extends LitElement {

src/client/controllers/Population.js

@@ -2,7 +2,6 @@ import {Params} from "../Params.js";
 import Poster, {Grid} from "./Poster.js";
 import {randomScheme} from "./ColorGenerator.js";
 
-// TODO: place in config file
 const SIZE_MUTATION_ADJUST = 5;
 const TOURNAMENT_SIZE = 5;
 
@@ -54,7 +53,6 @@ export class Population {
 
     // evolve
     evolve = async () => {
-        console.log("params", this.params.size);
         // clean graphics hidden on canvas
         await this.#cleanGraphics();
         document.getElementById(`generation-number`).textContent=this.generations;
@@ -97,8 +95,19 @@ export class Population {
         if (this.generations === 0)  {
             this.log["config"] = this.params;
         }
-        // TODO log generation data
-        // this.log["generations"]
+
+        // log population stats
+        const genData = [];
+        for (let ind of this.population) {
+            genData.push({
+                genotype: ind.genotype,
+                fitness: ind.fitness
+            })
+        }
+        this.log["generations"].push({
+            gen: this.generations,
+            data: genData
+        })
 
         this.generations++;
         this.updated = true;
@@ -108,6 +117,10 @@ export class Population {
             setTimeout(() => {
                 this.evolve();
             }, 100);
+        } else {
+            console.group (`stats`);
+            console.log (this.log);
+            console.groupEnd();
         }
     }
 
@@ -268,15 +281,14 @@ export class Population {
         }
     }
 
-
     toggleGrid = (show) => {
         for (let poster of this.population) {
            poster.toggleGrid(show);
         }
         this.updated = true;
     }
 
-    // TODO: eval
+
     evaluate = async () => {
         // force evaluation of individuals
         for (let individual of this.population) {
@@ -285,12 +297,9 @@ export class Population {
 
         // sort individuals in the population by fitness (fittest first)
         this.population = this.population.sort((a,b) => b.fitness - a.fitness);
-        // console.log(this.population.map(ind => ind.fitness));
     }
 
     copy = (obj) => {
-        // loadash
-        // return Object.assign({}, obj);
         return JSON.parse(JSON.stringify(obj));
     }
 
@@ -309,7 +318,7 @@ export class Population {
         return fittest;
     }
 
-    // draw() auxiliar function
+    // draw aux function
     // verify if the necessary fonts are loaded
     #checkTypeface = () => {
         for (let font of this.#typefaces) {
@@ -321,7 +330,7 @@ export class Population {
         return true;
     }
 
-    // draw auxiliar function
+    // draw aux function
     // clean old files
     #cleanGraphics = () => {
         const graphics = document.querySelectorAll(`canvas:not(#defaultCanvas0)`);
@@ -332,16 +341,13 @@ export class Population {
 
     draw = async () => {
         this.updated = false;
-        // console.log(`this.population`, this.population.length);
-        // TODO:
+        // commented by dev purposes
         /* const typefacesLoaded = this.#checkTypeface();
         if (!typefacesLoaded || (typefacesLoaded && !this.ready)) {
             this.updated = true;
             await this.evaluate();
             this.ready = typefacesLoaded;
-        }*/
-
-        // console.log(typefacesLoaded, this.ready);
+        } */
 
         const n = this.population.length < Params.visiblePosters ? this.population.length : Params.visiblePosters;
         let posX = 0, posY = 0;
@@ -372,11 +378,10 @@ export class Population {
                 imageMode(CENTER);
                 image(pg, x, y);
                 textSize(10);
-                // text (`poster no.${i} (fitness: ${ind.fitness})`, x-textWidth(`poster no.${i} (fitness: ${ind.fitness})`)/2, y + pg.height/2+15);
                 pop();
 
                 // remove the graphics from canvas and free the resources
-                pg.remove();
+                // pg.remove();
 
                 posX += 1;
                 if (posX % Math.floor(width / Params.visualisationGrid.width) === 0) { // (Params.visualisationGrid.cols-1)

src/client/controllers/Poster.js

@@ -154,7 +154,6 @@ class Poster {
         }
 
 
-
         // create genotype
         return {
             grid: grid,
@@ -222,13 +221,13 @@ class Poster {
         this.phenotype = await this.draw();
         this.fitness = 1; // multicreatira
 
-        // constraint
-        const legibility = evaluator.legibility(this.sentencesLenght, this.genotype.grid.getAvailableWidth(), `JUSTIFY`);
+        // constraints
+        const legibility = evaluator.legibility(this.sentencesLenght, this.genotype["grid"].getAvailableWidth(), `JUSTIFY`);
+        // const gridAppropriateness = evaluator.gridAppropriateSize(this.genotype["size"], this.genotype["grid"]);
+
         // 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;
     }
 
     typeset = async(pg) => {