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 โ€”

License

Notifications You must be signed in to change notification settings

myselfhimself/p5.js

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

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!

Area Steward(s)
Accessibility (Web Accessibility) outofambit
Color outofambit
Core/Environment/Rendering outofambit
limzykenneth
Data
DOM outofambit
Events outofambit
limzykenneth
Image stalgiag
IO limzykenneth
Math limzykenneth
Typography
Utilities
WebGL stalgiag
Build Process/Unit Testing outofambit
Localization Tools outofambit
Friendly Errors outofambit
Website limzykenneth

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


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


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


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

๐Ÿ› ๐Ÿ’ป ๐Ÿ“– ๐Ÿ’ก ๐Ÿ‘€ โš ๏ธ ๐Ÿ”ง

Zoรซ Ingram

๐Ÿ“–

Aidan Nelson

๐Ÿ› ๐Ÿ’ป ๐Ÿ“–

Cameron Yick

๐Ÿ“–

Tanvi Kumar

๐Ÿ› ๐Ÿ’ป ๐Ÿ“– ๐Ÿ’ก

Katsuya Endoh


Kevin Bradley

๐Ÿ“–

Justin Kim

๐Ÿ“–

Federico Grandi

๐Ÿ’ป ๐Ÿ“–

Freddie Rawlins

๐Ÿ’ป ๐Ÿ“–

Luc de wit

๐Ÿ’ป ๐Ÿ›

Mark Nikora

๐Ÿ’ป

Louis Demange

๐Ÿ›

Sanket Singh

๐Ÿ’ป ๐Ÿ› ๐Ÿ“– ๐Ÿ’ก

Oren Shoham

๐Ÿ’ป

Abhinav Sagar

๐Ÿ’ป

Jonathan Heindl

๐Ÿ’ป ๐Ÿ’ก ๐Ÿค” ๐Ÿ“–

Hirad Sab

๐Ÿ’ป ๐Ÿ› ๐Ÿ“– ๐Ÿ’ก

Vishal Singh

๐Ÿ“– ๐Ÿ’ป

Corey Gouker

๐Ÿ’ป ๐Ÿ“– ๐Ÿ›

Lisa Mabley

๐Ÿ“– ๐Ÿ’ก

Adam Ferriss

๐Ÿ’ป ๐Ÿ“– ๐Ÿ› ๐Ÿ’ก

Joshua Marris

๐Ÿ“– ๐Ÿ’ป ๐Ÿ“ข โœ…

Erica Pramer

๐Ÿ“–

Vasu Goel

๐Ÿ’ป โš ๏ธ

Tokini Irene Fubara

๐Ÿ“–

Dhruv Sahnan

๐Ÿ’ป ๐Ÿ“–

Jon Kaufman

๐Ÿ“–

Nico Finkernagel

๐Ÿš‡ ๐Ÿ‘€

ashu8912

๐Ÿ’ป

ffd8

๐Ÿ’ป

Sona Lee

๐Ÿ’ป

Ryan Slade

๐Ÿ’ป

Mann Shah


Juraj Onuska


ANURAG GUPTA

๐Ÿ“–

Sagar Arora


Rajiv Ranjan Singh


Fenil Gandhi

๐Ÿ“– ๐Ÿ’ก

Akshay Padte

๐Ÿ’ป ๐Ÿ› โš ๏ธ

Satyam Kulkarni

๐Ÿ“–

Shirou

๐Ÿ’ป ๐Ÿ›

Sarthak Saxena

๐Ÿ’ป

Nick McIntyre

๐Ÿ”Œ ๐Ÿ› โœ…

Amey Bhavsar

๐Ÿ› ๐Ÿ’ก

Minjun Kim

๐Ÿ› ๐ŸŒ

Fisher Diede

๐Ÿ’ป

karinaxlpz

๐ŸŒ

Samuel Alarco Cantos

๐ŸŒ

DIVYANSHU RAJ

๐Ÿ’ป ๐Ÿ› ๐Ÿ“–

sm7515

๐Ÿ“–

Aditya Rachman Putra

๐Ÿ“–

shaharyarshamshi

๐ŸŒ

Ayush Jain

๐ŸŒ

Summer Rizzo

๐Ÿ“–

Aierie

๐Ÿ’ป ๐Ÿ›

Mateusz Swiatkowski

๐Ÿ’ป ๐Ÿ›

XingZiLong

๐ŸŒ

ov

๐ŸŒ

Kyle James

๐Ÿ’ป

Abhi Gulati

๐Ÿ“–

Jeremy Tuloup

๐Ÿ“–

Luis Morales-Navarro

๏ธ๏ธ๏ธ๏ธโ™ฟ๏ธ

Yuki

๐ŸŒ

cedarfall

๐Ÿ“–

Isaac Durazo

๐ŸŒ

ฤฐsmail Namdar

๐Ÿ’ป โš ๏ธ

skyperx

๐Ÿ’ป

Joseph Aronson

๐Ÿ’ป ๐Ÿ›

Haider Ali Punjabi

๐Ÿ’ป

Swapnil-2001

๐Ÿ“–

Takuma Kira

๐Ÿ› ๐Ÿ’ป โš ๏ธ

Mohammad Hussain Nagaria

๐Ÿ›

Tushar Choudhari

๐Ÿ“– ๐Ÿ’ป

Nakul Shahdadpuri

๐Ÿ’ป

Jacques P. du Toit

๐Ÿ’ป

surajsurajsuraj

๐Ÿ›

Connie Liu

๐Ÿ’ป ๐ŸŽจ

Zeke Sikelianos

๐Ÿ“–

Ramon Jr. Yniguez

๐Ÿ’ป

Benoรฎt Bourรฉ

๐Ÿ“–

Hitesh Kumar

๐Ÿ’ป

Sampo Rapeli

๐Ÿ’ก

Nick Mรผller

๐Ÿ”Œ

Keith Tan

๐Ÿ“–

Berke ร–zgen

๐Ÿ›

Musab Kฤฑlฤฑรง

๐Ÿ’ป โš ๏ธ

Nicholas Marino

๐Ÿ“–

Greg Sadetsky

๐Ÿ’ป

Priya-Pathak

๐Ÿ’ก

Daniel Michel

๐Ÿ’ป

Nisar Hassan Naqvi

๐Ÿ’ป

Joshua Noble

๐Ÿ“–

Liam Piesley

๐Ÿ’ป

Rishabh Taparia

๐Ÿ’ป ๐Ÿ“–

Daniel Sarno

๐Ÿ’ก

Kunal Kumar Verma

๐Ÿ“– ๐Ÿ› ๐Ÿ’ป

Bharath Kumar R

๐Ÿ’ป

Aditya Mohan

๐Ÿ’ป

Arijit Kundu

๐Ÿ› ๐Ÿ’ป ๐Ÿ“–

Tanner Dolby

๐Ÿ’ป

sam delong

๐Ÿ’ป

Zhao Xin

๐Ÿ’ป ๐Ÿ‘€

Sivaram D

๐Ÿ“–

Pragya

๐Ÿ’ป

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 โ€”

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 96.4%
  • HTML 2.7%
  • Other 0.9%