generative logo design

cristina belderrain

A GENERATIVE LOGO
is a dynamic parametric configuration which results from the application of a few rules -- the algorithm specified by the designer.

SUCH A LOGO
will have many variants that can be used to achieve some degree of personalization and variation in the visual identity design.

an earlier example: mit media lab

a more recent example: moczys.com

LET'S WORK OUT
in Processing a simple example based on 2 concepts only: a GRID and a CELL -- an element that can be placed on the grid.

here are the rules you'll be using

• Set up the main parametric values.
• Randomly place a cell on an empty position of the grid.
• Choose the cell color according to its position.
• Continue until all cells are on the grid.

A SQUARE CELL
is the element to be placed on the grid; it will be described by 5 attributes: its position on the grid (x and y axis), its side, its color and its transparency or alpha.

CLASS
SquareCell has a constructor and a method that allows a cell to display itself with/at the right color/right position. A random alpha value is assigned within the constructor.

A SQUARE GRID
will be described by 8 attributes: its origin (x and y axis), size, cell padding, cell side, primary and accent colors, and a flag -- TRUE if a position is filled with a cell, FALSE otherwise.

CLASS
SquareGrid is a bit longer. Here you see the attributes and the constructor. The grid origin depends on the cell side. The array hasCell is implicitly initialized with FALSE values.

PUBLIC
methods recycle() and fillPosition() are used to (a) reset the origin and state of the grid for a new logo instance, and (b) fill an empty position of the grid with a cell.

PRIVATE
method placeCell() places a cell in a given position on the grid. First, the cell (x, y) position is calculated. Then a color is chosen and the new instance is displayed.

THE MAIN PROGRAM
has 3 sections:
(1) global variables declaration, (2) the setup( ) function, where global variables are initialized and (3) the draw( ) function, where the main algorithm is executed.

SECTION 1
holds the global variables. They are the number of logos to be generated, the parametric values and the grid where the cells will be placed.

SECTION 2
holds the setup() function. The size of the display window is defined, the parametric values are initialized and the grid object is created from the values.

SECTION 3
holds the draw() function. Thanks to the decomposition of the program into modules -- the SquareCell and SquareGrid classes -- the main algorithm is very short and clear.

Code Size | % of Total LOC

LET'S RUN
the program with primary and accent colors chosen from Google's vibrant material design colors -- any two colors can be chosen from the whole palette.

samples generated from 5 palettes

AS AN EXAMPLE
variants produced from different palettes can be an effective way to highlight the unique identity of each department within a very large company.

GENERATIVE LOGO DESIGN
is also a short lesson about modular design in software development -- hope you've enjoyed it!

generative logo design