Gradient fill PShape

edited April 2017 in How To...

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!

Tagged:

Answers

  • edited April 2017

    @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.

  • edited April 2017

    A shorter example
    strar_gradient.zip

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

  • edited April 2017

    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

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

  • edited April 2017

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

  • 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

  • @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

  • 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

  • You're welcome

  • @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.

  • @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

Sign In or Register to comment.