JavaScreen by Tristan Bagot

Diploma thesis Mémoire de diplôme Tristan Bagot 2014

Table of Contents

A. Introduction

Designing programmes Design programmatique

C. Shape library Bibliothèque de formes D. Processing steps Étapes de développement E. Tools Outils F. Bibliography

A. Introduction

An efficient display with a cognitive approach to graphical objects. How to modernise advertising and get people’s attention ? Un affichage efficace avec une approche cognitive des objets graphiques. Comment moderniser la publicité et attirer l’attention de l’audience ?

Introduction

Art direction has a crucial role to play in the use of the various screens at our disposal. Nowadays, a master visual is designed indifferently for all sorts of platforms, be they digital or physical. JavaScreen is a new display system by using an algorithm to graphically reinterpret content thousands of times without losing its intrinsic character. As part of my project, it creates a generative design applied to a series of fashion photos and enhances by the visual aesthetics of the image : colors, shapes, thickness, verticality, opacity... These graphics are then animated with the image becoming more eye-catching and each time the image is loaded, it creates a unique composition depending on the photograph.

Tristan Bagot

La direction artistique a un rôle décisif à jouer dans l'exploitation des divers écrans aujourd’hui à notre disposition. Actuellement, un visuel est dessiné indifféremment pour toutes les plateformes, qu’elles soient digitales ou physiques. JavaScreen est un nouveau principe d’affichage qui permet au moyen d’un algorithme de réinterpreter graphiquement un contenu des milliers de fois sans en perdre son caractère intrinsèque. Dans le cadre de mon projet, il permet un design génératif appliqué à une série de mode et contraint par les composantes visuelles de l’image : couleurs, formes, épaisseur, verticalité, opacité… Cet habillage est ensuite animé avec l’image et permet sa mise en valeur tout en attirant l’attention de l’audience car chaque visionnage crée une composition unique en accord avec celle-ci.

Designing programmes

Karl Gerstner

english

Karl Gerstner et le design programmatique

Designing programmes

Karl Gerstner

Karl Gerstner was born in Basel, Switzerland in 1930. His life was divided between being a painter and a graphic designer in which he saw success in both pursuits. Gerstner studied design at Allgemeine Gewerbschule in Basel under Emil Ruder. In 1959, he partnered with Markus Kutter, a writer and editor, to form the agency Gerstner+Kutter which then became GGK with the addition of architect Paul Gredinger. GGK became internationally successful as a design agency. Gerstner’s influence on typography is significant to the history and theories of graphic design. He popularized the use of unjustified ragged-right text in typography (Hollis 2002). He also proposed what he called Integral Typography which extended Max Bill’s ideas on typography (Müller-Brockman and Müller 2000). A message in the form of text can convey a meaning or some information, however, when typography is used in an informed manner, Gerstner felt that it could greatly contribute to the connection between the words and the actual meaning (figure 1). Gerstner saw typography as a way to express a whole greater than the sum of the words and the meanings. For example, the large headline of one of his Citroën advertisement stated

“Don’t buy this car” which was followed with “if you don’t expect something out of the ordinary in a car” in smaller type. While this may seem commonplace or trite today, Gerstner+Kutter trailblazed the clever use of type to make a point (Gerstner 2001). In other words, Gerstner knew that the aesthetics of typography can aid the communication of ideas and information and that was the foundation of Integral Typography. Gerstner extended this idea beyond typography to the point where it was more important to consider the whole of the organization/company/ project instead of the individual design elements or pieces (MüllerBrockmann and Müller 2000). This is echoed in Gerstner+Kutter’s principles brochure which speaks of the necessary connection between word and illustration in design pieces (Hollis 2006). His contribution to graphic design may be this holistic pursuit of understanding a design problem within a context to find its solution. Gerstner defines design as picking out determining elements and combining them. Much of his design theory hinges on the designer’s ability to make informed choices based on understanding of the problem and the combinations of elements. To come to a problem’s solution, the designer must be able to describe and understand the problem. By then developing a set of intellectual criteria, the designer is able to make ‘creative decisions’ which are based on a systematic approach instead of instinct (Gerstner 1964). The set of ‘intellectual criteria’ that Gerstner speaks about can also be seen as a set of consciously derived parameters which directly address

