How to use image filters in p5.js

Image filters allow users to manipulate images. The p5.js library has a built-in function that allows such interactions to occur.

Images

To use images, we will primarily use the two functions loadImage() and image(). The loadImage() function has one nuance; it must be called in the preload() function rather than setup()The setup() function is called once at the start of the execution. This function sets up the application canvas.. This is because loadImage() is an asynchronousAsynchronous functions do not halt the execution of the application, rather, they wait for the function to be finish processing in the background. function, and calling it in setup() might cause the application to start without successfully loading the image.

Image filters

p5.js has a function called filter() for applying filters to images. This function can take up to three parameters. Let’s examine the function’s signatures.

• The type parameter represents the type of filter to apply. This can be either THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, BLUR, ERODE, or DILATE.

• The [param] is an optional parameter that represents a number. This is unique to each filter, usually indicating its strength.

• The [useWebGL] is also an optional parameter that represents a boolean value. This controls whether to use fast WebGL filters (GPU) or original image filters (CPU); defaults to true.

This signature is the same as the first one, with one notable difference: the omission of [param]. This syntax is usually used when some filter cannot be controlled by a number value, e.g. INVERT.

In this syntax customFilter is a p5.ShaderShader class for WEBGL mode. This syntax is out of scope for our purposes here as it involves using custom shaders, which require a deeper understanding of graphics programming and p5.Shader class, which exceeds the scope of this explanation focused on the built-in image filters provided by the filter() function.

Example: Image filter manipulation

Let's see an example use case of this function. In this example, we can see the effect of different filters. Press the keys 0 to 9 to see the results. Press any other key to go back to the original image. Feel free to play around with the code below:

Code explanation

• Lines 1–11: The img variable stores the image, which will be a p5.Image object. The imgUrl stores the path to the image. Then, the preload() function loads the image asynchronously before the main program starts.

• Lines 14–17: In the setup() function, create a canvas 500 pixels wide and 500 pixels high.

• Lines 19–68: In the draw() function, continuously redraw the background and the image at the top-left corner of the canvas with dimensions width by height. If a key is pressed, apply different image filters based on the pressed key using the p5.js library. Display labels using the label() function indicating the applied filter or show "ORIGINAL" if no specific key is pressed.

• Lines 71–93: Define a utility function label() to display labels. Set the fill color to black, draw a centered rectangle above the bottom edge of the canvas, set text alignment to center, set the text fill() color to white, set the textSize() to 16 pixels, and display the input string lab at the center of the rectangle, above the bottom edge.

Conclusion

The p5.js allows the user to manipulate images in a simple way. There are also other functions like tint()Used to add a color overlay to images which can be used to manipulate images. For more complex transformations, we can use custom p5.Shader filters.