Gradient fill PShape

EC93

Hi all

Just wondering if anyone would have advice on filling an irregular shape with a radial gradient. The processing examples don't seem to work with PShape in the same way they do with ellipse etc.

Thanks!

prince_polka

@EC93, I have an unfinnished shader solution, for filling an arbitrary shape with an arbitrary gradient.
gradients.zip

I'we also contemplated two possible, although maybe definitely not optimal solutions for doing it without a fragment-shader.

Masking/Greenscreening

Render a mask using whatever method you like, PShape, text, ellipse whatever in an off fill() color, and then traverse through the bounding box of the shape looking for that color and re-colouring it. Similar to how green screen works.

Trigonometry

Collect the edge coordinates from the shape you're going to draw, if necessary convert them to screen coordinates using screenX, screenY. Fill those coordinates with a triangle-mesh, these can be invisible triangles. Then traverse through the bounding box of mesh looking for pixels within it and re-colour them.

prince_polka

A shorter example
strar_gradient.zip

Tell me what you need this for and how you'd like it to work

jeremydouglass

Re:masking approaches you can also simply create a simple rectangular gradient on a PGraphics buffer and then mask it.

1. Draw a radial gradient as per https://processing.org/examples/radialgradient.html -- do this onto a PGraphics pgSource.
2. Draw a default-white filled image of your irregular shape onto a second PGraphics pgMask, then combine the source and mask as per https://forum.processing.org/two/discussion/comment/77997/#Comment_77997

If you want a shape-based gradient check out this past discussion: https://forum.processing.org/two/discussion/2283/color-gradient-to-a-shape

prince_polka

@jeremydouglass
Thank you, I did not know about PImage.mask()

Lord_of_the_Galaxy

What exactly is your shape? With proper calculations, you can create a PShape with the gradient you want.

EC93

Hi guys, thanks for getting back to me! Some of these things look really promising. @prince_polka, thanks for all your help but I can't seem to open your examples. @Lord_of_the_Galaxy, I have 6 shapes representing 6 counties of Northern Ireland which I want to apply the gradient to. Apologies, some of it is a little over my head, I really only have a limited understanding of Processing

prince_polka

@EC93 it doesn't matter too much that you can't open my examples, even if you could open them I'd suggests trying to do it the way jeremydouglass said instead anyways

EC93

Ah yes. That's exactly what I'm looking for, I completely missed it the first time I was looking through all the examples and responses. Thanks very much @prince_polka & @jeremydouglass

prince_polka

You're welcome

jeremydouglass

@prince_polka did you ever finish that shader "for filling an arbitrary shape with an arbitrary gradient" that you mentioned? I don't need it for anything at present, I was just curious. I often recommend mask solutions, but for some applications they are slow.

prince_polka

@jeremydouglass no I felt unispired for a while and learning programming while also working and following "pseudo science" was too much for lazy me.
as you say you do not need that thing, and I have many unfinished abstarct idéas without a use case, filling an arbitrary shape with an arbitrary gradient is something I can think I can achieve but my motivation is lacking right now