# processing/p5.js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/processing-p5-js).**

23,758 stars · 3,758 forks · JavaScript · LGPL-2.1

## Links

- GitHub: https://github.com/processing/p5.js
- Homepage: http://p5js.org/
- awesome-repositories: https://awesome-repositories.com/repository/processing-p5-js.md

## Description

p5.js is a JavaScript creative coding library and generative art framework. It serves as a web-based graphics engine and a high-level HTML5 Canvas wrapper designed to produce algorithmic imagery and responsive audio-visual experiences.

The project provides a simplified sketching API for rendering 2D and 3D graphics directly in a web browser. It enables the creation of interactive animations, generative art, and digital experiences that respond to user input.

The library covers a range of applications including interactive data visualization, browser-based multimedia art, and educational programming visuals. It allows for the production of motion graphics and visual effects within a web page.

## Tags

### Graphics & Multimedia

- [Image Graphics Rendering](https://awesome-repositories.com/f/graphics-multimedia/image-graphics-rendering.md) — Provides simplified sketching tools to draw shapes, colors, and generative imagery directly onto a web page. ([source](https://github.com/processing/p5.js#readme))
- [Creative Coding Frameworks](https://awesome-repositories.com/f/graphics-multimedia/creative-coding-frameworks.md) — Acts as a framework for building interactive visual and audio sketches using loop-based JavaScript APIs.
- [Generative Art Toolkits](https://awesome-repositories.com/f/graphics-multimedia/generative-art-toolkits.md) — Provides a toolkit of functions and algorithms to programmatically create digital art through geometry and color interpolation.
- [Immediate Mode Canvas Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/immediate-mode-canvas-renderers.md) — Implements a rendering system that draws graphics by executing painting commands every frame to an HTML5 Canvas.
- [Web Graphics Engineering](https://awesome-repositories.com/f/graphics-multimedia/graphics-rendering-engines/web-graphics-engineering.md) — Implements custom coordinate systems and rendering logic to animate visual elements and handle user input for digital art.
- [HTML5 Canvas Libraries](https://awesome-repositories.com/f/graphics-multimedia/html5-canvas-libraries.md) — Serves as a high-level JavaScript library for rendering 2D graphics and animations via the HTML5 Canvas API.
- [RequestAnimationFrame Loops](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-processing/image-sequence-processors/animation-frame-sequencers/canvas-frame-animations/frame-based-animation-engines/requestanimationframe-loops.md) — Uses a recursive requestAnimationFrame loop to synchronize visual updates with the browser's native refresh rate.
- [Multimedia Interactive Art](https://awesome-repositories.com/f/graphics-multimedia/generative-art-toolkits/css-based-generative-art/multimedia-interactive-art.md) — Supports the integration of audio and visual elements to create immersive, interactive digital art experiences.
- [Web Animation Production](https://awesome-repositories.com/f/graphics-multimedia/web-animation-production.md) — Enables the production of responsive motion graphics and visual effects directly in the browser without external video files.

### User Interface & Experience

- [Interactive Animation Systems](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/physics-motion-dynamics/physics-based-animations/interactive-animation-systems.md) — Enables the creation of responsive audio-visual experiences and animations that react in real-time to user input. ([source](https://github.com/processing/p5.js#readme))
- [Event-Driven Input Handlers](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/input-handling/event-driven-input-handlers.md) — Provides an event-driven system that maps mouse and keyboard inputs to a simplified coordinate system for canvas interaction.
- [Global State Managers](https://awesome-repositories.com/f/user-interface-experience/global-state-managers.md) — Maintains a centralized state for system variables like colors and line weights accessible across the drawing API.

### Part of an Awesome List

- [Visual Programming for Education](https://awesome-repositories.com/f/awesome-lists/learning/visual-programming-tools/visual-programming-for-education.md) — Facilitates teaching programming fundamentals by providing immediate visual feedback through shape and color rendering.
- [Graphics and Rendering](https://awesome-repositories.com/f/awesome-lists/devtools/graphics-and-rendering.md) — Library for creative coding.

### Data & Databases

- [Interactive Data Visualizations](https://awesome-repositories.com/f/data-databases/data-import-and-export/interactive-data-visualizations.md) — Provides the primitives necessary to turn complex data sets into interactive visual graphics and real-time animations.

### Software Engineering & Architecture

- [Execution Phases](https://awesome-repositories.com/f/software-engineering-architecture/execution-phases.md) — Organizes the software lifecycle into distinct setup and draw phases to manage the execution flow of a sketch.