Popularity

9.1

Stable

Activity

9.9

Growing

Stars 20,835

Watchers 496

Forks 3,180

Last Commit 6 days ago

Description

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 JS or Processing, the p5.js overview wiki page is a good place to start. The frequently asked questions might also be helpful.

If you have found a bug in the p5.js library, you can file it here under the “issues” tab.

Monthly Downloads: 0

Programming language: JavaScript

License: GNU Lesser General Public License v3.0 only

Tags: Data Visualization D3 Visualization 3D Animation Creative Coding

Latest version: v1.1.9

p5.js alternatives and similar libraries

Based on the "d3" category.
Alternatively, view p5.js alternatives based on common mentions on social networks and blogs.

three.js

10.0 9.9 L2 p5.js VS three.js

JavaScript 3D Library.
echarts

9.9 8.7 p5.js VS echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App

With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

Promo surveyjs.io

Chart.js

9.9 8.1 L2 p5.js VS Chart.js

Simple HTML5 Charts using the <canvas> tag
fabric.js

9.4 9.3 L2 p5.js VS fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
BabylonJS

9.2 10.0 L2 p5.js VS BabylonJS

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
recharts

9.0 9.7 L3 p5.js VS recharts

Redefined chart library built with React and D3
paper.js

8.5 3.7 L3 p5.js VS paper.js

The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey
Frappe Charts

8.4 2.8 p5.js VS Frappe Charts

Simple, responsive, modern SVG Charts with zero dependencies
raphael

8.2 0.0 L1 p5.js VS raphael

JavaScript Vector Library
G2

8.2 9.5 p5.js VS G2

📊 The concise and progressive visualization grammar.
sigma.js

8.1 0.0 L2 p5.js VS sigma.js

A JavaScript library aimed at visualizing graphs of thousands of nodes and edges
vega

8.1 8.4 p5.js VS vega

A visualization grammar.
svg.js

8.0 7.2 L3 p5.js VS svg.js

The lightweight library for manipulating and animating SVG
nvd3

7.8 0.0 L2 p5.js VS nvd3

A reusable charting library written in d3.js
c3

7.8 3.9 L2 p5.js VS c3

:bar_chart: A D3-based reusable chart library
vis

7.7 0.0 L1 p5.js VS vis

Dynamic, browser-based visualization library.
trianglify

7.6 0.0 L5 p5.js VS trianglify

Algorithmically generated triangle art
dc.js

7.6 2.2 L3 p5.js VS dc.js

Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js
mxGraph

7.3 6.7 p5.js VS mxGraph

Diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor.
morris.js

7.3 0.0 p5.js VS morris.js

Pretty time-series line graphs
two.js

7.2 8.1 L1 p5.js VS two.js

A renderer agnostic two-dimensional drawing api for the web.
flot

7.2 4.1 L1 p5.js VS flot

Attractive JavaScript charts for jQuery
heatmap.js

7.1 0.0 L4 p5.js VS heatmap.js

🔥 JavaScript Library for HTML5 canvas based heatmaps
metrics-graphics

7.0 3.6 L5 p5.js VS metrics-graphics

A library optimized for concise and principled data graphics and layouts.
rickshaw

7.0 0.0 L2 p5.js VS rickshaw

JavaScript toolkit for creating interactive real-time graphs
cubism

6.3 0.0 L4 p5.js VS cubism

Cubism.js: A JavaScript library for time series visualization.
Frappe Gantt

6.3 4.8 p5.js VS Frappe Gantt

Open Source Javascript Gantt
d3-cloud

6.3 3.6 L3 p5.js VS d3-cloud

Create word clouds in JavaScript.
epoch

6.2 0.0 p5.js VS epoch

A general purpose, real-time visualization library.
peity

5.9 5.1 p5.js VS peity

Progressive <svg> pie, donut, bar and line charts
processing.js

5.8 0.0 p5.js VS processing.js

Processing.js makes your data visualizations work using web standards and without any plug-ins
arbor

5.5 0.0 L4 p5.js VS arbor

a graph visualization library using web workers and jQuery
dimple.js

5.4 0.0 L2 p5.js VS dimple.js

An object-oriented API for business analytics
react-simple-maps

5.3 0.0 p5.js VS react-simple-maps

Beautiful React SVG maps with d3-geo and topojson using a declarative api.
G2Plot

5.2 5.1 p5.js VS G2Plot

:dango: An interactive and responsive charting library based on G2.
g.raphael

4.5 0.0 L2 p5.js VS g.raphael

Charts for Raphaël
envisionjs

4.3 0.0 L1 p5.js VS envisionjs

Dynamic HTML5 visualization
d3plus

4.2 5.1 L2 p5.js VS d3plus

A javascript library that extends D3.js to enable fast and beautiful visualizations.
Bezier.js

4.2 4.7 p5.js VS Bezier.js

A nodejs and client-side library for (cubic) Bezier curve work
DHTMLX Gantt

4.1 5.4 p5.js VS DHTMLX Gantt

GPL version of Javascript Gantt Chart
jquery.sparkline

4.0 0.0 L2 p5.js VS jquery.sparkline

A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser
Ember Charts

3.5 2.3 L2 p5.js VS Ember Charts

