Supporting shader-based filters in p5js


This page details what I completed during Google Summer of Code 2023. I contributed to p5.js, which is a friendly, accessible Javascript library for creative coding. People use it to make code sketches in the browser, using functions like createCanvas(), draw(), circle(), text(), image(), cursor(), and noise(), just to name a few.

My work centered around the filter() function because it was too slow. I made it faster by using shaders, which are programs that use the GPU for image processing. Now people can use effects like blur without noticing such a drop in performance.

There were some secondary accomplishments as well. There's a new function createFilterShader() that makes writing shaders easier. I helped revise a few documentation pages. I also tried to contribute some benchmarking tools, but that was a bit ambitious.

These changes make shaders and image filters more accessible. Look for them in the next p5js release, expected October 2023. Here's some web editor sketches to demonstrate the changes:

old filter() old 2D shader
new filter() new 2D shader

Potential improvements: (1) I think there should be some refactoring to cut down on all the graphics layers swimming around - maybe by using framebuffers, or maybe just by understanding and wrangling the canvases better. (2) There's some alternative blur filters worth investigating. (3) Mobile performance needs attention too.

I enjoyed the experience and learned a lot. In fact, I learned so much that I wrote another post. That post is more about the GSoC experience in general, especially aimed at newcomers, and not so much about p5js details. But the reflections section could make sense on this page too.

Many thanks to my mentors for all their support.


Public documentation pages (which may get updated in the future, but at least for now they include some of my contributions):

Performance measuring helpers:


WEEK 12 a

WEEK 11 a

WEEK 10 a

WEEK 9 a

WEEK 8 a

WEEK 7 a

WEEK 6 a

WEEK 5 a

WEEK 4 a

WEEK 3 a

WEEK 2 a

WEEK 1 a

WEEK 0 a