Ȧdea – Evolving glyphs for aiding creativity in graphic design

Being creative in Graphic Design often requires protected experimentation processes. We present an evolutionary engine for generating glyphs, aiding designers to explore during the creative process. The system employs a Genetic Algorithm to evolve SVG using both interactive and automatic fitness assignment. We present topological variation operators that promote the exploration of adequate topologies and we compare the performance of topological and conventional operators for generating uppercase “A”s. The results demonstrate that the topological crossover operator performs more efficiently both regarding fitness and phenotypes.

To try the latest version of the system (see Figure 1), please visit adea.dei.uc.pt.

**Figure 1**

Ȧdea’s interface. Available at adea.dei.uc.pt.

**Figure 2**

Artefacts designed using glyphs generated by the system. Non-edited vs edited glyphs/typefaces on the top-left corners.

Introduction

Novelty is one of the fundamental characteristics of describing creativity [1]. Yet, finding novel aesthetics often requires a protracted process of exploration (trial and error) of solutions or tools. Numerous Computational Creativity (cc) applications have been successful in the generation of art [4], music [5] and design [3], by applying Evolutionary Computation (EC) or Machine Learning (ml)techniques. Yet, several (cc) systems, mainly the ones based on ML, often end up creating imitations of existing styles. On the other hand, we argue that EC may have greater potential to find novelty due to their similarity to human design processes — search the unexplored space of possibilities, often with a specific conceptual target limiting the possibilities —, and allowing the exploration of a higher number of possibilities.

In this paper, we present a system for evolving variations of SVG glyphs. The goal is to generate ideas for designers to create novel glyphs or typefaces. We evolve SVG rather than raster images due to: (i) endless resizing (convenient for real GD applications); (ii) easier post-production; (iii) easier to create digital typefaces once these are natively represented in vectorial formats such as SVG. Furthermore, the work explores the creation and testing of topological variation operators which meant to preserve the topology of the glyphs.

Approach

Glyph evolution was implemented using a genetic algorithm in javascript. A genotype consists of an SVG path, composed of a variable number of “line” (l) and “move to” (m) points in a 100×100 pixel canvas. A phenotype consists of the SVG render of its genotype.