Karl Gerstner in front of Aperspektive 3. Das grosse Gleitspiegelbild Photo : Bettina Matthiessen

Design programmatique

Karl Gerstner, The Tangential Eccentric (1956)

the problem the designer has identified. These parameters can then be used to work through the problem to find a solution which is a combination

Defining Programmes In reference to computers, a programme is defined as “a sequence of instructions that a computer can interpret and execute” (Free Dictionary 2010). While computers were in their infancy in Gerstner’s time, his approach to programmes is very similar to that of computers. In his theories, a programme is a systematic approach to solving a problem which comes from an understanding of a problem. It is important to note that the approach is responsive and often unique to the specific problem. Interestingly, Gerstner illustrates that a programmatic approach to problems is not limited to graphic design but many vocations from literature to music to photography to architecture. For each, a programme is different but in all cases, it comes from defining the problem and then enables the designer, musician, writer, photographer or architect to systematically try to solve that problem. With Gerstner’s pursuits as a graphic designer and a painter, we can see his programmatic approach manifest itself in two different, but equally systematic ways. To remain in the realm of graphic design, I will outline two examples of how Gerstner used programmes in different ways.

Application of Programatic Principles to Design of the determining elements which convey the intended message. For Gerstner, these criteria took the form of a systematic set of rules or parameters which he referred to as a programme. In 1964, Gerstner wrote Designing Programmes which outlined his theories.

What is interesting about Gerstner’s concepts of programmes is how they were conceived well before the impact of computers was truly felt by humanity. The ideas that Gerstner had laid out in Designing Programmes are almost more relevant to design in the computer age than they were when he wrote

Designing programmes

Karl Gerstner

be seen as limiting, it can also be seen as establishing the parameters of a design problem which can keep a designer focused. By integrating a systematic approach to ideation, iteration or composition, a designer can reduce the time spent on randomly arriving at solutions. This time saved in the early stages can then be used later on to refine and improve concepts. For example, Gerstner’s typogram programme allows for rapid and systematic generation of a number of possibilities for a wordmark. The programme itself, does not offer the answer or anything new, but it clears the designer’s mind of needing to conceive iterations so they can focus on the design problem and its needs. Programmes allow designers to keep from starting from scratch every time. A grid provides the designer with something that they can use from layout to layout for a magazine or document as a starting point. The success in any programme relies on its adequacy and robustness

Karl Gerstner, Boîte à musique

them (Cooper 1989). The connotations of program(me)s in regard to creativity and the links between generative programs and aesthetics have been debated in the past (Franke 1989). More recently, the idea of programmes in design are commonplace as designers are more involved in the web and digital mediums. Understanding and utilizing this approach has become deeply connected to design process (Lupton and Cole Phillips 2008). With the necessity to learn languages like html or systems like css (cascading style sheets), the designer becomes more comfortable within structure and Gerstner’s concepts start to make sense and apropos to the design process. Beyond the implications of computers and technology, why are Gerstner’s concepts of programmes important to designers ? Programmes are a way to introduce economy into a design process. Gerstner asserted that programmes are a means of developing a structure to be creative in. While a structure can

Title

Subtitle

Karl Gerstner, Color Sounds (four works), 1973

“Instead of solutions for problems, programmes for solutions — the subtitle can also be understood in these terms : for no problem (so to speak) is there an absolute solution.”

in addressing the design problem. As a grid is developed, it is important that its design is informed by the design problem it is addressing. The grid allows the designer to rapidly lay out pages in an informed manner. In the case of Capital magazine, the grid was also complex enough that it was flexible and provided ample opportunity for the designer to be creative in their explorations laying out the pages. This complexity liberates the designer from the constraints of the simple grid by offering incredible possibilities and variations for layouts while maintaining consistency between elements, pages and issues. The creativity that the Capital grid affords is proof in itself that rules can provide a framework to solving a design problem without determining the final result (Lupton and Cole Phillips 2008). The grid is never the answer to the design problem, it is just provides informed guidelines to arrive at the answer.

