Fueling innovative software
July 15-18, 2019
Portland, OR

Making art with p5.js

Emily Xie (Sotheby's)
9:00am12:30pm Tuesday, July 16, 2019
Average rating: ****.
(4.67, 9 ratings)

Who is this presentation for?

  • Software engineers and developers

Level

Beginner

Description

p5.js is a powerful open source visual programming framework that allows you to create interactive visuals and art with code.

Emily Xie walks you through p5.js from the ground up—from initial setup and foundational concepts to the library’s core functions to its more advanced features—covering the coordinate system, shape primitives, lines, stroke, fill, color, mapping, events, and transforms. You’ll be given free rein to create, tinker, and experiment with the library. Join in to learn how to create a generative art piece of your own original design and gain a newfound appreciation for code as a medium for creative expression.

Outline:

  • Introduction: Emily provides more context about p5, including the framework’s history and mission, its emergence into the open source scene and its impact, and how its ease of use makes it a particularly good entry point into the world of generative art. She showcases p5 artwork to inspire and expose you to the vast possibilities of what you can create with this powerful new library.
  • Core concepts and functions: She draws you into p5 with an in-depth walk-through and details the core concepts—initial setup, primary animation loop, frame rate, canvas, and the X-Y coordinate system. She shows you how to draw shape primitives and lines and the functions used to adjust their properties, including color, shape, fill, and stroke. You’ll discover how to build out a few basic sketches.
  • Advanced techniques: Emily explores classic generative art methods such as randomness, noise, and interactivity. You’ll implement them in p5 with some of the more advanced math and transform functions while building out a series of simple yet impressive interactive works. You’ll learn the generative art process: how to break down seemingly complex visual ideas and translate them into just a few lines of p5 code.
  • Free exploration: You’ll have free rein to work on your own original designs as a way to synthesize the content you learned and gain comfort in building out generative designs on your own. You’ll get guidance or help from Emily as needed as she walks around the room.

Prerequisite knowledge

  • Programming experience

Materials or downloads needed in advance

  • A laptop with the text editor of your choice installed

What you'll learn

  • Learn p5.js techniques
  • Feel empowered with a profoundly new lens through which to understand your coding skills as a tool to build useful things and as a means to creatively express yourself
  • Gain encouragement to contribute to the open source generative art community with ideas and works of your own
Photo of Emily Xie

Emily Xie

Sotheby's

Emily Xie is an engineer at Sotheby’s. Previously, she worked at Squarespace and made art with code as a tech resident at Pioneer Works, a Brooklyn-based experimental arts center. Outside of work, Emily enjoys cooking, photography, and video games.

Comments on this page are now closed.

Comments

Picture of Emily Xie
Emily Xie | Software Engineer
07/15/2019 4:51am PDT

Hello everyone! I’m excited to teach this workshop tomorrow.

Please come with a text editor of your choice installed (I’ll be using Atom myself), and if you can, please clone this repo:

https://github.com/emilyxxie/p5_scaffold_OSCON

See you all soon,
Emily