[Moved to: https://github.com/Addepar/ember-charts]
d4

2.6 0.0 L4 p5.js VS d4

A friendly reusable charts DSL for D3
uvCharts

2.3 0.0 L5 p5.js VS uvCharts

Simple yet powerful JavaScript Charting library built using d3.js
SVG Gauge

2.3 1.3 p5.js VS SVG Gauge

Minimalistic, animated SVG gauge. Zero dependencies
Koto

2.0 0.0 L4 p5.js VS Koto

A framework for building reusable components with d3.js
pykcharts.js

1.6 0.0 L5 p5.js VS pykcharts.js

Well designed d3.js charting without the complexity of d3.js.
dhtmlxSuite v.7.3.0 Standard edition

1.3 4.4 p5.js VS dhtmlxSuite v.7.3.0 Standard edition

GPL version of DHTMLX Suite
chartist-js

1.2 0.0 L3 p5.js VS chartist-js

Legacy Chartist Repo for old gh-pages
COVID-19 in Charts

0.5 0.0 p5.js VS COVID-19 in Charts

Visual representations of the progression of COVID-19.

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.

Do you think we are missing an alternative of p5.js or a related project?

Add another 'd3' Library

Popular Comparisons

README

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:

p5.js general: https://github.com/processing/p5.js/issues
p5.sound: https://github.com/processing/p5.js-sound/issues
p5.js website: https://github.com/processing/p5.js-website/issues
p5.js web editor: https://github.com/processing/p5.js-web-editor/issues

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)
Overall	@qianqianye
Accessibility	@kungfuchicken, @cosmicbhejafry
Color	@KleoP, @murilopolese, @aahdee, @paulaxisabel
Core/Environment/Rendering	@limzykenneth, @davepagurek, @jeffawang
Data	@kungfuchicken, @cosmicbhejafry
DOM	@outofambit, @SarveshLimaye, @SamirDhoke
Events	@limzykenneth
Image	@stalgiag, @cgusb, @photon-niko, @KleoP
IO	@limzykenneth
Math	@limzykenneth, @jeffawang, @AdilRabbani
Typography	@dhowe, @SarveshLimaye, @paulaxisabel
Utilities	@kungfuchicken, @cosmicbhejafry
WebGL	@stalgiag; GSoC 2022: @aceslowman(Contributor), @kjhollen(Mentor); @ShenpaiSharma(Contributor), @calebfoss(Mentor); @davepagurek; @jeffawang; @AdilRabbani
Build Process/Unit Testing	@outofambit, @kungfuchicken
Internalization	@outofambit, @almchung
Friendly Errors	@outofambit, @almchung
Contributor Docs	SoD 2022: @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 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🐛 💻 📖 💡 👀 ⚠️ 🔧 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💻 Jonathan-David Schröder🤔 💻 Shubham Kumar💻 Jean Pierre Charalambos💻 🔧 Sai Bhushan💻 📖 Long Phan💻 Jean-Michaël Celerier🐛 So Sun Park📖 Daniel Adams💻 📖 Aloneduckling📖 Mohana Sundaram S💻 TwoTicks💻 📖 💡 Kathryn Isabelle Lawrence💻 🤔 Joonas Jokinen🎨 Ajaya Mati💻 Suhas CV📖 Sanjay Singh Rajpoot📖 Chris P.📖 Thomas Herlea🐛 💻 📖 Simranjeet Singh💻 📢 🎨 👀 Rahul Mohata📖 Dave Pagurek💻 ⚠️ Leo Kamwathi💻 David Weiss💻 📢 👀 📖 Chris Thomson💻 🐛 mainstreamdev🐛 Aaron George🐛 Alex Lyons📖 Tyler Jordan📖 Ghales🎨 💻 🔧 JetStarBlues📖 💻 Avelar📖 Oliver Steele📖 MiniPear📖 Paul Wheeler💻 Nitin Rana📖 Annie McKinnon🐛 💻 Jiwon Park (hanpanic)💻 truemaxdh🐛 💻 Katie💻 Guilherme Silveira📖 Camille Roux💻 reejuBhattacharya📖 💻 Akshat Nema💻 Anshuman Maurya🐛 Himanshu Malviya🐛 Samuel Cho🐛 Théodore Orfèvres🐛 Jyotiraditya Pradhan📖 Zearin📖 pifragile🐛 Jstodd🐛 Jens Axel Søgaard📖 🐛 oleboleskole3🐛 A Welles🐛 andrei antonescu🐛 Fun Planet🐛 Stig Møller Hansen🐛 Derek Enlow💻 Will Martin🤔 Beau Muylle📖 Ivy Feraco🐛 Gareth Williams💻 Ikko Ashimine📖 Jonas Rinke🐛 MATSUDA, Kouichi🐛 stampyzfanz📖 tae🐛 Divyansh013🌍 rinkydevi🌍 Coding for the Arts🐛 Dan🐛 Liz Peng🎨 💻 🔧 koolaidkrusade📖 smilee💻 CommanderRoot💻 Philip Bell📖 tapioca24🔌 Qianqian Ye💻 🎨 📖 📋 👀 🌍 Adarsh🌍 kaabe1🎨 📋 Seb Méndez🌍 Ryuya🐛 👀 💻 LEMIBANDDEXARI🌍 Vivek Tiwari🌍 Kevin Grajeda💻 anniezhengg💻 🎨 Seung-Gi Kim(David)🌍 Ike Bischof💻 Ong Zhi Zheng🔌 bsubbaraman🔌 Jenna deBoisblanc🔌 manpreet📖 💻 ⚠️ TetroGem🤔 ggorlen💻

Thanks goes to these wonderful people (emoji key)!