Large group of smiling artists display their laptops with first colorful sketches made with p5.js
Large group of smiling artists display their laptops with first colorful sketches made with p5.js
Artists in Santiago, Chile learn p5.js in workshop led by Aarón Montoya-Moraga [Image description: Large group of smiling artists display their laptops with first colorful sketches made with p5.js]

p5.js 1.0 is Here!

lauren mccarthy
Feb 29 · 10 min read

Puedes leer la versión en español de este artículo aquí. Você pode ler a versão em português deste artigo aqui. 日本語版はこちらです!

Today we are excited to announce the 1.0 Release of p5.js! p5.js is a JavaScript library that aims to make creative expression and coding on the web accessible and inclusive for artists, designers, educators, and beginners. While it’s been nearly seven years since p5.js began, we intentionally embarked on the path to reach 1.0 a year ago when Kate Hollenbach worked on a first version of a roadmap for this. From there, the effort was led by Stalgia Grigg and Evelyn Masso, working with Lauren McCarthy, Cassie Tarakajian, Kenneth Lim, and the thousands of contributors from around the world that joined in working on everything including code, documentation, teaching, outreach, writing, art making, and more. Reflecting the p5.js project values, 1.0 is not just a code-based milestone, but one that is grounded by significant work on the documentation and community.

Library Overhaul

In the past year working toward 1.0, we have put out 5 releases representing 1,488 commits (each commit can be thought of as a single round of changes in one or more files). You can download the new release at p5js.org. There were so many new things, we tried to capture key features and changes below. If you contributed something we missed here, please let us know at hello@p5js.org and we’ll add it. :)

  • Support for animated GIF drawing using the image() function!
  • Addition of beginner-friendly drawing methods like circle() and square().
  • Support for (and requirement of!) alt-text within the image drawing methods. alt text, or alternative text, is the written text that appears in place of an image on a webpage if the image fails to load on a user’s screen. This text helps screen-reading tools describe images to visually impaired readers.
  • Updating all user facing materials, contributor facing materials, and the entire codebase and accompanying build processes to use ES6, led by Hirad Sab.
  • Introducing new tooling into the build process to ensure maintainability of the code and prioritize accessibility. This includes things like linting and HTML validation to meet WCAG specifications.
  • An improved p5.Serial library created by Shawn Van Every, Jen Kagan, Tom Igoe that enables communication between p5.js sketch and Arduino (or other serial enabled devices).
Image description: A diagram of Arduinos connected via p5.SerialPort library to web client windows
Image description: A diagram of Arduinos connected via p5.SerialPort library to web client windows
p5.SerialPort library overview [Image description: A diagram of Arduinos connected via p5.SerialPort library to web client windows]
  • Updates to audio/video functionality and the p5.sound library led by Jason Sigal to account for new browser requirements.
  • Friendly Error System (FES) improvements. The FES is a system that beginners can turn on in the p5.js library that checks argument types and catches common errors, provide more accessible explanations for how to fix the code in the console. We updated this to provide more helpful and intuitive friendly errors across the entire library.
  • Addition of internationalization support for friendly error messages.
  • WebGL drawing mode robustness. This included cleaning up text rendering, geometry drawing, and lighting, improving texture mapping capabilities, and simplifying and documenting the entire WebGL graphics pipeline.
One of a suite of p5.js in-browser tests for testing and improving WebGL rendering. [Image description: A 6x5 grid of cubes rotating in black space, each mapped with an abstract pink texture.]
  • Merging our external DOM library into core to enable a range of functionality using HTML elements such as webcam, microphone input, video, audio, input elements, and file selection.
  • Numerous bug fixes and documentation improvements in all areas.
  • Review, simplification, and documentation of the build release process and tooling for future sustainability.
  • Completion of comprehensive unit tests across the entire library to ensure the code keeps working with new changes.
  • Implementation of GitHub bots, actions, and templates, including a friendly newcomer welcome bot and issue templates to aid new contributors.
  • A new feature that enables contributors to initiate Twitter polls from GitHub issues to encourage and lower barriers to access for broader community participation and discussion.
  • A redesigned set of contributor docs and a contributor docs website that document how the project is organized and governed, and how to participate.
Screenshot of readme that says Welcome! with flowers around it.
Screenshot of readme that says Welcome! with flowers around it.
Screenshot of contributor docs welcome readme file. [Image description: Screenshot of readme that says Welcome! with flowers around it, full text in readme.]

p5.js Editor

Through all this work, the p5.js Editor led by Cassie Tarakajian has been key in helping people of all ages and abilities to get started quickly creating, editing, and sharing p5.js sketches. The editor officially launched a little over a year ago and has continued to grow since then, recently passing over one million sketches created on the platform!

p5.js Contributor’s Conference

