P5.js: Suggestion: provide shader for each p5js filter

Created on 1 Oct 2020 · 3Comments · Source: processing/p5.js

Suggestion: make available the set of filters in p5js (currently THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, BLUR, ERODE, DILATE) as shaders (with the same names), so that users can more easily port sketches between default and WEBGL renderers.

USE-CASE: Student has performance problems in sketch using filters. Instructor would like to suggest WEBGL, but the filter doesn't exist as a shader (or is not easily found).

Another option would be to have the filter call actually work in WEBGL by loading/invoking the correct shader automatically.

Most appropriate sub-area of p5.js?

[x] Accessibility (Web Accessibility)
[ ] Color
[ ] Core/Environment/Rendering
[ ] Data
[ ] Dom
[ ] Events
[ ] Image
[ ] IO
[ ] Math
[ ] Typography
[ ] Utilities
[x] WebGL
[ ] Other (specify if possible)

accessibility webgl enhancement

Source

dhowe

👍2 ❤1

Most helpful comment

Interesting idea! @aferriss has already done most (all?) of the hard work for this in this repo.

Typically, I would direct a student to this repo when I was suggesting this route. But perhaps it is worth the addition to library size (likely small) to have these as p5.Shader constants.

Performance is really important to consider right now and definitely falls under the umbrella of accessibility. Working with students through Zoom, I am painfully aware of the hard limits that students are hitting with performance. This is exacerbated by the fact that many students are using home computers for the first time when they have used school lab computers (which often have superior hardware) in the past.

For sketches that rely heavily on images with filters, the performance gains with WEBGL and shaders will be very significant.

stalgiag on 2 Oct 2020

❤2 👍2

All 3 comments

Interesting idea! @aferriss has already done most (all?) of the hard work for this in this repo.

Typically, I would direct a student to this repo when I was suggesting this route. But perhaps it is worth the addition to library size (likely small) to have these as p5.Shader constants.

For sketches that rely heavily on images with filters, the performance gains with WEBGL and shaders will be very significant.

stalgiag on 2 Oct 2020

❤2 👍2

Interesting idea! @aferriss has already done most (all?) of the hard work for this in this repo.

Exactly -- I think it would largely be a question of syncing up the names. And seems a good thing to do whether or not we want to have them invoked automatically when use the GL renderer.

dhowe on 3 Oct 2020

👍2

This sounds like a great idea to me! 💜