p5.js 1.0 is Here!
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).
- 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.
- 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.
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.
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.
- 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.
- 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.
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.
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.
- 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.
- 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).
- 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.
- 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.
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.
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!
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. ❤
