Everand Logo

Welcome to Everand!

  • Discover millions of audiobooks, ebooks, and so much more with a free trial

    From $11.99/month after trial. Cancel anytime.

    Generative Design: Visualize, Program, and Create with JavaScript in p5.js
    Generative Design: Visualize, Program, and Create with JavaScript in p5.js
    Generative Design: Visualize, Program, and Create with JavaScript in p5.js
    Ebook432 pages2 hours

    Generative Design: Visualize, Program, and Create with JavaScript in p5.js

    By Benedikt Gross, Hartmut Bohnacker, Julia Laub and

    5/5

    ()

    Read preview

    About this ebook

    Generative design, once known only to insiders as a revolutionary method of creating artwork, models, and animations with programmed algorithms, has in recent years become a popular tool for designers. By using simple languages such as JavaScript in p5.js, artists and makers can create everything from interactive typography and textiles to 3D-printed furniture to complex and elegant infographics.

    This updated volume gives a jump-start on coding strategies, with step-by-step tutorials for creating visual experiments that explore the possibilities of color, form, typography, and images. Generative Design includes a gallery of all-new artwork from a range of international designers—fine art projects as well as commercial ones for Nike, Monotype, Dolby Laboratories, the musician Bjork, and others.
    LanguageEnglish
    PublisherPrinceton Architectural Press
    Release dateNov 13, 2018
    ISBN9781616897840
    Generative Design: Visualize, Program, and Create with JavaScript in p5.js
    Author

    Benedikt Gross

    Benedikt Groß and Hartmut Bohnacker are professors of interaction design at the HfG Schwäbisch Gmünd in Baden-Württemberg, Germany.

    Related authors

    Related to Generative Design

    Related ebooks

    Related podcast episodes

    Reviews for Generative Design

    5/5

    1 rating0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      Generative Design - Benedikt Gross

      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 architecture, 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 developing 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 execution requires little or even no programing; with p5.js and its rapidly growing community, it is becoming easier 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.

      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 completing 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

      I.1

      Contents

      I Introduction 3–41

      I.0 Preface 3

      I.1 Contents 6

      I.2 Website 8

      I.3 Projects 10

      01: 2016/17 Daily Sketches 11

      02: 2017 Planck 15

      03: 2015 Abstract 17

      04: 2016 Rottlace – Björk 18

      05: 2016 VOID VIII 01 20

      06: 2017 Monotype: Type Reinvented 23

      07: 2016 Nike Strike Series FA16 25

      08: 2016 VoxelChair v.1.0 27

      09: 2016 Collide: synaesthetic art installation 31

      10: 2017 Block Bills 32

      11: 2015 Roads to Rome 35

      12: 2015 Jller 36

      13: 2016 Aerial Bold 40

      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

      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

      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.

      Hello and welcome to Generative Design. Here, you will find all of the sketches from the book and their associated code. Run the sketches directly in the browser with the p5.js-web-editor or locally on your machine by downloading the code package below.

      Download Code Package

      Library

      P.1. Color

      P_1_0_01

      P_1_1_1_01

      P_1_1_2_01

      I.3

      Projects

      These thirteen works by various media artists, designers, and architects active in the field of generative design are intended to serve as a representative overview of the topic and a source of inspiration.

      01

      2016/17 Daily Sketches

      Zach Lieberman

      Daily Sketches is a series of short generative animations shared daily with the world by Zach Lieberman on social media for fast feedback. The sketches show the process of exploring new visual concepts using geometry, animation, gesture, form, and code. Lieberman describes his sketches of the day as follows: A lot of times, as artists, we feel like we’re struggling to find our frequencies and what resonates with the frequencies of the world. This act of sketching is a kind of tuning of these frequencies.

      Design and Development

      Shota Matsuda (Takram)

      Photo Credits

      Koki Nagahama

      Planck is a web browser–based framework developed by Takram for the visualization of large geographical data sets. The framework is designed to achieve both analytical and immersive visual experience by using various techniques, such as parallel projection and depth of field. Three visualizations were created for Media Ambition Tokyo 2017, presenting data on Japan’s estimated population in 2050, the languages people have tweeted in, and world air traffic.

      02

      2017 Planck

      Takram

      Interaction Design

      Bjørn Karmann

      Fashion Design

      Julie Helles

      Textile Design

      Kristine Boesen

      Bachelor‘s Degree Graduation Project

      Kolding Design School, DK

      Fashion has always been a means of self-expression, but Abstract_ takes individuality a step further by enabling a customer to write themselves into a piece of clothing. Abstract_’s interactive platform prompts the customer to write a personal story and uses the computer’s camera to capture facial expressions. Data collected from the story, the rhythm of the keystrokes, and the customer’s expression are then transformed into a visual representation and mapped onto a textile for clothing.

      03

      2015 Abstract_

      Bjørn Karmann

      Julie Helles

      Kristine Boesen

      04

      2016 Rottlace – Björk

      MIT Media Matter Group

      Christoph Bader

      Dominik Kolb

      Prof. Neri Oxman

      Stratasys Ltd.

      Photo Credits

      Santiago Felipe

      Rottlace is part of a family of masks designed for the Icelandic singer-songwriter Björk. The design is informed by the geometric and material logic that underlies the human musculoskeletal system. The masks can be understood as muscle textile: bundled, continuous multimaterial structures providing formal and structural integrity as well as movement to the face and neck, resulting in an object that is designed as a synthetic whole without parts.

      05

      2016 VOID VIII 01

      Andreas Nicolas Fischer

      Primary Programming

      Andreas Nicolas Fischer and Benjamin Maus

      Additional Programming

      Abraham Pazos Solatie

      VOID

      Enjoying the preview?
      Page 1 of 1