close
The Wayback Machine - https://web.archive.org/web/20200728153444/https://github.com/processing/p5.js
Skip to content

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs

main
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

npm version

p5.js

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!

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.

Image
Lauren McCarthy

Image
Jason Sigal

Image
Karen

Image
Shahriar Rahman Rubayet

Image
Evelyn Eastmond

Image
Daniel Shiffman

Image
Casey Reas

Image
Ben Fry

Image
Kenneth Lim

🐛 💻 📖
Image
kate hollenbach

Image
Stalgia Grigg

Image
Jerel Johnson

Image
Saksham Saxena

Image
saber khan

Image
Daniel Howe

Image
Kevin Siwoff

Image
Atul Varma

Image
Jess Klein

Image
uno seis tres

Image
susan evans

Image
Saskia Freeke

Image
Phoenix Perry

Image
jesse cahn-thompson

Image
Lee T

Image
Chelly Jin

Image
L05

Image
DIYgirls

Image
lam802

Image
Maya Man

Image
Tega Brain

Image
luisaph

Image
AlM Chng

Image
aarón montoya-moraga

Image
Cassie Tarakajian

Image
Niklas Peters

📖
Image
Mathura MG

Image
Yining Shi

Image
Jen Kagan

Image
Jiashan Wu

Image
Marc Abbey

Image
K.Adam White

Image
Joe Cridge

Image
Michael Hadley

Image
Todd H. Page

Image
Jared Sprague

💻 📖 💡 💵 ⚠️ 🐛
Image
evelyn masso

Image
Blaize Kaye

Image
Sanchit Kapoor

Image
Oliver Wright

Image
Matthew Kaney

Image
Spongman

Image
Claire K-V

Image
R. Luke DuBois

Image
Kevin Barabash

Image
codeanticode

Image
Bob Holt

Image
Sarah Groff Hennigh-Palermo

Image
Jordan Shaw

Image
brightredchilli

Image
Derek J. Kinsman

Image
harkirat singh

Image
GoToLoop

Image
Max Goldstein

Image
XY Feng

Image
Sparsh Paliwal

Image
Austin Cawley-Edwards

📖 💡
Image
taseenb

Image
Yannick Assogba

Image
John Pasquarello

💻
Image
Kevin Workman

Image
gauini

Image
David Wicks

Image
Guillermo Montecinos

Image
Shawn Van Every

Image
Sinan Ascioglu

Image
Abe Pazos

Image
Char

Image
Gene Kogan

Image
Jason Mandel

Image
Mark Russo

Image
Jonathan Dahan

Image
Darius Morawiec

Image
Darby Rathbone

Image
hrishit

Image
Chiun Hau You

Image
Francesco Bigiarini

Image
Fabian Morón Zirfas

Image
Mike Anderson

Image
Mikael Lindqvist

Image
Chris

Image
Max Segal

Image
Tyler Stefanich

Image
Dave

Image
Xavier Snelgrove

Image
Gareth Battensby

Image
Taeyoon Choi

Image
AKASH RAJ

Image
Kevin Ho

Image
Harsh Agrawal

Image
Luca Damasco

Image
Sam Lavigne

Image
Epic Jefferson

Image
Caroline Record

Image
Christine de Carteret

Image
Chris Hallberg

Image
David Newbury

Image
piinthecloud

Image
Paolo Pedercini

Image
Jason Alderman

Image
Jennifer Jacobs

Image
Sepand Ansari

Image
Val Head

Image
Emily Chen

Image
Ben Moren

Image
Rune Skjoldborg Madsen

Image
Scott Murray

Image
Scott Garner

Image
b2renger

Image
Craig Pickard

Image
mxchelle

Image
Zach Rispoli

Image
Liu Chang

Image
Cristóbal Valenzuela

Image
Miles Peyton

Image
Golan Levin

Image
feedzh

Image
Chiciuc Nicușor

Image
Ken Miller

Image
Chandler McWilliams

Image
Jaymz Rhime

Image
Niels Joubert

Image
Utkarsh Tiwari

Image
Arihant Parsoya

Image
Brad Buchanan

Image
Johan Karlsson

Image
Andy Timmons

Image
zacharystenger

Image
Brian Boucheron

Image
sortasleepy

Image
Kyle McDonald

Image
Antonio Jesús Sánchez Padial

💻
Image
Brad Smith

Image
Vítor Galvão

Image
Devon Rifkin

Image
Emily Xie

