Add Gradients for Fill and Strokes

[RandomGamingDev]

Increasing access

This would make many more things possible in p5.js without incurring the heavy performance cost of writing to a texture manually from the CPU or drawing a gradient using strokes, and without requiring the burden of shifting to WebGL and using shaders to achieve the gradient effect.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

Feature request details

Add the ability to use gradients instead of pure colors as a default option using canvas gradients for P2D/HTMLCanvas and WebGL vertex color interpolation for WebGL mode.

[gaurav-mehta19]

would like to work on this please
\assign

[davepagurek]

@gaurav-mehta19 before we get started on something like this, we need to discuss the implications a little bit, and possibly wait a bit for some p5.js 2.0 stuff since we're in the middle of a few refactors in the dev-2.0 branch that would affect this.

Two thoughts here:

• Do you think we need WebGL support for this, since we already support per-vertex fill/stroke colors? We could match the 2D gradient fills with shaders, but it might not be as useful in a 3D context as the existing tools we have. Since WebGL adds some things that aren't in 2D mode, maybe it makes sense for 2D canvas gradients to be a feature that just exists in 2D mode?
• In 2D mode, there's a question of how big of an API to make for a feature like this. Currently, setting drawingContext.fillStyle = yourGradient generally works, as long as you surround it by a push() and a pop() because setting fillStyle directly means p5's internal state goes out of sync with the underlying js canvas context, and also it requires knowing that you need to call createLinearGradient on drawingContext.
  • A possibly simple approach could be to make createLinearGradient and createRadialGradient, in 2D mode, call drawingContext.createLinearGradient under the hood, and then let you also pass a gradient into fill(). The upside is that it's a minimal implementation for us, although then the docs for a gradient object would exist on MDN instead of p5.
  • A heavier approach would be to make and document a p5 wrapper for those gradient classes.

cc the color stewards @paulaxisabel, @SoundaryaKoutharapu, @mrbrack, @TJ723, @Zarkv, @SkylerW99, @ramya202000, @hannahvy, @robin-haxx, @hiddenenigma, and @limzykenneth since you've been working on the 2.0 color refactor!

[limzykenneth]

For 2.0, using something like color.js this probably won't be complicated as it has detailed color interpolation support and we can more or less write a wrapper around it. One extra addition will be in 2D mode we'll need to convert the gradient in color.js into CanvasGradient before passing to fillStyle, same need to be done for WebGL if needed.

For now I think some experiment in an addon library would be best for us to figure out an API if the idea is to expose a public API for the user.

[NalinDalal]

please once check the pr #7387

[scarscarin]

Any update on this? This feature would make it a lot easier to work with p5 as a graphic tool. It's a recurring question when I teach the first classes of Creative Coding in art academies, and often it's the reason students stop using p5 as a graphic tool.

[ksen0]

Thanks for the +1 @scarscarin !

+1 @limzykenneth and @davepagurek 's questions regarding API design. This issue is currently in discussion/design stage; ideas are welcome in comments or potentially as add-on library proofs of concept / demonstrations.

Any ideas should build on p5.js 2.x latest, which has been released and stabilized since this issue was made, so there's no particular blocker that I'm aware of.