Lauren McCarthy - Getting Started with p5.js: Making Interactive Graphics in JavaScript and Processing

by Lauren McCarthy , Casey Reas , and Ben Fry

Copyright 2016 Maker Media. All rights reserved.

Printed in the United States of America.

Published by Maker Media, Inc. , 1160 Battery Street East, Suite 125, San Francisco, CA 94111.

Maker Media books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://safaribooksonline.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com .

• Editor: Anna Kaziunas France
• Production Editor: Kristen Brown
• Copyeditor: Jasmine Kwityn
• Proofreader: Kim Cofer
• Indexer: Wendy Catalano
• Interior Designer: David Futato
• Cover Designer: Karen Montgomery
• Illustrators: Taeyoon Choi and Rebecca Demarest

• October 2015: First Edition

See http://oreilly.com/catalog/errata.csp?isbn=9781457186776 for release details.

The Make logo and Maker Media logo are registered trademarks of Maker Media, Inc. Make: Getting Started with p5.js, the cover image, and related trade dress are trademarks of Maker Media, Inc.

While the publisher and the authors have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the authors disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights.

978-1-457-18677-6

[LSI]

p5.js draws inspiration and guidance from another project, which began nearly 15 years ago. In 2001, Casey Reas and Ben Fry began work on a new platform to make programming interactive graphics easier; they called it Processing. They were frustrated with how difficult it was to write this type of software with the programming languages they usually used (C++ and Java), and were inspired by how simple it was to write interesting programs with the languages of their childhood (Logo and BASIC). They were most influenced by Design By Numbers (DBN), a language they were maintaining and teaching at the time (and which was created by their research advisor, John Maeda).

With Processing, Ben and Casey were searching for a better way to test their ideas easily in code, rather than just talking about them or spending too much time programming them in C++. Their other goal was to make a language for teaching design and art students how to program and to give more technical students an easier way to work with graphics. The combination is a positive departure from the way programming is usually taught. New users begin by focusing on graphics and interaction rather than on data structures and text console output.

Over the years, Processing has grown into a huge community. It is used in classrooms worldwide, in arts, humanities, and computer science curricula, as well as by professionals.

Two years ago, Ben and Casey approached me with a question: what would Processing look like if it were on the Web? p5.js starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, then reinterprets it for todays Web using JavaScript and HTML.

Developing p5.js has felt like bringing different worlds together. To ease the transition to the Web for the existing community of Processing users, we adhered to the syntax and conventions of Processing as much as possible. However, p5.js is built with JavaScript, while Processing is built with a language called Java. These two languages have different patterns and affordances, so at times we had to deviate from familiar Processing syntax. It was also important that p5.js integrated seamlessly into all the existing web features, tools, and frameworks in order to draw in users that might be familiar with the Web but new to creative coding. Synthesizing all of these factors was a challenge, but the goal of uniting these frameworks provided a clear path for the development of p5.js.

A first beta version was launched in August 2014. Since then, it has been used and integrated into curricula around the world. There is an official p5.js Editor currently in development, and progress is underway on many new features and libraries.

p5.js is a community efforthundreds of people have contributed core features, bug fixes, examples, documentation, design, thoughts, and discussion. We aim to carry on the vision and the spirit of the Processing community as we open it up even more on the Web.