p5.js welcomes libraries contributed by others! Check out the libraries tutorial for more specifics about how to create one. If you have created a library and would like to have it included on this page, submit a pull request on GitHub!
드로잉
a stereoscopic anaglyph scene of 3D terrain
p5.anaglyph
A library for creating 3D stereoscopic 3D scenes and images using red/cyan glasses. By Jenna deBoisblanc
The p5.bezier text with curves of different colors.
p5.bezier
p5.bezier helps draw Bézier curves with more than four control points and closed curves. By Peiling Jiang
The text 'p5.brush' surrounded by colored brush strokes.
p5.brush
Unlock custom brushes, natural fill effects and intuitive hatching in p5.js. By Alejandro Campos Uribe
Three gradients (linear, radial, and conic) created using p5.fillGradient
p5.fillGradient
Fill shapes in p5.js with Linear, Radial and Conic Gradients. By Jorge Moreno
색상
A grid of square pattern showcasing a multitude of colors.
p5.cmyk
CMYK color for p5.js. By JT Nimoy
Waves coloured using different tints of yellow
p5.colorGenerator
p5.colorGenerator generates harmonious color schemes by starting from a given base color or selecting a random color as a starting point. By Alex Codes Art
Color palettes in p5.js
p5.palette
A library to manage color palettes in p5.js. By Remistura Studio
사용자 인터페이스
Various controls shown on a canvas
canvasGUI
Create GUI controls directly on your canvas. By Peter Lager
Screenshot of p5.5.js
p5.5
Add UI to p5.js and other goodies. By Kris HEYSE
a rectangle on a black background with a green outline with the text p5.Modbuttons inside, there are multiple dials and sliders around the central rectangle
p5.Modbuttons
a simple and modular button system for p5js. By 7vector
A grid of buttons and sliders created by the library.
p5.touchgui
p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input. By Carlos L05 Garcia
수학
![The text [MatrixJs] with a long shadow and a bit of bloom](/_astro/MatrixJs.BfTvPsLy_4yaF1.png)
The text [MatrixJs] with a long shadow and a bit of bloom
MatrixJs
A basic javascript library for dynamic and powerful matrices based on lists wrapped around with a powerful class. By RandomGamingDev
A matrix and a vector both filled with asterisks. The math is written in white on a red background.
número
A friendly and intuitive math library for p5.js. By Nick McIntyre
Various colored shaped overlapping and colliding representing the functions of the p5.collide2d library
p5.collide2d
p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js. By Ben Moren
An image of 2 vectors, a large red one, and a smaller blue one, with the VecJs name on the red one
VecJs
A basic javascript library for dynamic vectors (e.g. vec2 & vec3) based on lists. By RandomGamingDev
물리
전체 보기 (1)
알고리즘
The name BasicECSJs on the top and an image of a duck (named duk) and a mannequin lying down on top of it, as well as a torch in the bottom right corner, titled Entity 0 to 2 in the respective order.
BasicECSJs
A basic javascript ECS system, with SceneManagers, Scenes and GameObjects with their own Start and Update functions. By RandomGamingDev
Limited Voronoi
c2.js
c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules. By Ren Yuan
A line showing an outline of points
concaveHull
Calculate a Concave Hull from a set of points in 2D space. By Mark Roland
9 video effects of the author's face in a 3x3 grid
p5videoKit
A dashboard for mixing video in the browser. By John Henry Thompson
3D
An egg cut up into slices
p5.csg
A library for constructive solid geometry. Do Boolean operations on your p5.Geometry to make new shapes! By Dave Pagurek
A logo and description of 'p5.simpleAR' library are placed in the center.
p5.simpleAR
A simple JavaScript library that easily converts existing p5.js sketches to AR. By Tetsunori Nakayama
A non-Euclidean geometry cube with faces showcasing teapot, bunny, and Buddha models.
p5.tree
Render pipeline for p5.js v2 — pose and camera interpolation, space transforms, frustum visibility, HUD, post-processing pipe, picking, and declarative control panels. By Jean Pierre Charalambos
Four images of a 3D airplane twisting upside-down
p5.warp
Fast 3D domain warping using shaders. By Dave Pagurek
인공지능, 머신러닝, 컴퓨터 비전
Text "Friendly machine learning for the web with ml5.js" on top of a light grey ml5.js logo
ml5.js
Friendly machine learning for the web—a neighborly approach to creating and exploring artificial intelligence in the browser. By NYU's Interactive Telecommunications/Interactive Media Arts Program 및 NYU Shanghai's Interactive Media Arts Program
Screenshot of two browser windows - one, running an instance of ComfyUI, the other running a p5.js sketch
p5.comfyui-helper
A library for interfacing with ComfyUI. By Gottfried Haider
애니메이션
People represented by circles and lines are walking in various directions. A logo and description of 'BMWalker.js' library are placed in the center.
BMWalker.js
A simple JavaScript library for drawing the biological motion 'Walker'. By Tetsunori Nakayama
p5.js spheres with texture from hydra and 'HY5' text, processed a second time with hydra.
HY5
hydra 🙏 p5.js ~ share visuals between both frameworks! By Ted Davis
A circle and a Bézier curve animated with p5.animS
p5.animS
Animates p5.js shapes by rendering their drawing processes. By wixette
Three cascading waves created using p5.createLoop
p5.createLoop
Create animation loops with noise and GIF exports in one line of code. By mrchantey
셰이더
Different property materials and color adjustments applied to Standford Dragon geometry, using LYGIA's reusable functions
lygia
LYGIA is a shader library of reusable functions that will let you prototype, port or ship a project in just few minutes. It's very granular, flexible and efficient. Support multiple shading languages and can easily be added to any project, enviroment or framework of your choice. By Patricio Gonzalez Vivo
A grid of ASCII characters representing perlin noise with a centered logo reading "p5.asciify".
p5.asciify
Apply real-time ASCII conversion to your favorite WEBGL p5.js sketches instantly. By humanbydefinition
The cover image for the p5.FIP library. Depicts a collage of three photos created using the filters in p5.FIP.
p5.FIP
Real-time image processing library - add filters and post-processing to your p5.js sketches. By Darragh Nolan
An abstract 3D shape made of a few partial spherical shells organically joined together.
Shader Park
Explore shader programming through a JavaScript interface without the complexity of GLSL. Quickly script shaders using a P5.js style language. By Torin Blankensmith 및 Peter Whidden
언어
The text 'i hear you' above the text 'you hear me'
p5.speech
p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen. By R. Luke DuBois
rita.js logo
rita.js
AI-free tools for natural language and generative writing. By Daniel C Howe
하드웨어
Mobile phone displaying a p5.js sketch with on-screen debug panel showing motion sensor data and touch controls
p5-phone
Mobile hardware access for p5.js - Simplifies accessing phone hardware, locks default gestures, and adds an onscreen console. By Nick Puckett
A browser window and a chip with an LED and a Bluetooth icon exchanging information via arrows back and forth
p5.ble
A Javascript library that enables communication between your BLE devices and your p5.js sketch. By Yining Shi, Jingwen Zhu 및 Tom Igoe
A digital illustration on a gray background featuring teal-colored floral embroidery patterns alongside pixelated white text that reads p5.embroider.
p5.embroider
p5.embroider.js is a p5.js library for creating machine-ready digital embroidery patterns. By Yuta Nakayama
An image of 3D printed vase made with p5.fab, next to lines of G-Code overlayed with the title 'p5.fab'.
p5.fab
p5.fab controls digital fabrication machines from p5.js! By Blair Subbaraman
사운드
An array of 8 overlapping circles.
p5.spatial.js
Adds multichannel audio support for p5.sound.js. By Tommy Martinez
Kickstart your JavaScript MIDI projects!
WEBMIDI.js
A user-friendly library to send and receive MIDI messages with ease. By Jean-Philippe Côté
데이터
전체 보기 (1)
교육
Wave equation on the upper left corner and right upper corner has a graph of cosine function plus some polynomial terms. A logo and description of 'p5.teach.js' library are placed in the center.
p5.teach.js
A beginner friendly math animation library for p5.js. By Aditya Siddheshwar, Nick McIntyre 및 Jithin KS
simple.js logo
simple.js
Helper functions and defaults for young and new coders. By Tariq Rashid
네트워킹
전체 보기 (1)
내보내기
p5.capture: Record your p5.js sketches effortlessly!
p5.capture
Record your p5.js sketches effortlessly! By tapioca24
The text "p5.record.js" overlayed on top of a black background. The left half of the text is red while the right half of the text is green.
p5.record.js
p5.js addon providing functions to record HTML canvas based sketches. By Kenneth Lim
a grid of wobbly circles of ink of different riso colors overlapping and blending
p5.Riso
p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints. By Sam Lavigne 및 Tega Brain
An abstract VHS tape
p5.videorecorder
Record your canvas as a video file with audio. By Caleb Foss
유틸리티
The text "every" large with "time" written below in small.
every
every simplifies using time in p5.js sketch to do things like scene changes or repetitive drawing. By Kevin Lee
p5.flex preview image
p5.flex
p5 container with responsive canvas feature. By Zaron Chen
FPS counter
p5.fps
Add a simple FPS counter to your sketches. By Taylor Vance
Two rounded rectangles with ellipses between. connecting lines give the effect of messages being sent between the rectangles via the ellipses.
p5.localessage
p5.localmessage provides a simple interface to send messages locally from one sketch to another. By Ben Moren