A multi-media 3D experience to raise general awareness of generative art
In 2015, we created a generative art application for Société Générale. Realized in collaboration with the Magic Garden agency, the project gave birth to 24,000 original creations. It answered a challenge: using algorithms as raw materials for a public communication operation.
USING ALGORITHMS AS CREATIVE RAW MATERIALS
Generative art is a branch of digital art in which algorithms are used as creative raw materials. Thus, in a work of generative art, a computer program transforms data and signals into aesthetic patterns. A distinctive feature of this program is that it includes a “random” part: signals are never translated the same way. In this feature lies its poetry: generative art adds a measure of irrationality and uncontrollability to the usual mathematical coldness of data.
This is probably why this artistic trend is now more resonant than ever: in a world where we’re inundated with data on a daily basis, generative art grants our wish to still see fortuity and uncertainty have their place.
The “Créa-Carte” operation, carried out in 2015 for Société Générale, gave us the opportunity to validate this intuition, and to demonstrate that the general public would warmly welcome this generative aesthetic.
Créa-Carte is a collaborative project on generative art: it invites visitors to give an input gesture, from which a 3D aesthetic form will be generated. This individual creation was then added as a collaboration to the flow of all contributions recorded from the start of the operation.
The application contains an algorithm that transforms the participants’ gesture data into harmonious 3D objects, and adds a bit of randomness to the generation process.
This “algorithm-assisted creation” experience was conceived for Société Générale’s 2015 contest to create credit card visuals. It is the result of six months of work involving the entire Dataveyes team. It has allowed us to develop new technologies and to define efficient arbitrations between a non-expert public and the data world.
The present case study describes how we mobilized the aesthetics of data to offer a wide-audience, interactive experience.
THE METHOD: HOW DID GENERATIVE ART ENABLE US TO MEET THE REQUIREMENTS FOR A WIDE-AUDIENCE OPERATION?
At the origin of this project is the intuition of Magic Garden agency, in charge of organizing the competition of credit card visuals creation for Société Générale: the latter saw in generative art a promising creative concept, capable of giving renewed momentum to the third edition of this competition, targeting a very wide audience.
The subtle blend of art and algorithms appeared as a solution to reach several goals:
- Allowing non-experts to create aesthetic and original visuals;
- Encouraging numerous contributions, each with a unique result;
- Reaching a wide audience with a stimulating experience;
- Adding a collective dimension to the individual creation process;
- Allowing creation on any device.
ALLOWING NON-EXPERTS TO CREATE AESTHETIC AND ORIGINAL VISUALS
The main challenge of this competition was to reach a wide audience, and go beyond the small circle of professional designers and creators. To do this, it was important to allow any user to feel like an artist… and therefore to propose a creative application capable of generating aesthetic and original visuals, whatever the level of inspiration of the participant or their skill on digital media.
Upon launch of the project, we devised several generative approaches to meet the objectives of the project.
The second approach, featuring a “revolution of matter” concept, was retained, because it created a direct link between the gesture drawn by the participant and the aesthetic rendering wrapped around this initial layout.
The generative part offered an efficient solution to obtain consistently aesthetic results. Indeed, generated visuals are not made by the participant only: an algorithm intervenes to transform the initial gesture of each contributor into a 3D object.
Once the “revolution” approach was validated, our mission was then to calibrate the algorithm so that it could transform any gesture, even the most absurd one, into a fine-looking shape.
To that end, a designer and a developer worked hand in hand for several days, combining the projection capabilities of a 3D design tool like C4D, and the building capabilities of WebGL. By synthesizing their views and sensitivities, our lead designer and lead creative coder put together a computer program that was sufficiently powerful and poetic to generate ever-harmonious 3D shapes.
ENCOURAGING NUMEROUS CONTRIBUTIONS, EACH WITH A UNIQUE RESULT
The 3D shape generation program had to produce results that were sufficiently varied from one participation to the next, to give contributors the impression they were the authors of a unique creation, and to encourage them to participate several times.
To that end, we introduced a strong random ingredient in the algorithm that would generate 3D shapes. Two parameters were involved in this algorithm, which was used to wrap the participant’s gesture in matter: the angle of revolution, and the height of the translation between the revolution’s starting and ending points. These two parameters were chosen randomly within ranges of values we had previously defined, so that the result would always appear aesthetic and unique even when the user performs an identical gesture.
Then, the 3D object’s gradient colors and the background color are randomly set within a palette specifically composed for the operation. The eighteen colors composing this palette were designed to blend harmoniously whatever the quartet randomly chosen.
Finally, once the 3D object was generated by the algorithm, the user could then customize their creation by modifying its colors, material and transparency.
Given the 18 x 18 x 18 x 18 color combinations, the three available materials and the ten selectable levels of transparency, more than three million unique customization combinations were possible, in addition to the already infinite number of possible shapes generated by the algorithm’s random part. In other words… it was impossible to get the same result twice!
REACHING A WIDE AUDIENCE WITH A STIMULATING EXPERIENCE
This was probably the greatest challenge in the project: get a wide audience interested in generative art and thus turn a topic that may seem esoteric into a playful experience. To achieve this, we focused on two objectives:
- create an experience that is attractive enough to be self-sufficient;
- eliminate all obstacles to user interaction and progression in the experience.
First, we centered user path on the creation area: all navigation options in the application converge towards it. Within this creation area, we encouraged creativity by allowing users to do, undo, redo, test, customize, and so on. We thus made it possible for the user to get enjoy a stimulating experience: seeing a simple gesture turn into something tangible and fine-looking.
In order for this experience to reach as wide an audience as possible, we hunted down everything that could hinder interactions. We ran usability tests on the application to identify and correct small frictions that may discourage users.
These tests were carried out using the “voice aloud” formative test method (see detailed presentation of our test methodology in this previous article). In this method, a candid user is confronted with concrete situations, in order to get them to perform tasks on a prototype of the application. The tester is asked to verbalize what they are doing and what they see on the application.
These tests enabled us to correct specific problems of usability and ergonomics.
ADDING A COLLECTIVE DIMENSION TO THE INDIVIDUAL CREATION PROCESS
To echo Société Générale’s brand signature — “Team spirit” — it was decided that the operation would not be limited to an individual competition for the creation of credit card visuals, but would also include a collaborative dimension.
We thus transformed individual gestures into acts of co-creation: after having created and customized their 3D particle, each contributor was invited to add this piece to a collaborative work composed of the particles of all previous participants.
Here we also mobilized our revolution algorithm, as a cement between individual and collective levels of the application. To plot the collective work, we calculated the mean gesture of all participants, and used it as an input for the algorithm, in order to obtain a 3D skeleton that embodied the community, skeleton which was then populated by the miniatures of individual creations.
As a result, each new participant was likely to influence the outline of the collective form by their gesture. This was, of course, particularly true for the first contributors, when any additional plot had a proportionally stronger impact. Then it was less and less visible once the number of participants increased, and individual creations only marginally influenced the collective average.
In conclusion, each new individual creation contributed to the collective work in two ways:
- by bringing an extra piece into the mesh making up the collective work,
- and by influencing the average trace determining the 3D form of this collaborative work.
This close intertwining of individual and collective levels embodied very well the notion of “team spirit” promoted by Société Générale, but required the implementation of advanced technical solutions.
Indeed, by postulating that the competition would attract tens of thousands of participants (which it did), displaying all 3D creations side by side within the collective work presented several difficulties. First, this could create visual noise and interfere with the readability of the interface. Secondly, this posed a serious performance problem: our browsers are far from being able to display so many complex 3D objects at the same time, all the while retaining the ability to interact with them.
We therefore decided to draw the collective work from simplified forms: identical red dots, each symbolizing an individual creation and its precise positioning within the collective work. When the user zooms on the collective work, the closest red dots fade and the original creations are revealed.
Still for performance reasons, we could not display these creations as 3D objects: the collective mesh actually featured their reflection in 2D. We thus had to produce a 2D image of each individual creation.
To ensure integrity of the image database, we could not render 2D images in the browser. So we used Atom Electron to generate them server-side. This technology allowed us to embed a programmatically manipulated browser on a rendering server, thus enabling us to automate the transformation of WebGL code from 3D creations into 2D images.
To guarantee the robustness of this solution, we supplemented it with a queue management system, RabbitMQ, which ensures that the image renderings are done one at a time, with no risk of server overload or data loss.
Finally, given the resources mobilized server-side by this image generation function, and the database size, we opted for a technical architecture articulating three servers:
- a front-end server, to manage the application to which the user connects;
- a database server, to manage the contributions database;
- an image rendering server, equipped with a graphics card.
This robust and virtuous architecture had the advantage of being scalable, and could overcome potential load increases: RabbitMQ supports multiple communication channels, it was thus possible to set up new image rendering servers, to manage an increased inflow of participations.
ALLOWING CREATION ON ANY DEVICE
In order to reach the largest number of users, the application required compatibility with a wide range of devices: computers, tablets and smartphones.
Visuals and user path automatically adapted to both the platform’s screen resolution and performance.
3D rendering was developed in WebGL and worked smoothly on computers, but also recent tablets and smartphones. For older smartphones, a Canvas version was able to display a slightly less aesthetic, but less resource-heavy, 3D rendering that was thus compatible with a greater number of devices.
Finally, the experience was also made available in the physical universe, as a demo version for terminals in Société Générale agencies. A dozen of them, located in city centers, overlooking a busy street, displayed the latest creations of the contest’s participants. From the street, passers-by could interact with these 3D shapes thanks to a webcam that detected their movements.
TAKEAWAYS: WHAT DID WE LEARN FROM 24 000 USERS ?
Review of the operation
The operation was launched on May 19, 2015. The participants then had 3 weeks to submit their most beautiful generative art visuals to the credit card contest. Once the winners were announced on June 9, 2015, the experience was perpetuated for a year: visitors to Société Générale’s “Concours creacarte” website could still create and personalize their 3D particle and submit it to the collective work , but also visualize works created by all previous contributors.
More than 13,500 participants were registered during the first 3 weeks of the competition, which represented a significant increase in the number of entries compared to previous competitions.
The project was rewarded with an Awwwards on June 4th and an FWA on July 21st. These two design awards helped revive visibility of the project, and thus traffic on the dedicated website.
A study of the numerous tweets and Facebook posts related to the project shows that the experience has reached a wider audience than the only circle of digital design lovers.
One year after its launch, the website counted more than 24,000 particles.
User preferences
Contributions in themselves constitute an interesting data set describing the gestures made by the participants as well as their color choices.
Red, black and yellow were among the preferred colors of contributors, who, on the other hand, shunned the pastel colors. The fact that red and black are Société Générale’s signature colors may have something to do with this particular result.
The gestures traced on computer, tablet and mobile present a very wide range of shapes: very minimalist traits, signatures, figurative drawings, etc.
Following is a ranking by shape similarity for the first 2000 participants. Please see: http://sg.sorting.dataveyes.com.
CONCLUSION: WHY A BANK BRAND SHOULD CONSIDER GENERATIVE ART
This experience of generative art carried out alongside Société Générale has proved that it is possible to reach a wide audience by proposing an interactive experience where data aesthetics comes first. In the background, this original project allowed Société Générale to demonstrate to the general public that algorithms and data can be domesticated and put to the service of the user. And such a demonstration holds strong value for the banking sector.
WATCH THE VIDEO
Want to know more? Get yourselves ready for our next articles by subscribing here on Medium.
You can also follow us on Twitter or discover our last use cases on our website.