Conclusion There are two aspects of design process which are central to Gerstner’s theories. First is creativity. Gerstner’s evangelism

for introducing programmes into design process is not to limit creativity, but to ensure creative energy is efficiently allocated to the stages where it most benefits answering the design problem. Instead of energy expended during the preliminary stages, clever use of programmes and frameworks can allow the designer to operate systematically and quickly. Once the seed of an idea or solution has presented itself through a systematic approach, creativity can take over to improve and refine the idea. The second fundamental aspect of Gerstner’s theories is the importance defining and understanding of the design problem. Gerstner (1968) saw describing the problem as intrinsic to arriving at a solution and he saw a problem as never having a single solution : “Instead of solutions for problems, programmes for solutions — the subtitle can also be understood in these terms : for no problem (so to speak) is there an absolute solution. Reason : the possibilities cannot be delimited absolutely. There is always a group of solutions, one of which is the best under certain conditions.” (Gerstner 1968) Once the design problem has been carefully defined, then an appropriate programme could be developed to explore solutions. The failure

Designing programmes

Karl Gerstner

of a programme comes when it is not developed comprehensively enough or does not regard the design problem adequately. For example, the morphological typogram programme (Gerstner 1968) uses the matrix of parameters and variations of type to derive a wordmark. This programme may not produce a decent design solution if it is not comprehensive enough to address the design problem or its solutions. This is especially relevant now, as the vast number of typefaces available to a designer today is not satisfied with Gerstner’s “24. Some other” category for typeface choice. The lesson from this is that a programme must always be reactive to the design problem, and also to what cannot be predicted as in the case of grids which may house any variety or combination of content. The complexity or flexibility that a designer works into a programme by thoroughly understanding the design problem should reduce or eliminate the cases where programmes fail. In the end, programmes can never be considered the answer to a solution ; they are just a tool to help the designer arrive at a solution to a design problem. In the case of the wordmark programme, the programme falls away as soon as the solution is found but in the case of the grid, it’s always there in the background that enforces the design. The preceding quote really gets to the paradox in Gerstner’s ideas and in design as a whole. Gerstner sought to find a systematic way to find solutions to problems which implies that there is an absolute and singular answer to any problem. However, in this quote he denies the absolute solution on the grounds that there is no way of systematically ever fully understanding a problem. For me, any problem that merits a solution that requires creativity and analysis is central to the act of design. These sorts of problems are

rarely static and its impossible to believe that there could be a single solution. They can change through time and become harder to solve as technology advances as in the case of Gerstner’s typogram versus the number of typefaces which exist or they can become incredibly relevant as in the case of grids and their incredible importance in web design. As with time, cultures, aesthetics, politics and perceptions change which also alter problems and their solutions. The ongoing project in Design 396 illustrated that there could easily be three to five different solutions that addressed the assigned problem. Each designer created a different design solution which was wellconsidered, researched and proven to be effective. While the four assigned problems seem straightforward, each designer interpreted the problem differently and created a different solution proving there is never a singular answer to any problem.

Bryan Kulba

Le programme comme efficacité Program as efficiency

Karl Gerstner fut l’un des premiers designers à expérimenter avec l’ordinateur, et ce dès le début des années 60, époque où l’informatique était essentiellement réservée aux militaires et aux scientifiques. Proche de l’école d’Ulm, où il fut d’ailleurs enseignant, la pratique de Gerstner s’inscrivait dans une logique fonctionnaliste et rationaliste. Pour lui, l’ordinateur était avant tout une puissance de calcul dont il tirait partie — de manière conceptuelle ou pratique — pour computer l’ensemble des solutions d’un design. Il s’agissait donc avant tout de discrétiser ce dernier afin de le rendre calculable. Si l’ordinateur lui permettait de calculer l’ensemble des solutions d’une équation donnée, Gerstner visait cependant à n’en obtenir qu’une. Il chercha alors à écarter, par un processus itératif, les possibilités jugées mauvaises. Pour cela, il utilisa une approche scientifique, inspirée de l’analyse morphologique de l’astrophysicien Fritz Zwicky, consistant à éliminer des résultats non par la soustraction de variables, mais par l’exclusion des combinaisons illogiques. Cette approche reste aujourd’hui singulière par la relation qui s’y articule entre design et programmation. C’est

