Home

p5.FIP (Fast Image Processing)

Real-time image processing library for p5.js.

What is it?

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.

Left and right arrow keys cycle filters, up and down arrow keys cycle images.

Features

  • 44 Effects
  • Hardware Accelerated
  • Documented

Getting Started

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 for each shader can be found in the sidebar of this website.

Examples

Example sketches can be found in this collection here and they are also included in the examples folder on GitHub.

p5.js Library Guidelines

In accordance with the p5.js library guidelines:

  1. p5.FIP has no dependencies.
  2. Examples are included.
  3. p5.FIP is open source. Source Code.
  4. Keywords: image-processing, post-processing, filters.
  5. Last update: 15/03/24.

Contributing

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.

Acknowledgments

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.