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, 2020 · 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

  • 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.
A 6x5 grid of cubes rotating in black space, each mapped with an abstract pink texture
A 6x5 grid of cubes rotating in black space, each mapped with an abstract pink texture
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

p5.js Contributor’s Conference

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.
Image for post
Image for post
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.
Image for post
Image for post
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.

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

Documentation

  • 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.
Image for post
Image for post
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]
Image for post
Image for post
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.
Image for post
Image for post
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).
Image for post
Image for post
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.
Image for post
Image for post
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.]
Image for post
Image for post
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.
Image for post
Image for post
p5.js Showcase created by Ashley Kang [Image description: screenshot of p5js.org/showcase with text introducing project and button to nominate]

Next Steps

Image for post
Image for post
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!

Image for post
Image for post
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. ❤

Image for post
Image for post
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.

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.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store