un processus similaire que revendique Petr van Blokland, figure du design hollandais contemporain. Pour lui, « toutes les possibilités sont là, c’est juste qu’il y en a trop ». Son flux de travail consiste en une réévaluation permanente d’un design dans le but de l’affiner — méthode comparable à celle de Gerstner par son aspect récursif. Si cette boucle est infinie (un design pouvant, selon lui, toujours être amélioré), le temps détermine l’échéance. L’ordinateur est donc un moyen pour Blokland d’accélérer les cycles, et ainsi, de parfaire le plus possible un projet dans le temps imparti. Blokland travaille essentiellement pour de grandes entreprises, telles la Rabobank ou la poste néerlandaise, qui ont besoin de mettre fréquemment à jour un grand nombre de documents. Les logiciels disponibles sur le marché ne le satisfont pas. Ils sont clairement séparés en deux catégories : ceux mettant l’accent sur la qualité graphique, et ceux visant l’automatisation de la mise en pages. Il conçoit alors Xierpa, un logiciel permettant de produire des publications imprimées ou en ligne, à partir de contenus intégrés par le client via une interface web. La mise en pages est ensuite générée automatiquement selon un algorithme gérant texte, images,

français

Designing programmes

Program as efficiency

“La délégation à un programme de certains gestes et savoir-faire du designer pose la question des pertes et apports qualitatifs notamment en termes de design.”

tableaux, etc. Blokland encode ainsi le design graphique, la mise en pages, dans l’algorithme, de la même manière qu’une charte graphique stipule règles et contraintes. Mais contrairement à celle-ci, un algorithme, exécuté par une machine, ne peut omettre aucun cas de figure. Blokland nomme d’ailleurs « systematic design » ce champ d’action. La délégation à un programme de certains gestes et savoir-faire du designer pose la question des pertes et apports qualitatifs notamment en termes de design. Blokland renonce ici à la précision d’un travail artisanal (micro-typographie, gestion des exceptions, etc.) au profit d’un gain de productivité et de réactivité. Il se satisfait selon ses dires d’une qualité graphique moyenne, tant qu’il n’y a pas de « fautes majeures ». C’est dans la perspective d’un système que la qualité d’un tel design se voit, et non dans ses documents individuels. Le discours et le travail de Blokland sont articulés autour de la notion de temps et de sa rationalisation : il parle volontiers de « facteur branche » ou encore d’« horizon de l’outil ». Pour lui, le temps est « toujours ce qui compte ». Si ce facteur temps est également présent chez Gerstner, ce n’est pas pour des raisons d’ordre économique

et productiviste, mais plutôt d’ordre conceptuel. Le but de Gerstner est d’épuiser systématiquement l’ensemble des solutions d’un problème donné. Blokland a une approche beaucoup plus pragmatique : il peut tout à fait mettre de côté l’ordinateur en faveur d’outils manuels tels un crayon et une feuille de papier si un croquis est un gain de temps. La machine est vue comme l’un des moyens de parvenir à une fin, et il s’agit avant tout de choisir le bon outil en fonction de la tâche à accomplir. Si cette métaphore de l’outil valorise le designer en suggérant qu’il contrôle une technologie à son service, elle ne prend cependant pas en compte les dimensions sociales, culturelles ou contextuelles de la technologie.

Alexandre Leray Stéphanie Vilayphiou

Carmen Mitrotta Kenzo, Eye of the Tiger #12 Dominik Tarabanski

C. Shape library

Photography

Shape library

Photography

Michèle van Vliet, Mind’s eye Ada Hamza

Francesco Nazardo Andrea Spotorno

Bibliothèque de formes

Graphics

Dominik Tarabanski

2. 4.

Shape library

Graphics

1. Esther Stocker, Untitled, 2013 2. Travess Smalley, Capture Physical Presence #51, 2011 3. Kasper Florio, Reframe 4. MAXImin 5. Karl Kleiner, Flos 6. Doshi&Levien, Chandlo 7. Jefferson Cheng, Jazzlab at Google

