/p5.js

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 —

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

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.

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

Joe Cridge
Joe 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

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

💻 📖
Luc de wit
Luc de wit

💻 🐛
Mark Nikora
Mark Nikora

💻
Louis Demange
Louis Demange

🐛
Sanket Singh
Sanket Singh

💻 🐛 📖 💡
Oren Shoham
Oren Shoham

💻
Abhinav Sagar
Abhinav Sagar

💻
Jonathan Heindl
Jonathan Heindl

💻 💡 🤔 📖
Hirad Sab
Hirad Sab

💻 🐛 📖 💡
Vishal Singh
Vishal Singh

📖
Corey Gouker
Corey Gouker

💻 📖 🐛
Lisa Mabley
Lisa Mabley

📖 💡
Adam Ferriss
Adam Ferriss

💻 📖 🐛 💡

Thanks goes to these wonderful people (emoji key)!