[![npm version](https://badge.fury.io/js/p5.svg)](https://www.npmjs.com/package/p5) [![All Contributors](https://img.shields.io/github/all-contributors/processing/p5.js?color=ee8449&style=flat-square)](#contributors) [![Total Downloads](https://img.shields.io/npm/dt/p5)](https://www.npmjs.com/package/p5) # [p5.js](https://p5js.org) Welcome! 👋👋🏿👋🏽👋🏻👋🏾👋🏼 p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone. Using the metaphor of a sketch, p5.js has a full set of drawing functionality using the HTML5 canvas element. You’re not limited to the drawing canvas though. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound. p5.js draws inspiration, wisdom, and guidance from its precursor [Processing](https://processing.org). However, it is a new interpretation, not an emulation or port. We don't aim to match Processing's set of functionality exactly, allowing ourselves space to deviate and grow in the context of the web. The [p5js.org](https://p5js.org) website contains an extensive overview of the project, community, documentation, and examples. If you already know the basics of JavaScript or Processing, the [p5.js overview](https://github.com/processing/p5.js/wiki/p5.js-overview) wiki page is a good place to start. ## Community We are a community of, and in solidarity with, people from every gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, ability, class, religion, culture, subculture, political opinion, age, skill level, occupation, and background. We acknowledge that not everyone has the time, financial means, or capacity to actively participate, but we recognize and encourage involvement of all kinds. We facilitate and foster access and empowerment. We are all learners. p5.js is a collaborative project created by many individuals, mostly volunteers, and you are invited to help. All types of involvement are welcome. See the [community section](https://p5js.org/community) to get started! You can also check out the [contributor docs](https://p5js.org/contributor-docs/#/) for more in-depth details about contributing to different areas of the project, including code, bug fixes, documentation, discussion, and more. Learn more about [our community](https://p5js.org/community/) and read our community statement and [code of conduct](https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md). You can directly support our work with p5.js by [donating to the Processing Foundation](https://processingfoundation.org/support). ## Get Started Make your first sketch in the [p5.js Editor](https://editor.p5js.org/)! Learn more about sketching with p5.js on the [Get Started](https://p5js.org/get-started/) and find everything you can do in the [Reference](https://p5js.org/reference/). To get the complete p5.js library on your own computer, you can [download it here](https://p5js.org/download). 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 [contributor docs](https://p5js.org/contributor-docs/#/) for more information about our build process. ## Learning Check out [p5js.org](https://p5js.org) for lots more! Here are some quick-links to get started learning p5.js. * [Get Started](https://p5js.org/get-started): Create and run your first sketch! * [p5.js overview](https://github.com/processing/p5.js/wiki/p5.js-overview): An overview of the main features and functionality of p5.js * [Reference](https://p5js.org/reference): The functionality supported by p5.js * [Learn](https://p5js.org/learn): Tutorials and short, prototypical examples exploring the basics of p5.js * [Forum](https://discourse.processing.org/c/p5js): Ask and answer questions about how to make things with p5.js here * [Libraries](https://p5js.org/libraries): Extend p5 functionality to interact with HTML, manipulate sound, and more! * [The Coding Train p5.js Tutorials](https://thecodingtrain.com/beginners/p5js/): A huge trove of tutorials created by Dan Shiffman and friends ## Issues If you have found a bug in the p5.js library, you can file it here under the [“issues” tab](https://github.com/processing/p5.js/issues). You can also request new features here. A set of templates for reporting issues and requesting features are provided to assist you (and us!). p5.js is maintained mostly by volunteers, so we thank you for your patience as we try to address your issues as soon as we can. Please post in the correct repository if you can: * p5.js general: [https://github.com/processing/p5.js/issues](https://github.com/processing/p5.js/issues) * p5.sound: [https://github.com/processing/p5.js-sound/issues](https://github.com/processing/p5.js-sound/issues) * p5.js website: [https://github.com/processing/p5.js-website/issues](https://github.com/processing/p5.js-website/issues) * p5.js web editor: [https://github.com/processing/p5.js-web-editor/issues](https://github.com/processing/p5.js-web-editor/issues) ## Get Started for Developers A quick Getting Started with the Build and setting up the repository could be found [here](https://p5js.org/contributor-docs/#/contributor_guidelines?id=quick-get-started-for-developers) ## Stewards Stewards are contributors that are particularly involved, familiar, or responsive to certain areas of the project. Their role is to help provide context and guidance to others working on p5.js. If you have a question about contributing to a particular area, you can tag the listed steward in an issue or pull request. They may also weigh in on feature requests and guide the overall direction of their area, with the input of the community. You can read more about the organization of the project at [contributor_docs/organization.md](https://github.com/processing/p5.js/blob/main/contributor_docs/organization.md), p5.js [Contributor Guidelines](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md), and p5.js [Steward Guidelines](https://github.com/processing/p5.js/blob/main/contributor_docs/steward_guidelines.md). Anyone interested can volunteer to be a steward! There are no specific requirements for expertise, just an interest in actively learning and participating. If you’re familiar with or interested in actively learning and participating in some of p5.js areas below, please reply to [this issue](https://github.com/processing/p5.js/issues/5719) mentioning which area(s) you are interested to volunteer as a steward! 👋👋👋 Current Lead/Mentor * [@qianqianye](https://github.com/qianqianye) - p5.js Project Lead * [@limzykenneth](https://github.com/limzykenneth) - p5.js Mentor * [@lmccart](https://github.com/lmccart)- p5.js Creator Lead/Mentor Alumni * [@outofambit](https://github.com/outofambit) - p5.js Co-Lead 2021-22, Mentor 2022-2023 * [@mcturner1995](https://github.com/mcturner1995) - p5.js Lead 2020 | Area | Steward(s) | | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ | | Overall | [@qianqianye](https://github.com/qianqianye) | | [Accessibility](https://github.com/processing/p5.js/tree/main/src/accessibility) | [@calebfoss](https://github.com/calebfoss), [@cosmicbhejafry](https://github.com/cosmicbhejafry), [@apoorva-a98](https://github.com/apoorva-a98), [@tedkmburu](https://github.com/tedkmburu), [@Zarkv](https://github.com/Zarkv), [@SkylerW99](https://github.com/SkylerW99), [@itsjoopark](https://github.com/itsjoopark), [@hannahvy](https://github.com/hannahvy), [@nhasalajoshi](https://github.com/nhasalajoshi)| | [Color](https://github.com/processing/p5.js/tree/main/src/color) | [@paulaxisabel](https://github.com/paulaxisabel), [@SoundaryaKoutharapu](https://github.com/SoundaryaKoutharapu), [@mrbrack](https://github.com/mrbrack), [@TJ723](https://github.com/TJ723), [@Zarkv](https://github.com/Zarkv), [@SkylerW99](https://github.com/SkylerW99), [@ramya202000](https://github.com/ramya202000), [@hannahvy](https://github.com/hannahvy), [@robin-haxx](https://github.com/robin-haxx), [@hiddenenigma](https://github.com/hiddenenigma) | | [Core](https://github.com/processing/p5.js/tree/main/src/core)/Environment/Rendering | [@limzykenneth](https://github.com/limzykenneth), [@davepagurek](https://github.com/davepagurek), [@ChihYungChang](https://github.com/ChihYungChang), [@teragramgius](https://github.com/teragramgius), [@tuminzee](https://github.com/tuminzee), [@Zarkv](https://github.com/Zarkv), [@robin-haxx](https://github.com/robin-haxx), [@Gaurav-1306](https://github.com/Gaurav-1306) | | [Data](https://github.com/processing/p5.js/tree/main/src/data) | [@angelabelle](https://github.com/angelabelle), [@shahankhatch](https://github.com/shahankhatch), [@TanviKumar](https://github.com/TanviKumar), [@SkylerW99](https://github.com/SkylerW99), [@nhasalajoshi](https://github.com/nhasalajoshi) | | [DOM](https://github.com/processing/p5.js/tree/main/src/dom) | [@SarveshLimaye](https://github.com/SarveshLimaye), [@SoundaryaKoutharapu](https://github.com/SoundaryaKoutharapu), [@ramya202000](https://github.com/ramya202000), [@BamaCharanChhandogi](https://github.com/BamaCharanChhandogi), [@Obi-Engine10](https://github.com/Obi-Engine10), [@MarceloGoncalves](https://github.com/MarceloGoncalves), [@hiddenenigma](https://github.com/hiddenenigma) | | [Events](https://github.com/processing/p5.js/tree/main/src/events) | [@limzykenneth](https://github.com/limzykenneth), [@richardegil](https://github.com/richardegil), [@angelabelle](https://github.com/angelabelle), [@littlejacinthe](https://github.com/littlejacinthe), [@TanviKumar](https://github.com/TanviKumar), [@tuminzee](https://github.com/tuminzee) | | [Image](https://github.com/processing/p5.js/tree/main/src/image) | [@cgusb](https://github.com/cgusb), [@albertomancia](https://github.com/albertomancia), [@ramya202000](https://github.com/ramya202000), [@hannahvy](https://github.com/hannahvy), [@robin-haxx](https://github.com/robin-haxx)| | [IO](https://github.com/processing/p5.js/tree/main/src/io) | [@limzykenneth](https://github.com/limzykenneth), [@Pritam1136](https://github.com/Pritam1136), [@shahankhatch](https://github.com/shahankhatch), [@TanviKumar](https://github.com/TanviKumar), [@jeanetteandrews](https://github.com/jeanetteandrews)| | [Math](https://github.com/processing/p5.js/tree/main/src/math) | [@limzykenneth](https://github.com/limzykenneth), [@ericnlchen](https://github.com/ericnlchen), [@ChihYungChang](https://github.com/ChihYungChang), [@bsubbaraman](https://github.com/bsubbaraman), [@albertomancia](https://github.com/albertomancia), [@JazerUCSB](https://github.com/JazerUCSB), [@tedkmburu](https://github.com/tedkmburu), [@perminder-17](https://github.com/perminder-17), [@Obi-Engine10](https://github.com/Obi-Engine10), [@jeanetteandrews](https://github.com/jeanetteandrews) | | [Typography](https://github.com/processing/p5.js/tree/main/src/typography) | [@dhowe](https://github.com/dhowe), [@paulaxisabel](https://github.com/paulaxisabel), [@SarveshLimaye](https://github.com/SarveshLimaye), [@SkylerW99](https://github.com/SkylerW99), [@BamaCharanChhandogi](https://github.com/BamaCharanChhandogi), [@Obi-Engine10](https://github.com/Obi-Engine10), [@hannahvy](https://github.com/hannahvy), [@singshris](https://github.com/singshris), [@hiddenenigma](https://github.com/hiddenenigma) | | [Utilities](https://github.com/processing/p5.js/tree/main/src/utilities) | [@limzykenneth](https://github.com/limzykenneth), [@glopzel](https://github.com/glopzel) | | [WebGL](https://github.com/processing/p5.js/tree/main/src/webgl) | [@davepagurek](https://github.com/davepagurek), [@aferriss](https://github.com/aferriss), [@aceslowman](https://github.com/aceslowman), [@ShenpaiSharma](https://github.com/ShenpaiSharma), [@ChihYungChang](https://github.com/ChihYungChang), [@teragramgius](https://github.com/teragramgius), [@JazerUCSB](https://github.com/JazerUCSB), [@richardegil](https://github.com/richardegil), [@itsjoopark](https://github.com/itsjoopark), [@Gaurav-1306](https://github.com/Gaurav-1306), [@jeanetteandrews](https://github.com/jeanetteandrews) | | [Internalization](https://github.com/processing/p5.js/blob/main/src/core/internationalization.js) | [@limzykenneth](https://github.com/limzykenneth) | | [Friendly Errors](https://github.com/processing/p5.js/tree/main/src/core/friendly_errors) | [@richardegil](https://github.com/richardegil), [@itsjoopark](https://github.com/itsjoopark), [@hannahvy](https://github.com/hannahvy), [@bisabi-01](https://github.com/bisabi-01), [@singshris](https://github.com/singshris) | | [Contributor Docs](https://github.com/processing/p5.js/tree/main/contributor_docs) |[@limzykenneth](https://github.com/limzykenneth), [@asukaminato0721](https://github.com/asukaminato0721), [@SoundaryaKoutharapu](https://github.com/SoundaryaKoutharapu), [@richardegil](https://github.com/richardegil), [@hannahvy](https://github.com/hannahvy), [@bayomayo](https://github.com/bayomayo) | | [p5.sound](https://github.com/processing/p5.sound.js) |[@miguellacorte](https://github.com/miguellacorte), [@JazerUCSB](https://github.com/JazerUCSB), [@angelabelle](https://github.com/angelabelle), [@littlejacinthe](https://github.com/littlejacinthe), [@hannahvy](https://github.com/hannahvy), [@glopzel](https://github.com/glopzel), [@singshris](https://github.com/singshris), [@jeanetteandrews](https://github.com/jeanetteandrews) | | Build Process/Unit Testing | [@limzykenneth](https://github.com/limzykenneth) | ## Contributors We recognize all types of contributions. This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification and the [Emoji Key](https://allcontributors.org/docs/en/emoji-key) ✨ for contribution types. Instructions to add yourself or add contribution emojis to your name are [here](https://github.com/processing/p5.js/issues/2309). You can also post an issue or comment on a pull request with the text: `@all-contributors please add @YOUR-USERNAME for THING(S)` and our nice bot will add you.

_{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}
_L05	_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}	_{Eden 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	_{Shahriar Rahman Rubayet}
_{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}
_maxdevjs	_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} 🐛 💻 📖 💡

	Stars	Issues	Version	Updated	Created
babylonjs			7.5.0	2 days ago	10 years ago
p5	20,889	309	1.9.3	11 days ago	10 years ago
react-motion	21,651	193	0.5.2	7 years ago	9 years ago
react-three-fiber	26,063	50	6.0.13	3 years ago	5 years ago
three	99,025	489	0.164.1	8 days ago	11 years ago

babylonjs vs p5 vs react-motion vs react-three-fiber vs three

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past