Image
Boris Bucha

Image
Petr Brzek

Image
Ramin

Image
Arsenije Savic

Image
Luke Burgess-Yeo

Image
Sun Lifei

Image
naoyashiga

Image
Jimish Fotariya

Image
Jorge Moreno

🐛 💻 📖
Image
Steven Green

Image
Marcus Parsons

Image
Nick Yahnke

Image
Anthony Su

Image
kroko / Reinis Adovičs

Image
Robyn Overstreet

Image
Ben Hinchley

Image
Max Kolyanov

Image
Zeno Zeng

Image
Seth

Image
plural

Image
Lionel Ringenbach

Image
Harshil Goel

Image
Joshua Storm Becker

Image
maxdevjs

Image
trych

Image
Alejandra Trejo

Image
Prashant Gupta

Image
Kai-han Chang

Image
kjav

Image
maddy

Image
Christopher Coleman

Image
Boaz

Image
Yasai

📝
Image
Jay Gupta

Image
Nitish Bansal

Image
Caroline Hermans

💡 📖
Image
Faith Wuyue Yu

Image
Aatish Bhatia

📖 🐛
Image
Mislav Milicevic

💻 🐛
Image
Yuting Lu

📖
Image
Adil Rabbani

💻 🐛 💡
Image
Pierre Krafft

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

📖
Image
Aidan Nelson

🐛 💻 📖
Image
Cameron Yick

📖
Image
Tanvi Kumar

🐛 💻 📖 💡
Image
Katsuya Endoh

Image
Kevin Bradley

📖
Image
Justin Kim

📖
Image
Federico Grandi

💻 📖
Image
Freddie Rawlins

💻 📖
Image
Luc de wit

💻 🐛
Image
Mark Nikora

💻
Image
Louis Demange

🐛
Image
Sanket Singh

💻 🐛 📖 💡
Image
Oren Shoham

💻
Image
Abhinav Sagar

💻
Image
Jonathan Heindl

💻 💡 🤔 📖
Image
Hirad Sab

💻 🐛 📖 💡
Image
Vishal Singh

📖 💻
Image
Corey Gouker

💻 📖 🐛
Image
Lisa Mabley

📖 💡
Image
Adam Ferriss

💻 📖 🐛 💡
Image
Joshua Marris

📖 💻 📢
Image
Erica Pramer

📖
Image
Vasu Goel

💻 ⚠️
Image
Tokini Irene Fubara

📖
Image
Dhruv Sahnan

💻 📖
Image
Jon Kaufman

📖
Image
Nico Finkernagel

🚇 👀
Image
ashu8912

💻
Image
ffd8

💻
Image
Sona Lee

💻
Image
Ryan Slade

💻
Image
Mann Shah

Image
Juraj Onuska

Image
ANURAG GUPTA

📖
Image
Sagar Arora

Image
Rajiv Ranjan Singh

Image
Fenil Gandhi

📖 💡
Image
Akshay Padte

💻 🐛 ⚠️
Image
Satyam Kulkarni

📖
Image
Shirou

💻 🐛
Image
Sarthak Saxena

💻
Image
Nick McIntyre

🔌 🐛
Image
Amey Bhavsar

🐛 💡
Image
Minjun Kim

🐛 🌍
Image
Fisher Diede

💻
Image
karinaxlpz

🌍
Image
Samuel Alarco Cantos

🌍
Image
DIVYANSHU RAJ

💻 🐛 📖
Image
sm7515

📖
Image
Aditya Rachman Putra

📖
Image
shaharyarshamshi

🌍
Image
Ayush Jain

🌍
Image
Summer Rizzo

📖
Image
Aierie

💻 🐛
Image
Mateusz Swiatkowski

💻 🐛
Image
XingZiLong

🌍
Image
ov

🌍
Image
Kyle James

💻
Image
Abhi Gulati

📖
Image
Jeremy Tuloup

📖
Image
Luis Morales-Navarro

️️️️♿️
Image
Yuki

🌍
Image
cedarfall

📖
Image
Isaac Durazo

🌍
Image
İsmail Namdar

💻 ⚠️
Image
skyperx

💻
Image
Joseph Aronson

💻 🐛
Image
Haider Ali Punjabi

💻

Thanks goes to these wonderful people (emoji key)!

About

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs

Topics

Resources

License

Sponsor this project

  •  
Learn more about GitHub Sponsors

Languages

You can’t perform that action at this time.