Any character may be evolved. For creating an initial population, a set of typefaces are randomly picked out of 977 Google fonts. For each selected typeface, a respective SVG glyph is generated using OpenType.js (https://github.com/opentypejs/opentype.js). For starting from randomly defined individuals, the points of each SVG are randomized within the SVG canvas.

**Figure 3**

Topological crossover process between 2 individuals i1 and i2 — (i) a random array of consecutive points from i1 is selected; (ii) each point in the array is exponentially more likely to crossover with its closer points from i2 (regardinig their Cartesian coordinates).

The conventional crossover operator is based on standard 2-point operators [2]. Our crossover operator, which we refer to as topological crossover, intends to shift points that are topologically similar. i2’s points are sorted by their Cartesian distance to each point of i1. Thereafter, a point from i1 is more likely to crossover with its closer points from i2. The selection chances decrease exponentially as i2’s points are further away in the sorted set of points (see Figure 3).

**Figure 4**

Experiments setup — fixed parameters.

Five mutation methods were implemented and run as follows:(i) random point deletion; (ii.a) random point translation; (ii.b) translation of a random array of consecutive points (iii) type toggling of a random point; and (iv) random point creation (L or M). The evaluation may be performed interactively by clicking over phenotypes or automatically assessed by a pre-trained neural network — Tesseract.js (https://tesseract.projectnaptha.com). Further parameterization may be consulted in Figure 4.

Regarding selection, tournament and elitist selection [2] were implemented. The evolutionary process may be finished manually by pressing a button, or automatically when a set number of generations is run or a set percentage of the population is fitted.

Experimental setup and results

Experiments were conducted by evolving uppercase “A”s using both conventional, both topological, and isolating each operator, either from existing and random populations. 30 seeds per setup were run. The remaining parameters were fixed as follows: (i) population size of 50 (ii) elitist selection with a tournament size of 2; (iii) evolve until50 generations; (iv) 80% chance to perform crossover; (v) 5% chance for each mutation operator to occur per gene; (vi) a maximum translation distance of 20 pixels; (vii) 95% chance for a new point to be L rather than M; (viii) a maximum of 20% of an individual may crossover/mutate per iteration; (ix) 80% chance to shift with closer points on topological crossover; (x) automatic fitness assignment;(xi) a target of 80% confidence (the glyphs may representative of the character yet these may differ from the training examples ofTesseract); (xii) 0.5% confidence margin (fitted above 0.995); (xiii)only individuals bigger than 5% of the canvas were considered representative.

**Figure 5**

Fitness evolution; Conventional vs topological crossover methods starting from populations of existing glyphs (30 seeds, 50 generations each)

**Figure 6**

Best fitted individual of each seed; Conventional vs topological crossover methods starting from populations of existing glyphs (30 seeds, 50 generations each).

Noteworthy results were observed while comparing the crossover operators starting from existing glyphs (see Figure 5 and 6). Using the topo-logical operator, both AVG and AVGRI maximized faster. The difference between AVGRI and AVG (AVGDIF) drastically minimizes, suggesting that more individuals were recognizable “A”s. Contrarily, the conventional operator tends to maintain a lower AVGDIF along with generations. In accordance with such, the conventional opera-tor generated considerably prickly and barely readable phenotypes for most seeds. The topological operator often generated readable glyphs, made of more regular shapes.

**Figure 7**

Other characters evolved from existing glyphs using topological methods, automatic evaluation and regarding different generations.

For demonstrating the feasibility of the system regarding other setups, we refer to Figure 7, which showcases other characters evolved from existing glyphs using automatic evaluation and regarding different generations. The generated glyphs may be post-produced for creating typefaces (see Figure 8) and then be applied in the creation of GD artefacts (see Figure 2).

**Figure 8**

Glyphs generated by the system. Non-edited vs edited glyphs/typefaces.

Conclusion

We presented Ȧdea, a system for evolving variations of SVG glyphs, which may serve as a starting point to explore new design spaces. Topological variation operators were tested by evolving uppercase“A”s and using Tesseract.js for fitness assignment. The experimental results indicate that the topological crossover operator outperforms the conventional one in the considered experimental settings, particularly when applied to individuals with a meaningful topology, such as existing font sets. Future work will focus on (i) exploring different automatic evaluation methods; (ii) including figurative SVG images; (iii) testing the system through a user survey; (iv) generating whole typefaces.

References

[1] Margaret A Boden. 1996. Creativity. InArtificial intelligence. Elsevier, 267–291.

[2] A E Eiben and James E Smith. 2015.Introduction to Evolutionary Computing (2nd ed.). Springer Publishing Company, Incorporated.

[3] S. Kitamura and H. Kanoh. 2011. Developing Support System for Making Posters with Interactive Evolutionary Computation. In2011 Fourth International Symposium on Computational Intelligence and Design, Vol. 1. 48–51. https://doi.org/10.1109/ISCID.2011.21

[4] Penousal Machado, Tiago Martins, Hugo Amaro, and Pedro H. Abreu. 2014. An Interface for Fitness Function Design. In Evolutionary and Biologically InspiredMusic, Sound, Art and Design – Third International Conference, EvoMUSART 2014, Granada, Spain, April 23-25, 2014. Proceedings (Lecture Notes in Computer Science), Juan Romero, James McDermott, and João Correia (Eds.), Vol. 8601. Springer.

[5] Asterios Zacharakis, Maximos Kaliakatsos-Papakostas, Costas Tsougras, and Emil-ios Cambouropoulos. 2018. Musical blending and creativity: An empirical evaluation of the CHAMELEON melodic harmonisation assistant.Musicae Scientiae22,1 (2018), 119–144. https://doi.org/10.1177/1029864917712580

External links

To try the latest version of the system, please visit adea.dei.uc.pt.

See Ȧdea on Behance

Publications

D. Lopes, J. Correia, and P. Machado, “Adea – Evolving Glyphs for Aiding Creativity in Typeface Design,” in Proceedings of the 2020 Genetic and Evolutionary Computation Conference Companion, New York, NY, USA, 2020, pp. 97-98.
- Bibtex
- |
- Link
- |
- PDF
D. Lopes, J. Correia, and P. Machado, “Adea: Evolving Glyphs for Aiding Creativity in the Graphic Design Workflow,” in 8th Conference on Computation, Communication, Aesthetics & X (xCoAx 2020), 2020, pp. 160-169.
- Bibtex
- |
- PDF

Author

João Nuno Correia