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.

Examples built into the p5.js Web Editor [image description: Screenshot of p5.js Web Editor with panel displaying multiple example sketches with topics “interaction” and “simulate”]

All the sketch files are stored online, and you can easily share a link to your sketch or embed it in blogs and websites.

[image description: Screenshot of p5.js Web Editor with panel with links to the sketch URL and embed code]

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.