Revised and Updated Edition Generative Design Visualize, Program, and Create with JavaScript in p5.js Benedikt Groß Hartmut Bohnacker Julia Laub Claudius Lazzeroni with contributions by Joey Lee and Niels Poldervaart Translated by Marie Frohling Princeton Architectural Press, New York I I.0 Preface Generative design has long ceased to be a trade secret among design students; in some universities, it is now firmly integrated into the curriculum. From infographics to the visualization of sound, from the fine arts to archi- tecture, and especially in the realm of communication design and media installations, generative design allows for dynamic, stunning, and fascinating applications. Processing and vvvv have for many years been the programming environments of choice for artists and designers. However, more recently there has been a shift toward more web- centric applications, giving rise to new coding environments such as p5.js, a JavaScript library that is especially programmed for and by artists, designers, and other web users. The first edition of Generative Design was written almost a decade ago, and its acclaimed underlying teaching methods are still unrivaled. In this updated edition, the authors create an even more accessible and up- to- date entry point into creative coding with the use of JavaScript. In the spirit of the first edition of Generative Design, the goal is to remove any fear of programming and demonstrate how existing program snippets can be manipulated and tweaked to achieve amazing results almost at the click of a button. Generative design fundamentally changes the design process: the designer shifts from being a performer of tasks to being a conductor, effectively orchestrating the decision- making process of the computer. This is what generative design is all about: iteratively develop- ing different processes and then selecting those that produce the most visually compelling results. Designers and artists no longer have to use the tools dictated by computers and powerful but prescriptive design software and can now create their own tools, which generate amazing results independently, as many of the examples in the book demonstrate. In four simple lessons, Color, Shape, Type, and Image, users learn to influence their results and to improve them by either varying parameters—as explained in detail in each step—or by changing entire algorithms. The explanations are easy to understand, and their exe- cution requires little or even no programing; with p5.js and its rapidly growing community, it is becoming eas- ier to lay the groundwork for advanced technologies and trends, from 3D to augmented reality. The p5.js community is very active and constantly provides new updates and plug- ins for extending the functionality of p5.js. This book shows what can be done with this knowledge and how to dive deeper into generative design and its community. After experimenting with the sketches in the book and completing initial tasks with the online p5.js editor, users can venture forth independently and explore and expand on the creative output of the p5.js community and beyond. 4 With the success of Generative Design, which has been translated into several languages, the authors realized that the key to teaching artists and designers how to code was to empower them through simple but satisfying incremental successes. Students could then build increasing complexity into their work based on these basic principles. The book is supplemented by a website where users can download all of the programs (sketches) for free and start experimenting immediately. After com- pleting the four tutorials, you will be able to visualize data, create infographics, visualize text analyses, and much more. Have fun with creative coding. Karin and Bertram Schmidt- Friderichs 5 I.1 Contents I Introduction 3–41 I.0 Preface 3 I.1 Contents 6 I.2 Website 8 I.3 Projects 10 P Basic Principles 42–225 P.0 Introduction to p5.js 42 P.0.0 p5.js, JavaScript, and Processing 44 P.0.1 The development environment 46 P.0.2 Language elements 48 P.0.3 Programming beautifully 56 P.1 Color 58 P.1.0 Hello, color 60 P.1.1 Color spectrum 62 P.1.1.1 Color spectrum in a grid 62 P.1.1.2 Color spectrum in a circle 64 P.1.2 Color palettes 66 P.1.2.1 Color palettes through interpolation 66 P.1.2.2 Color palettes from images 68 P.1.2.3 Color palettes from rules 72 P.2 Shape 78 P.2.0 Hello, shape 80 P.2.1 Grid 82 P.2.1.1 Alignment in a grid 82 P.2.1.2 Movement in a grid 86 P.2.1.3 Complex modules in a grid 90 P.2.1.4 Checkboxes in a grid 94 P.2.1.5 From grid to moiré 98 P.2.2 Agents 102 P.2.2.1 Dumb agents 102 P.2.2.2 Intelligent agents 104 P.2.2.3 Shapes from agents 108 P.2.2.4 Growth structure from agents 112 P.2.2.5 Structural density from agents 116 P.2.2.6 Agents on a pendulum 120 P.2.3 Drawing 126 P.2.3.1 Drawing with animated brushes 126 P.2.3.2 Relation and distance in drawing 130 P.2.3.3 Drawing with type 132 P.2.3.4 Drawing with dynamic brushes 134 P.2.3.5 Drawing with the pen tablet 138 P.2.3.6 Drawing with complex modules 142 P.2.3.7 Drawing with multiple brushes 146 E.2 Inhaltsverzeichnis 6 P.3 Type 150 P.3.0 Hello, type 152 P.3.1 Text 154 P.3.1.1 Writing time- based text 154 P.3.1.2 Text as blueprint 156 P.3.1.3 Text image 160 P.3.1.4 Text diagram 166 P.3.2 Font outline 170 P.3.2.1 Dissolving the font outline 170 P.3.2.2 Varying the font outline 174 P.3.2.3 Font outline from agents 178 P.3.2.4 Parallel font outlines 180 P.3.2.5 Kinetic font 184 P.4 Image 188 P.4.0 Hello, image 190 P.4.1 Image cutouts 192 P.4.1.1 Image cutouts in a grid 192 P.4.1.2 Feedback of image cutouts 196 P.4.2 Image collection 198 P.4.2.1 Collage from image collection 198 P.4.2.2 Time- based image collection 202 P.4.3 Pixel values 204 P.4.3.1 Graphics from pixel values 204 P.4.3.2 Type from pixel values 210 P.4.3.3 Real- time pixel values 214 P.4.3.4 Emojis from pixel values 220 A Appendix 226–256 A.1 Looking ahead 228 A.2 Reflection 244 A.3 Bibliography 250 A.4 The authors 252 A.5 We thank 253 A.6 Copyright 254 A.7 Farewll 256 7 I .2 www.generative-gestaltung.de Generative Design: Visualize, Program, and Create with Javascript in p5.js is a tried and tested tutorial that allows people to design with p5.js. It is not necessary to type in any code: all the programs in the book, called “sketches,” can be downloaded for free from the book’s website for experimentation. This symbol → indicates the name of a sketch in the download package. The code summary page shows the main features of the code and how it affects the program output. The book explains how the parameters of the code impact the outcome and how users can interact with the sketch to develop their own visual solutions. O LD N E W I.2 Website 8