Processing steps

JavaScreen needs four steps to work. These need to be conducted at some point by a human being : the art director. JavaScreen a besoin de quatre étapes pour fonctionner. Celles-ci doivent être parfois contrôlées par un être humain : le directeur artistique.

Processing steps

Étapes de developpement 1. Produce

2. Analyse

Create content by taking a series of photographs.

Determine colors and shapes for each photograph.

3. Program

Generate random graphical content from analysis.

4. Display

1. Créer

2. Analyser

Animate and mix the graphics with the photographs.

Créer du contenu en réalisant une série photo.

Déterminer des couleurs et des formes pour chaque photo.

3. Programmer

Générer du contenu graphique aleatoire à partir de l’analyse.

4. Afficher

Animer et mélanger les graphiques avec les photographies.

Produce

Photo shoot and editing of 40 pictures

Create content by making a series of photographs.

Models : Margaux Dereume, Élise Hannebicque and Erwan Sene Stylist : Margaux Dereume Photography & Editing : Tristan Bagot

Processing steps

Produce

Title

Subtitle

Analyse

Color algorithm, tagging and splitting

Determine colors and shapes for each photograph.

1. Easy computation of colors based on an image in order to get a color palette. 2. Separate the different levels ofÂ the image toÂ determine theÂ foreground and background. 3. Addition of tags to each visual depending on what it evokes.

Image processed

R G B

57 230 42 251 58 194 189 33 5 72 231 166 34 21 86

layer_1

Processing steps

layer_2

Analyse

List of all the parameters PARAMETER TYPE

DEFAULT DESCRIPTION

angle

[0,360]

array[int(min),int(max)]

Angle of each element is set

randomly between min and max.

blur

int

Degree of blur.

cap

string

square

Type of stroke cap to render. All applicable

values can be found on the w3c spec.

colors

array[color,…]

dominant colors The colors of the shapes are picked randomly.

curve

array[int(min),int(max)]

[0,30]

How many curve points between the beginning

and the end of the line.

ellipse

boolean

true

Creation of ellipses in the canvas.

fill

boolean

true

Shapes are filled of color.

frame

int

All the lines are constrained in the document

minus a frame.

fullscreen

boolean

false

All the lines go beyond the document.

number

int

rand(1,100)

Number of elements

opacity

array[float(min), float(max)]

[1,1]

Opacity of each element is set randomly

between min and max.

poly

boolean

true

Creation of polygons in the canvas.

square

boolean

true

Creation of squares in the canvas.

squared

array[int(min),int(max)]

[0,30]

stripe

boolean

false

How many right angles between the beginning and the end of the line. All the lines in the same direction and separated with a gap equal to the size

of the line n-1.

stroke

Stroke width of each element is set randomly

array[int(min),int(max)]

[10,50]

between min and max.

strokecolors

array[color,…]

dominant colors The colors of the strokes are picked randomly.

triangle

boolean

true

The photograph is made up of rectangles, circles and quad with rounded corners.

Creation of triangles in the canvas.

pattern_1

One repeated pattern in two different directions. One printed fabric.

fabric_1

pattern_2

Program

Development of a content based application

Generate random graphical content from analysis.

Geometric shapes are randomly generated and animated from the completed analysis. Developed using JavaScript and PHP.

Analysis

R G B

57 230 42 251 58 194 189 33 5 72 231 166 34 21 86

pattern_1

Processing steps

pattern_2

fabric_1

Program

Display

Gather all the steps in a single display

Generate random graphical content from analysis.

This automatic graphical design can then be shown on any screen featuring a graphics processorâ&#x20AC;&#x2030;: public display screen, computer, tablet, smartphone.

Loading animation 1.

Processing steps

Display

Processing steps

Display

Processing steps

Display

E. Tools

JavaScreen wouldn’t be possible without the help of opensource JavaScript libraries shared by their authors online. JavaScreen n'aurait pas été possible sans l'aide de framework JavaScript opensource partagés par leurs auteurs en ligne.

Tools

Outils JavaScript

Two.js

JavaScript is a scripting language object oriented used primarily in HTML pages. In contrast to servers languages (running on the site), JavaScript is executed on the user’s computer by the browser itself.

Two.js is a two-dimensional drawing API geared towards modern web browsers. It is renderer agnostic enabling the same API to draw in multiple contexts : SVG, Canvas, and WebGL.

JavaScript est un langage de script orienté objet principalement utilisé dans les pages HTML. À l’opposé des langages serveurs (qui s’exécutent sur le site), JavaScript est exécuté sur l’ordinateur de l’internaute par le navigateur lui-même.

Two.js est une API de dessin en deux dimensions orientée vers les navigateurs web modernes. Son moteur de rendu permet à la même API de dessiner dans de multiples contextes : SVG, Canvas, et WebGL.

First release : 1995 Author : Brendan Eich

First release : 2013 Author : Jono Brandel www.jonobr1.com

SVG

jQuery

Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG images and their behaviors are defined in XML text files. As XML files, SVG images can be created and edited with any text editor, but are more often created with drawing software.

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

Scalable Vector Graphics est un format d’images vectorielles basé sur le langage de balisage XML. Il répond parfaitement à des besoins graphiques légers, qu’ils soient statiques, dynamiques ou interactifs.

First release : 2006 Author : John Resig www.ejohn.org

Bibliothèque JavaScript libre qui porte sur l’interaction entre JavaScript (comprenant Ajax) et HTML, et a pour but de simplifier des commandes communes de JavaScript.

F. Bibliography Cooper, M. (1989) Computers and design. Design Quarterly, (142), 4-31. Franke, H. W. (1989) Mathematics as and artisticgenerative principle. Leonardo. Supplemental Issue, 2, 25-26. Gerstner, K. (1968) Designing programmes ; four essays and an introduction. with an introd. by Paul Gredinger. english version by D. Q. Stephenson (New enl ed.). Teufen AR, Switzerland : A. Niggli. Gerstner, K., & Kröplien, M. (Eds.). (2001) Karl Gerstner : Review of 5 x 10 years of graphic design etc. (English ed.). Ostfildern-Ruit, Germany : Hatje Cantz. Hollis, R. (2002) The designer as programmer : Review of 5x10 years of graphic design. Retrieved April 13, 2010, from http ://www.eyemagazine. com/review.php ?id=62&rid=71 Hollis, R. (2006) Swiss graphic design : The origins and growth of an international style, 1920-1965. New Haven : Yale University Press. Jochum, Emanuel (2014) About how flexible design systems turn brands into dynamic visual identities, May 2013 ; revised edition in December 2013, dynamicbranding.info. Lupton, E., & Cole Phillips, J. (2008) Graphic design : The new basics (1st ed.). New York, NY : Princeton Architectural Press.

Bibliography

Müller-Brockmann, J., & Müller, L. (Eds.). (2000) Josef Müller-Brockmann : Pioneer of swiss graphic design (2nd ed.). Baden, Switzerland : Lars Müller Publishers. The Free Dictionary (2010) Programme - definition.

26 Mars 2014 : ad :tech San Francisco 2014

AOL a dévoilé aujourd’hui son projet de création d’une nouvelle plateforme publicitaire programmatique globale à l’intention des marques, des agences de publicité et des éditeurs. ONE d’AOL regroupera les équipes et les technologies qui se trouvent derrière Adap.tv, AdLearn Open Platform (AOP) et MARKETPLACE afin d’offrir à ses clients une visibilité sans précédent sur tous les écrans, incluant la télévision ainsi que tous les formats et les types d’inventaires.

Thanks

Remerciements

I would like to thank all those who helped me in this project.

Margaux Dereume Stylist & textile designer

Je voudrais remercier tous ceux qui m'ont aidĂŠ dans ce projet.

Gilles Poplin Art director Jono Brandel Designer & developer Samuel Delabarre Designer & developer Jules Banide Graphic designer Ă&#x2030;lise Hannebicque Graphic designer Erwan Sene Artist Martine Bagot Jean-Luc Bagot My parents

Tristan Bagot www.tristanbagot.com JavaScreen ÂŠ 2014