New Library for Processing: FIP (Fast Image Processing)

Gallery
1

FIP

Hello all! I’ve just released my new library for Processing: FIP (Fast Image Processing).

Original image
Original image1002×1000 307 KB

Blended with another image
Blended with another image1002×999 227 KB

With glitch effect
With glitch effect1002×1000 307 KB

With motion blur
With motion blur1002×1000 179 KB

What is it?

FIP is a library that allows you to add real-time post-processing / image-processing effects to your Processing sketch.

Features

  • 43 Effects
  • Hardware Accelerated
  • Lightweight (536 kB)

So what?

I need people to test out the library, poke holes in it and suggest new features! If it works on your system, please let me know. To get started, head over to the project’s GitHub. There are instructions there on installing and using the library. If you have any issues installing or using the library, please respond to this post and I’ll be happy to help. Thank you!

Note: I am currently still iterating on the library, so the documentation is not complete but can be found here.

Edit: Thank you gotoloop for setting this post to the correct category!

11 Likes
2

Hello @prontopablo :wave:

Great work on the FIP library! Consider submitting it so it can be downloaded from the Processing Contribution Manager. Please email your library to prisonerjohn at gmail dot com for inclusion. Check the library guidelines (although note some parts may be outdated). Looking forward to your submission!

Best,
Raphaël de Courville
Processing Community Lead

2 Likes
3

Hello @ProcessingOrg

Thank you for the response! I believe I’ve followed all of the library guidelines and I just sent the email for inclusion.

Thank you,
prontopablo

EDIT: I’ve updated the library to include offline documentation. A few people have tried FIP out and come up with some cool use cases! If you can think of any effect you want added, let me know!

2 Likes
4

Update

I ported FIP to p5.js! Presenting p5.FIP:

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

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 website can be found here and the repository can be found here.

Examples

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

Please let me know if you have any feedback or ideas!

1 Like
5

This is fantastic! Thanks for sharing

Adding an image to each example would help beginners understand the effect. Maybe even as a “before and after” where applicable?

Additionally, you might want to post about p5.FIP on the p5.js Discord server, since a large part of the p5.js community is found there: p5.js

Best,
Raphaël de Courville
Processing Community Lead

1 Like