One of the key steps toward this release was a p5.js Contributor’s Conference held in August at the Frank-Ratchye STUDIO for Creative Inquiry at Carnegie Mellon University in Pittsburgh. We welcomed an extremely energetic, diverse, and generous group of people ranging from long-time contributors to those entirely new to the project. Working groups focused on several topic areas: Access; Music and Code in Performance; Landscape of Creative Tech; and Internationalization.

One of the co-organizers stands at a podium with a mic
One of the co-organizers stands at a podium with a mic
p5.js contributor’s conference, Day 1, co-organizer shawné michaelain holloway speaking to participants. [Image description: One of the co-organizers stands at a podium with a mic in her right hand while conference participants listen to her provide the schedule of events and activities for the p5.js contributor’s conference]

Outputs included:

  • A prototype of a notebook interface for p5.js. Created by Allison Parrish.
  • A design of the p5.js library system for the p5 Editor. Created by Cassie Tarakajian and Luca Damasco.
  • Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and Lauren Valley.
  • p5.js Global Contributor’s Toolkit. Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian Ye, Dorothy R. Santos, and Yasheng She.
five participants are engaged and appear to be laughing together
five participants are engaged and appear to be laughing together
p5.js contributor’s conference, Day 1, participants engaged in conversation. [Image description: In the foreground, five participants are engaged and appear to be laughing together while participants are seen in the background engaged in other group discussions or working]
  • A non-violent code working group and zine led by Olivia Ross.
  • A panel on Blackness and Gender in Virtual Space led by American Artist, with shawné michaelain holloway and LaJuné McMillian.
  • New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and Jon Chambers.
  • An overhaul of the p5.js website for accessibility. Including updates for screen reader accessibility, and improvements to the home, download, getting started, and reference pages. With contributions from Claire Kearney-Volpe, Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren McCarthy, and Evelyn Masso.
p5.js contributor’s conference, Day 2, computer scientist and scholar, Sina Barham presents his research on accessibility. [Image description: The photograph is taken from an office area located above the conference meeting space showing participants seated around moveable tables, looking towards a large projection screen of the presenter’s slides.]
  • p5grid. An implementation of highly flexible triangle, square, hexagon, and octagon girds for p5.js. Created by Aren Davey.
  • p5.multiplayer. A set of template files for building a multi-device, multiplayer game where multiple clients can connect to a specified host page. Created by L05.
  • Experiments using P5LIVE, testing early implementations of softCompile, OSC interfacing and added connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj environment! Created by Ted Davis.
  • Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak, Sona Lee, Ted Davis, and Carlos Garcia, and Natalie Braginsky.
  • Data scraping and nonlinear narrative workshops led by Everest Pipkin and Jon Chambers.
p5.js contributor’s conference, Day 3, participants discussing work created with the p5Live platform and its creator Ted Davis. [Image description: Participants looking at a large monitor with geometric shapes in varying, gradient colors.]

We spent significant time at the conference talking about the future of p5.js, especially sustainability and governance. Together, we came to the decision to explore a rotating model of leadership that would open the project to new perspectives and directions. It would also make the act of leading less burdensome, reducing barriers to entry. With this decision, it became clear that we would need to be significant effort into documentation and infrastructure to enable smooth transitions between leaders.

Participants at the p5.js Contributor’s Conference public presentation. [Image description: Participants attentively smile and listen to a speaker]
Participants at the p5.js Contributor’s Conference. [Image description: Diverse group of participants smile and make faces for the camera]

Documentation

Based on the conference and online discussions, we worked to document the project, its organizational and governance structures, and the various ways to contribute. Through these documents, we surface key ideas of structuring our project around community building, diversity, and inclusion. The documentation can be found in a few different places:

  • p5.js Website — The website structure and language was updated to be more intuitive and beginner-friendly. We also overhauled the entire site to be more accessible and WCAG compliant. This included adding tools to the website build process that will validate HTML pages and alert us to accessibility issues.
  • p5.js Reference and Examples pages — Comprehensive and friendly documentation is a key aspect of p5.js. Reference entries and examples were added and updated to make functionality clearer and easier to learn.
  • Contributor Docs — We worked on a folder of contributor documentation that guide people on things like getting started, repository structure, adding documentation, creating libraries, release processes, decision making, benchmarking, testing, and more.
  • p5.js Global Contributor’s Toolkit — A guide for international contributors and a reflection on what it means to contribute to p5.js. This addressed both the opportunities and problems, including the underlying colonialist/(neo)imperialist implications of making p5.js “globally available.”
  • How To Write Non-Violent Creative Code — A zine reflecting on the larger landscape of creative code, and how to embrace radical inclusion, decolonization, and a de-centering of dominant communities within these projects and communities.

Different contributors also worked on a number of documentation and education projects to strengthen and diversify the p5.js community.

  • Qianqian Ye aims to make p5.js more accessible in China, especially within the underrepresented women and non-male identified groups. To counter the fact that most online educational resources such as YouTube are banned in China, she recorded p5.js video tutorials for beginners in Mandarin and shared them on Chinese video sites. She also partnered with female creative coders in China to host p5.js workshops for girls, women, and nonbinary identified people, as well as post interviews with role models in the p5.js community on Chinese social media.
