We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProgramming Questions & HelpPrograms › Non linear transparent Gradient
Page Index Toggle Pages: 1
Non linear transparent Gradient (Read 644 times)
Non linear transparent Gradient
Mar 13th, 2009, 4:37pm
 
I thinking about an easy way to great semitransparent Shapes with an gradient added to it. Should be look something like this
Any Idea? Thanks!

http://www.dec32.de/public/transparentShape.jpg
Re: Non linear transparent Gradient
Reply #1 - Mar 13th, 2009, 5:23pm
 
What you want is a general gradient-fill mechanism.  I could be wrong, but I don't think Processing has such a thing yet.

It would be a great feature, though.  Head over to dev.processing.org/bugs and submit a feature request for an overload to the fill() function that takes the following argument list:

fill(
 float x1, float y1, // coordinates of one anchor point
 float x2, float y2, // coordinates of the second anchor point
 color[] bands,      // colors to use for the fill
 graidentMode mode   // An enum value such as "LINEAR" or "RADIAL"
);

The fill would interpolate a parametric variable from 0 to 1.0 along the line from (x1,y1) to (x2,y2), and use that to interpolate between the colors in the bands[] array.  For linear "rainbow" style gradients, this is a very generic way to do it.  The mode, LINEAR or RADIAL, would control whether the colors were filled in lines perpendicular to the line between (x1,y1) and (x2,y2), or in concentric circles with their origin at (x1,y1).
Re: Non linear transparent Gradient
Reply #2 - Mar 13th, 2009, 5:28pm
 
Thanks alot. I thought that processing dont have this feature yet. Any idea how to achieve an similar effekt? using textures? using svgs? Graphics? Just open it in Illustrator and Add the effekt would be a solution too but would be great if it doesnt need any postprocessing. hmm...
Re: Non linear transparent Gradient
Reply #3 - Mar 13th, 2009, 5:58pm
 
There are two ways to simulate such a thing:

1, approximate the fill you want by subdividing the shape into smaller shapes, each one of which is filled with a constant color, but where you change the color slightly from iteration to iteration:

colorMode(RGB, 255,255,255,100);
for(x = 0; x < width-10, x++)
{
fill(0,0,0,x/(width-10));
rect(x, height/2, 10, 10);
}

How good the effect is--how smooth--depends the number of pieces you subdivide things into.  More (smaller) pieces gives a better effect, but takes longer to calculate.  If you're just creating a static image, you probably don't care about that and can use a very large number of very small pieces.

2. Write your own gradient fill code.  Make a PImage that is the same size as the bounding-box of the shape you want to fill.  Using your gradient fill code, color the PImage appropriately.  Use the PImage to texture-map the shape.

This method will give you very high quality results, and may be the only practical method if you're working with shapes that don't lend themselves to easy subdivision as in the first strategy.  The down-side is that the code may be more complex (certainly, writing _good_ gradient fill code can be tricky to get right), and again, there will be a performance penalty that may be problematic for use in animation.  But again, you may not care about that.
Re: Non linear transparent Gradient
Reply #4 - Mar 13th, 2009, 10:40pm
 
thanks for your help. i found an easy and great way to achieve exactly what i wanted.
i used the sphere of surfacelib cut it in half and used sizeZ to get a flat disk. You can easily add vertical and horizontal gradients and change size and resolution etc...

http://www.eskimoblood.de/surfacelib/sphere_class_sphere.htm
Page Index Toggle Pages: 1