p5

p5.js is a JS client-side library for creating graphic and interactive expe...

README

npm version


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. 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 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 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 to get started! You can also check out the 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 and read our community statement and code of conduct. You can directly support our work with p5.js by donating to the Processing Foundation.

Get Started


Make your first sketch in the p5.js Editor! Learn more about sketching with p5.js on the Get Started and find everything you can do in the Reference.

To get the complete p5.js library on your own computer, 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 contributor docs for more information about our build process.

Issues


If you have found a bug in the p5.js library, you can file it here under the “issues” tab. 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:



Learning


Check out p5js.org for lots more! Here are some quick-links to get started learning p5.js.

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!
The Coding Train p5.js Tutorials: A huge trove of tutorials created by Dan Shiffman and friends

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.

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 one or more parts of this project, open an issue to volunteer as a steward!

@qianqianye - p5.js Project Lead
@outofambit - p5.js Mentor
@lmccart- p5.js Creator

AreaSteward(s)
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Overall[@qianqianye](https://github.com/qianqianye)
[Accessibility](https://github.com/processing/p5.js/tree/main/src/accessibility)[@kungfuchicken](https://github.com/kungfuchicken),
[Color](https://github.com/processing/p5.js/tree/main/src/color)[@KleoP](https://github.com/KleoP),
[Core](https://github.com/processing/p5.js/tree/main/src/core)/Environment/Rendering[@limzykenneth](https://github.com/limzykenneth),
[Data](https://github.com/processing/p5.js/tree/main/src/data)[@kungfuchicken](https://github.com/kungfuchicken),
[DOM](https://github.com/processing/p5.js/tree/main/src/dom)[@outofambit](https://github.com/outofambit),
[Events](https://github.com/processing/p5.js/tree/main/src/events)[@limzykenneth](https://github.com/limzykenneth)
[Image](https://github.com/processing/p5.js/tree/main/src/image)[@stalgiag](https://github.com/stalgiag),
[IO](https://github.com/processing/p5.js/tree/main/src/io)[@limzykenneth](https://github.com/limzykenneth)
[Math](https://github.com/processing/p5.js/tree/main/src/math)[@limzykenneth](https://github.com/limzykenneth),
[Typography](https://github.com/processing/p5.js/tree/main/src/typography)[@dhowe](https://github.com/dhowe),
[Utilities](https://github.com/processing/p5.js/tree/main/src/utilities)[@kungfuchicken](https://github.com/kungfuchicken),
[WebGL](https://github.com/processing/p5.js/tree/main/src/webgl)[@stalgiag](https://github.com/stalgiag);
Build[@outofambit](https://github.com/outofambit),
Internalization[@outofambit](https://github.com/outofambit),
Friendly[@outofambit](https://github.com/outofambit),
[Contributor[SoD

Contributors


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. You can also post an issue or comment with the text:@all-contributors please add @YOUR-USERNAME for THING(S) and our nice bot will add you.




Lauren McCarthy
Lauren McCarthy

Jason Sigal
Jason Sigal

Karen
Karen

Evelyn Eastmond
Evelyn Eastmond

Daniel Shiffman
Daniel Shiffman

Casey Reas
Casey Reas

Ben Fry
Ben Fry

Kenneth Lim
Kenneth Lim

🐛 💻 📖
kate hollenbach
kate hollenbach

Stalgia Grigg
Stalgia Grigg

Jerel Johnson
Jerel Johnson

Saksham Saxena
Saksham Saxena

saber khan
saber khan

Daniel Howe
Daniel Howe

Kevin Siwoff
Kevin Siwoff

Atul Varma
Atul Varma

Jess Klein
Jess Klein

uno seis tres
uno seis tres

susan evans
susan evans

Saskia Freeke
Saskia Freeke

Phoenix Perry
Phoenix Perry

jesse cahn-thompson
jesse cahn-thompson

Lee T
Lee T

Chelly Jin
Chelly Jin

L05
L05

DIYgirls
DIYgirls

lam802
lam802

Maya Man
Maya Man

Tega Brain
Tega Brain

luisaph
luisaph

AlM Chng
AlM Chng

aarón montoya-moraga
aarón montoya-moraga

Cassie Tarakajian
Cassie Tarakajian

Niklas Peters
Niklas Peters

📖
Mathura MG
Mathura MG

Yining Shi
Yining Shi

Jen Kagan
Jen Kagan

Jiashan Wu
Jiashan Wu

Marc Abbey
Marc Abbey

K.Adam White
K.Adam White

Eden Cridge
Eden Cridge

💻 🐛 👀 ⚠️
Michael Hadley
Michael Hadley

Todd H. Page
Todd H. Page

Jared Sprague
Jared Sprague

💻 📖 💡 💵 ⚠️ 🐛
evelyn masso
evelyn masso

Blaize Kaye
Blaize Kaye

Sanchit Kapoor
Sanchit Kapoor

Oliver Wright
Oliver Wright

Matthew Kaney
Matthew Kaney

Spongman
Spongman

Claire K-V
Claire K-V

R. Luke DuBois
R. Luke DuBois

Kevin Barabash
Kevin Barabash

codeanticode
codeanticode

Bob Holt
Bob Holt

Sarah Groff Hennigh-Palermo
Sarah Groff Hennigh-Palermo

Jordan Shaw
Jordan Shaw

brightredchilli
brightredchilli

Derek J. Kinsman
Derek J. Kinsman

harkirat singh
harkirat singh

GoToLoop
GoToLoop

Max Goldstein
Max Goldstein

XY Feng
XY Feng

Sparsh Paliwal
Sparsh Paliwal

Austin Cawley-Edwards
Austin Cawley-Edwards

📖 💡
taseenb
taseenb

Yannick Assogba
Yannick Assogba

John Pasquarello
John Pasquarello

💻
Kevin Workman
Kevin Workman

📖
gauini
gauini

David Wicks
David Wicks

Guillermo Montecinos
Guillermo Montecinos

Shawn Van Every
Shawn Van Every

Sinan Ascioglu
Sinan Ascioglu

Abe Pazos
Abe Pazos

Char
Char

Gene Kogan
Gene Kogan

Jason Mandel
Jason Mandel

Mark Russo
Mark Russo

Jonathan Dahan
Jonathan Dahan

Darius Morawiec
Darius Morawiec

Darby Rathbone
Darby Rathbone

hrishit
hrishit

Chiun Hau You
Chiun Hau You

Francesco Bigiarini
Francesco Bigiarini

Fabian Morón Zirfas
Fabian Morón Zirfas

Mike Anderson
Mike Anderson

Mikael Lindqvist
Mikael Lindqvist

Chris
Chris

Max Segal
Max Segal

Tyler Stefanich
Tyler Stefanich

Dave
Dave

Xavier Snelgrove
Xavier Snelgrove

Gareth Battensby
Gareth Battensby

Taeyoon Choi
Taeyoon Choi

AKASH RAJ
AKASH RAJ

Kevin Ho
Kevin Ho

Harsh Agrawal
Harsh Agrawal

Luca Damasco
Luca Damasco

Sam Lavigne
Sam Lavigne

Epic Jefferson
Epic Jefferson

Caroline Record
Caroline Record

Christine de Carteret
Christine de Carteret

Chris Hallberg
Chris Hallberg

David Newbury
David Newbury

piinthecloud
piinthecloud

Paolo Pedercini
Paolo Pedercini

Jason Alderman
Jason Alderman

Jennifer Jacobs
Jennifer Jacobs

Sepand Ansari
Sepand Ansari

Val Head
Val Head

Emily Chen
Emily Chen

Ben Moren
Ben Moren

Rune Skjoldborg Madsen
Rune Skjoldborg Madsen

Scott Murray
Scott Murray

Scott Garner
Scott Garner

b2renger
b2renger

Craig Pickard
Craig Pickard

mxchelle
mxchelle

Zach Rispoli
Zach Rispoli

Liu Chang
Liu Chang

Cristóbal Valenzuela
Cristóbal Valenzuela

Miles Peyton
Miles Peyton

Golan Levin
Golan Levin

feedzh
feedzh

Shahriar Rahman Rubayet
Shahriar Rahman Rubayet

Chiciuc Nicușor
Chiciuc Nicușor

Ken Miller
Ken Miller

Chandler McWilliams
Chandler McWilliams

Jaymz Rhime
Jaymz Rhime

Niels Joubert
Niels Joubert

Utkarsh Tiwari
Utkarsh Tiwari

Arihant Parsoya
Arihant Parsoya

Brad Buchanan
Brad Buchanan

Johan Karlsson
Johan Karlsson

Andy Timmons
Andy Timmons

zacharystenger
zacharystenger

Brian Boucheron
Brian Boucheron

sortasleepy
sortasleepy

Kyle McDonald
Kyle McDonald

Antonio Jesús Sánchez Padial
Antonio Jesús Sánchez Padial

💻
Brad Smith
Brad Smith

Vítor Galvão
Vítor Galvão

Devon Rifkin
Devon Rifkin

Emily Xie
Emily Xie

Boris Bucha
Boris Bucha

Petr Brzek
Petr Brzek

Ramin
Ramin

Arsenije Savic
Arsenije Savic

Luke Burgess-Yeo
Luke Burgess-Yeo

Sun Lifei
Sun Lifei

naoyashiga
naoyashiga

Jimish Fotariya
Jimish Fotariya

Jorge Moreno
Jorge Moreno

🐛 💻 📖
Steven Green
Steven Green

Marcus Parsons
Marcus Parsons

Nick Yahnke
Nick Yahnke

Anthony Su
Anthony Su

kroko / Reinis Adovičs
kroko / Reinis Adovičs

Robyn Overstreet
Robyn Overstreet

Ben Hinchley
Ben Hinchley

Max Kolyanov
Max Kolyanov

Zeno Zeng
Zeno Zeng

Seth
Seth

plural
plural

Lionel Ringenbach
Lionel Ringenbach

Harshil Goel
Harshil Goel

Joshua Storm Becker
Joshua Storm Becker

maxdevjs
maxdevjs

trych
trych

Alejandra Trejo
Alejandra Trejo

Prashant Gupta
Prashant Gupta

Kai-han Chang
Kai-han Chang

kjav
kjav

maddy
maddy

Christopher Coleman
Christopher Coleman

Boaz
Boaz

Yasai
Yasai

📝
Jay Gupta
Jay Gupta

Nitish Bansal
Nitish Bansal

Caroline Hermans
Caroline Hermans

💡 📖
Faith Wuyue Yu
Faith Wuyue Yu

Aatish Bhatia
Aatish Bhatia

📖 🐛
Mislav Milicevic
Mislav Milicevic

💻 🐛
Yuting Lu
Yuting Lu

📖
Adil Rabbani
Adil Rabbani

💻 🐛 💡
Pierre Krafft
Pierre Krafft

🐛 💻 📖 💡 👀 ⚠️ 🔧
Zoë Ingram
Zoë Ingram

📖
Aidan Nelson
Aidan Nelson

🐛 💻 📖
Cameron Yick
Cameron Yick

📖
Tanvi Kumar
Tanvi Kumar

🐛 💻 📖 💡
Katsuya Endoh
Katsuya Endoh

Kevin Bradley
Kevin Bradley

📖
Justin Kim
Justin Kim

📖
Federico Grandi
Federico Grandi

💻 📖
Freddie Rawlins
Freddie Rawlins