One-minute p5.js tutorials, in Mandarin, for women learning to code in China, across different platforms. [Image description: A grid of video thumbnails of Qtv, which show Qianqian Ye on the right side of the frame, with her computer screen shown]
Screenshot from Calligraphy Brush Coding Challenge. [Image description: A screenshot that shows Qianqian at right with an insert of her screen, showing code in p5.js that produces Calligraphy Brush]
  • Manaswini Das, Nancy Chauhan, and Shaharyar Shamshi worked to empower people of the Indian community of all backgrounds to learn how to program. Through Hindi translation efforts, they were able to provide tools to the Indian community in their native language, and prepare educators by collaborating with various NGOs and individuals to build a more diverse community around software.
Shaharyar Shamshi conducted a workshop on p5.js for undergraduate students at the National Institute of Technology Hamirpur. [image description: A teacher points to a projection of the p5.js website at the front of a classroom. Rows of students with open laptops look on.]
  • Matilde Wysocki developed a p5.js curriculum and taught homeless TGNC (trans and gender nonconforming youth) basic programming as a means of self expression and digital literacy in a personal security and queer privacy context. As a peer advocate, they exposed their community to computational design and machine learning as either a means of digital literacy or personal empowerment.
  • Yeseul Song translated the p5.js website and reference to Korean, adding to our current set of translations including Spanish, Chinese, and Hindi (in progress).
Home page for p5.js website translated to Korean. [Image description: The homepage of the p5.js website is pictured with a white background and a combination of black and magenta text translated to Korean.]
  • Layla Quinones and Emily Fields, mentored by Educational Community Director Saber Khan, wrote curriculum that teaches students how to integrate sound, animation, movement, and interactivity into a creative computational artifacts in p5.js. Their work focused on developing tools for inner city teachers who have little experience teaching topics in CS to their own communities.
Student experimenting with the p5.js sketch using an umbrella and a Kinect. [Image description: A young girl holds an illuminated umbrella. She holds out her hand and looks up at digital rain.]
At the CS4ALL Computer Science Institute in NYC, Layla Quinones trained middle-school teachers to teach the Creative Web course, which uses p5.js to teach computational thinking to students. [Image description: Four people in a classroom. The teacher, a woman in front with dark hair, has both arms raised speaking at front.]
  • Finally, Ashley Kang created a p5.js gallery to showcase p5.js projects from around the world, with a focus on featuring artists, coders, and makers with underrepresented backgrounds. This showcase will launch along with our 1.0 release later this month.
p5.js Showcase created by Ashley Kang [Image description: screenshot of p5js.org/showcase with text introducing project and button to nominate]

Next Steps

One of the key decisions we made at the Contributors Conference was that going forward, “p5.js will not add any new features except those that increase access.” We hope that this commitment will focus the future library around our priorities of inclusion, diversity, and accessibility. We imagine this may open many conversations into the different ways we can increase access, and the range of barriers and structures that work against it. We have a large-scale vision for how the p5.js library can significantly push forward web accessibility, and we want to continue researching and prototyping that in partnership with disabled programmers and artists, students, and institutions.

p5.js contributor’s conference, Day 5, Evelyn Masso and Lauren McCarthy presenting work from the accessibility track. [Image description: Participants looking projection “p5.js will not add any new features except those that increase access*”]

We’ll also be publishing our p5.js 1.0 Contributor’s Zine in March. This book will celebrate all the contributors to p5.js and the work we’ve done together. Stay tuned for an announcement about it soon!

Collection of contributor images for p5.js 1.0 Contributor’s Zine. [Image description: Grid of images with a wide range of images and colors]

Finally, we will be following through on the challenge we’ve set forth for ourselves — to open the project in a new way by implementing a rotating model of leadership! Lauren McCarthy will be stepping down from her role as project lead, making space for exciting new ideas and leaders in the project. Look out for an open call for p5.js Project Lead coming later this month.

More soon! We’re so looking forward to digging deeper into all this work after our 1.0 release, and engaging the community in deeper and more expansive ways. For now, we want to say biggest thanks to all of you artists, makers, teachers, students, supporters, and contributors for being a part of it. p5.js would not be what it is, and we would not be who we are, without you. ❤

Contributor Kate Hollenbach with her students. [Image description: Group of students pose in front of project p5.js website smiling and waving.]

Processing Foundation

The Processing Foundation promotes software literacy within…

lauren mccarthy

Written by

Processing Foundation

The Processing Foundation promotes software literacy within the visual arts, and visual literacy within technology-related fields. Our publication posts articles about and by members of our community.

More From Medium

More from Processing Foundation

More from Processing Foundation

A Modern Prometheus

More from Processing Foundation

More from Processing Foundation

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade