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 preload() {
motionBlur = createShader(fip.defaultVert, fip.motionBlur); // Load the motion blur shader
ireland = loadImage("ireland.jpg");
}
function setup() {
createCanvas(600, 600, WEBGL); // Use WEBGL mode to use the shader
}
function draw() {
background(0);
motionBlur.setUniform("texture", ireland); // Set the texture to apply the shader to
motionBlur.setUniform('uTextureSize', [width, height]); // Set the size of the texture
filter(motionBlur); // Apply the shader
} Important
We need to pass a texture to our shader. In the above example we can just pass the image as a texture. However, if we wanted to draw anything else, such as an ellipse, we would need to put it inside a PGraphics - see the blur 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: 20/11/24.
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.