Generative Design

Visualize, Program, and Create with JavaScript in p5.js

Benedikt Gross, Hartmut Bohnacker, Julia Laub, Claudius Lazzeroni, Marie Frohling

• Publisher: Princeton Architectural Press
• Year: 2018
• ISBN:
  9781616897840
• Topic: Art
• Subtopic: Art General

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.

P.0 Introduction to p5.js

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.0.0 p5.js, JavaScript, and Processing

The JavaScript library p5.js is used in this book to introduce the concepts of generative design. Presented on the following pages is an overview of the basic elements and functions of JavaScript and a brief outline of the history of Processing and p5.js.

The project p5.js was started in August 2013 by Lauren McCarthy, an artist and assistant professor in UCLA’s Design Media Arts program. To explain the idea behind p5.js, it is useful to start by referencing the much older Processing project.

The programming language Processing was initiated in the spring of 2001 by Ben Fry and Casey Reas with a small group of assistants. The main aim of Processing was and still is to give visually oriented people easy access to programming. Processing is a tool or development environment for the quick creation of digital, programmed sketches (a Processing program is called a “sketch”).¹ There is a large, vibrant community surrounding Processing that greatly simplifies collaborative learning. There are many examples, videos, tutorials, et cetera, available online. Processing has become standard for programming in design, infographics, architecture, and art.

processingfoundation.org

Casey Reas and Ben Fry

p5.js pursues the same goal: making it as easy as possible to program graphics. The individual commands of p5.js and Processing are extremely similar. The main difference is that unlike Processing, p5.js is based not on Java programming but on JavaScript. This is technically significant as well as important for users be...