Hello p5.js Web Editor!
Today we are excited to announce the official release of editor.p5js.org! The p5.js Web Editor is an online platform for learning to code in a visual way. Designed for all ages and abilities, anyone can get started quickly creating, editing, and sharing p5.js sketches.
Visit editor.p5js.org to begin making a project. You can start with one of the many examples, or start from scratch. It is free and the open source, no sign up, setup, or download required. Using p5.js you can use JavaScript, HTML, and CSS to create graphics in 2D and 3D, add text, images, video, and audio, and make your sketch interactive with mouse, touch, webcam input, and motion sensing.
All the sketch files are stored online, and you can easily share a link to your sketch or embed it in blogs and websites.
The p5.js Web Editor has been in development since 2016 led by Cassie Tarakajian. You can read more about her process here. In the video below, Cassie gives an overview of features and introduction to coding with p5.js in the Web Editor.
The p5.js Web Editor is accessible!
From the start, we’ve been building the p5.js Web Editor to be accessible to people with visual impairment. This means making the editor and p5.js resources usable with screen readers, and also making sure that the drawing canvas is available in the form of text and sound. Below, Mathura Govindarajan gives a tour of the accessibility features.
This effort has been led by Processing Foundation Fellows Claire Kearney-Volpe, Mathura Govindarajan, and Luis Morales-Navarro. You can read more about Claire, Mathura, and Luis’ work in developing p5.js accessibility here and here.
Designed with students and teachers in mind
The p5.js Web Editor is designed for learning. We aim to make p5.js as friendly and welcoming as possible for beginners. There’s an extensive reference with interactive examples, friendly error messages to help with debugging, and tools to make teaching and collaborating with p5.js easy. It’s designed for use in K12 to university classrooms and beyond. Because everything is stored online, students can easily share at home with parents and friends. Below, Processing Foundation Fellow Saber Khan walks through the basics of p5.js for educators, features for students, and curricula resources.
The p5.js Web Editor was developed with support from NYU’s Interactive Telecommunications Program (ITP) and the NYC Department of Education CS4All Team. The Processing Foundation and the NYC DOE CS4All Team are collaborating on a new creative computing curriculum for high schools that uses the p5.js and the Web Editor.
The p5.js Web Editor is Open Source
While this project is maintained by the Processing Foundation, led by Cassie, it is a collaborative effort. The project has been created with technical contributions from all around the world, and also many non-technical efforts, including project management from Ana Giraldo-Wingler, UI/UX design from Jerel Johnson, and bug reports and feature requests from dedicated users. This project built on earlier p5.js editor concepts developed by Sam Lavigne and Jason Sigal. We are open to many different types of contributions to this project, and we welcome everyone to get involved.
We hope you like it! You can submit ideas, thoughts, and feedback here. Or discuss your own p5.js projects with the community on our forum.
Visit editor.p5js.org to start sketching with code :)
The videos were edited by by Mathieu Blanchette, produced by Ana Giraldo-Wingler, with animations by Marty Tzonev, and music by Louis Schwadron.
You can help support this work by donating to the Processing Foundation. ❤
