Image Filter – Project Detail

In this project, I used p5.js to explore interactive image filtering and manipulation techniques in the browser. As part of my frontend development practice, the project focused on applying custom matrix operations to digital images to create real-time visual effects — from blurring and sharpening to edge detection and color transformations.

I know what good performance looks like, and this isn’t it — but it served its purpose.

Highlights

Built with p5.js for interactive, real-time image processing.
Custom matrix transformations modify pixel data live in-browser.
Explored convolution filters, kernel effects, and channel manipulation.
Showcased the impact of filter combinations and matrix design.

Check it out below

Click the image where you want the focus point to be.

Use your keyboard to change filters:

SPACE = earlyBirdFilter

G = grayFilter

E = edgeFilter

B = embossFilter

Your screen is too small to display this content.