Project Lumen

To celebrate its 25th birthday, MIT Media Lab recently gave itself a new visual identity. The result is so remarkably original and complex that it was an immediate success. This new visual identity was created through generative design. This mixed technique based on programming and particularly on an algorithm enables the designer to create a system of rules that will generate numerous results.

This technique, which blends graphic design and code writing, enables a new generation of designers to explore a territory unknown to brands and to the general public. Indeed, for many graphic designers from Generation Y (born between 1980 and 1996), learning graphic design often involved a natural and empirical use of technology.

medialab-img-02.jpeg

Whether a pure geek’s passion or an artistic or code writing experiment conducted in a garage, generative design has already gained legitimacy in the world of art and design. In his article “What is Generative Art?” Philip Galanter offers the following definition: “Generative art refers to any art practice where the artist uses a system, such as a set of natural language rules, a computer program, a machine, or other procedural invention, which is set into motion with some degree of autonomy contributing to or resulting in a completed work of art.”

how to copy.png

This definition emphasises the fact that the artist is much more proactive than in a traditional approach. The artist uses rules or guidelines to set up a framework in which multiple artworks will take shape. Although generative art exists beyond software and computing systems, its development is closely tied to technology and involves creative people who are mostly visible on the Internet.

If you have been following my post on Instagram (@muteartcollective), you would know that I have been trying my hands on generative graphics for almost a year now. What started as a hobby project about exploring the world of creative coding, turned to me seriously reading about processes, techniques, tools, and history in this unique and relatively new field of new media design. But it was not until last November, that I was able to (in some capacity) break out of the experimental realm and incorporate it into a live setting.

I like the idea of it. Partly because the possibilities are endless but also because it combines my knowledge of computer programming and my love for visual arts. It is an extension of computer codes from a traditional ‘instruction giving’ role to one ‘defining visual and spatial structures’. This gives a designer endless renditions of a graphical system.

Lumen, a product of such exploration in this realm, is a generative algorithm that converts the data collected from the individuals at DI conference 2020, into unique, organic, and personalized visual assets that are manifested as attendee takeaways like ID cards, Zoom backgrounds, etc. The process follows 3 steps:

  1. DATA COLLECTION AND PARSING: The data submitted by the participant during the registration is parsed and transformed into a mathematical format. The form captures the ‘distinctive profile’ of the participants.

  2. VISUAL LIBRARY: This mathematical form is then fed to the javascript graphic library P5.js and converted into a distinctive shape based on shape logic.

  3. SHAPE LOGIC: Using the number of the letters in the name of an individual and their relative positioning in the English alphabet sequence, curved vertices are distributed radially on the canvas and the resultant shape is formed. The curve tightness is adjusted with the length of characters in the name.

While all shapes created are not the same, they follow a common visual style with the bounds of the ‘graphical language’ coded in the system. This is coherent with my belief that every individual, however unique, is a part of the whole and we are capable of changing the world if we speak a common language of truth, peace, and respect.

 

 

Below are few examples of patterns created for participants of Design Inspire 2020, which was themed around “Hope and Resilience”:

 

 
4-4.png
4-2.png
4-3.png