/p5.js

p5.js is a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing. http://twitter.com/p5xjs —

Primary LanguageJavaScriptGNU Lesser General Public License v2.1LGPL-2.1

Build Status npm version

Hello! p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today's web.

Using the original metaphor of a software sketchbook, p5.js has a full set of drawing functionality. However, you're not limited to your drawing canvas, you can think of your whole browser page as your sketch! For this, p5.js has addon libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound.

p5.js is a new interpretation, not an emulation or port, and it is in active development. An official editing environment is coming soon, as well as many more features!

If you already know the basics of JavaScript or Processing, the p5.js overview wiki page is a good place to start.

If you have found a bug in the p5.js library, you can file it here under the “issues” tab. An indicative template for reporting an issue is provided to assist you (and us!) better.

p5.js library

To use the complete p5.js library, you can download it here. If you are interested in the most recent, less stable version, or even simply in (new!) certain components of p5.js, you can clone this repository and run grunt from the command line to generate the library from source. See the developer docs for more information about our build process to generate the complete as well as selective library.

You can also start with the codepen template. You may need to update the version of the p5.js library that is linked into the html section.

Community maintained typescript definitions are here.

Issues

Please post bugs in the correct repository:

Learning

Check out p5js.org for lots more! Here are some quick-links:

  • Get Started: Create and run your first sketch!
  • p5.js overview — An overview of the main features and functionality of p5.js.
  • Reference: The functionality supported by p5.js.
  • Learn: Tutorials and short, prototypical examples exploring the basics of p5.js.
  • Forum: Ask and answers questions about how to make things with p5.js here.
  • Libraries: Extend p5 functionality to interact with HTML, manipulate sound, and more!

Get Involved

p5.js is a collaborative project created by many individuals, and you are invited to help. All types of involvement are welcome. See the community section to get started!

Developers, check out the developer docs for more in-depth details about contributing code, bug fixes, and documentation.

Contributors


Lauren McCarthy


Jason Sigal


Karen


Evelyn Eastmond


Daniel Shiffman


Casey Reas


Ben Fry


Kenneth Lim

🐛 💻 📖

kate hollenbach


Stalgia Grigg


Jerel Johnson


Saksham Saxena


saber khan


Daniel Howe


Kevin Siwoff


Atul Varma


Jess Klein


uno seis tres


susan evans


Saskia Freeke


Phoenix Perry


jesse cahn-thompson


Lee T


Chelly Jin


DIYgirls


lam802


Maya Man


Tega Brain


luisaph


AlM Chng


aarón montoya-moraga


Cassie Tarakajian


Niklas Peters

📖

Mathura MG


Yining Shi


Jen Kagan


Jiashan Wu


Marc Abbey


K.Adam White


Joe Cridge


Michael Hadley


Todd H. Page


Jared Sprague

💻 📖 💡 💵 ⚠️ 🐛

evelyn masso


Blaize Kaye


Sanchit Kapoor


Oliver Wright


Matthew Kaney


Spongman


Claire K-V


R. Luke DuBois


Kevin Barabash


codeanticode


Bob Holt


Sarah Groff Hennigh-Palermo


Jordan Shaw


brightredchilli


Derek J. Kinsman


harkirat singh


GoToLoop


Max Goldstein


XY Feng


Sparsh Paliwal


Austin Cawley-Edwards

📖 💡

taseenb


Yannick Assogba


John Pasquarello

💻

Kevin Workman


gauini


David Wicks


Guillermo Montecinos


Shawn Van Every


Sinan Ascioglu


Abe Pazos


Char


Gene Kogan


Jason Mandel


Mark Russo


Jonathan Dahan


Darius Morawiec


Darby Rathbone


hrishit


Chiun Hau You


Francesco Bigiarini


Fabian Morón Zirfas


Mike Anderson


Mikael Lindqvist


Chris


Max Segal


Tyler Stefanich


Dave


Xavier Snelgrove


Gareth Battensby


Taeyoon Choi


AKASH RAJ


Kevin Ho


Harsh Agrawal


Luca Damasco


Sam Lavigne


Epic Jefferson


Caroline Record


Christine de Carteret


Chris Hallberg


David Newbury


piinthecloud


Paolo Pedercini


Jason Alderman


Jennifer Jacobs


Sepand Ansari


Val Head


Emily Chen


Ben Moren


Rune Skjoldborg Madsen


Scott Murray


Scott Garner


b2renger


Craig Pickard


mxchelle


Zach Rispoli


Liu Chang


Cristóbal Valenzuela


Miles Peyton


Golan Levin


feedzh


Chiciuc Nicușor


Ken Miller


Chandler McWilliams


Jaymz Rhime


Niels Joubert


Utkarsh Tiwari


Arihant Parsoya


Brad Buchanan


Johan Karlsson


Andy Timmons


zacharystenger


Brian Boucheron


sortasleepy


Kyle McDonald


Antonio Jesús Sánchez Padial


Brad Smith


Vítor Galvão


Devon Rifkin


Emily Xie


Boris Bucha


Petr Brzek


Ramin


Arsenije Savic


Luke Burgess-Yeo


Sun Lifei


naoyashiga


Jimish Fotariya


Jorge Moreno

🐛 💻 📖

Steven Green


Marcus Parsons


Nick Yahnke


Anthony Su


kroko / Reinis Adovičs


Robyn Overstreet


Ben Hinchley


Max Kolyanov


Zeno Zeng


Seth


plural


Lionel Ringenbach


Harshil Goel


Joshua Storm Becker


max_devjs


trych


Alejandra Trejo


Prashant Gupta


Kai-han Chang


kjav


maddy


Christopher Coleman


Boaz


Yasai

📝

Jay Gupta


Nitish Bansal


Caroline Hermans

💡 📖

Faith Wuyue Yu


Aatish Bhatia

📖 🐛

Mislav Milicevic

💻 🐛

Yuting Lu

📖

Adil Rabbani

💻 🐛 💡

Pierre Krafft

🐛 💻 📖 💡 👀 ⚠️ 🔧

Zoë Ingram

📖

Aidan Nelson

🐛 💻 📖

Cameron Yick

📖

Tanvi Kumar

🐛 💻 📖 💡

Katsuya Endoh

Thanks goes to these wonderful people (emoji key)!

We recognize all types of contributions. This project follows the all-contributors specification. Instructions to add yourself or add contribution emojis to your name are here.