Real-time image processing library for p5.js.
p5.FIP is a library that allows you to add image processing/post-processing effects to your p5.js sketch. In 5 lines of code you can add effects like bloom, glitching, cartoon shading and many more.
- 44 Effects
- Hardware Accelerated
- Documented
To use p5.FIP you can include it in your index.html file:
<head>
<!-- ...-->
<script src="https://prontopablo.github.io/p5.FIP/assets/javascripts/p5.FIP.js"></script>
<!-- ...-->
</head>Alternatively you can download the p5.FIP.js file from releases and bring it into your project files:
<head>
<!-- ...-->
<script src="p5.FIP.js"></script>
<!-- ...-->
</head>The reference website can be found here.
Warning
This library is for p5.js. If you are using Processing instead, head here.
Example sketches can be found in this collection here and they are also included in the examples folder on GitHub.
let ireland, motionBlur;
function setup() {
createCanvas(600, 600, WEBGL); // Use WEBGL mode to use shaders
motionBlur = createFilterShader(fip.motionBlur); // Load the motion blur shader
ireland = loadImage("ireland.jpg");
}
function draw() {
background(255);
imageMode(CENTER);
image(ireland, 0, 0, width, height);
// Apply the shader
filter(motionBlur);
} Important
The most recent release of p5.FIP changed how textures work. Now the entire canvas is the default texture. However, if we wanted to only pass a specific texture to our shader, we could use a framebuffer - see the blend example for details.
- p5.FIP.js: Shader code itself. This is where the actual functionality of the library is.
- docs: Reference website code that has been generated using Material for MkDocs from MarkDown files.
- mdDocs: Markdown files for the reference website. Much more human-readable than the files found in the docs folder, should the reference website no longer be live.
- examples: Examples showing how to use p5.FIP, just in case the p5.js collection examples no longer work.
In accordance with the p5.js library guidelines:
- p5.FIP has no dependencies.
- Examples are included.
- p5.FIP is open source.
- Keywords: image-processing, post-processing, filters.
- Last update: 04/02/25.
I welcome contributions from the community to make p5.FIP better. If you have any suggestions, bug fixes, or new features to add, feel free to create a pull request.
Many of these shaders were adapted from existing solutions in other programming languages, in these cases, the links to the original shaders or tutorials followed can be found at the top of each shader.
A list of existing Processing image processing libraries can be found here.