Radial transparency gradients

Share your Work

martin846

Radial transparency gradients

in Share your Work • 2 years ago

It took me a while to figure out how to do this, so I posted a quick demo and sample code for anyone else who would like to do it.

http://redrowstudio.com/index.php/2011/04/26/radial-transparent-gradients-in-processing-org/

Suggestions for how to optimize the code appreciated. I tried benchmarking with pixels[] instead of set() and it wasn't any quicker.

Replies(8)

amnon.owed

Re: Radial transparency gradients

2 years ago

Nice piece of code, thanks for sharing!

One idea for optimizing might be to not use a pgraphics at all but instead change the main pixel array directly. Of course this would require some blend math so all in all not sure if it would truly be faster.

martin846

Re: Re: Radial transparency gradients

2 years ago

Thanks. I think you're probably right about the blend math.... after all, there must be some blend math going on somewhere to place the PGraphics objects, and I very much doubt that I could come up with a more efficient way to do it than the way that it's already implemented :-)

I suspect that most of the hard work is done during all the square/square root operations that are necessary to calculate the transparency value. I wonder if it could be sped up (at the expense of memory) by caching/precalculating an x, y -> transparency lookup table, or even a distance ->transparency table.

amnon.owed

Re: Radial transparency gradients

2 years ago

All right, did some testing. It seems 90% of the processing time of the complete radialGradient function is spent on Math.hypot. So that's really the only thing in there that needs to be optimized aka replaced. I've come up with the following solution. Place this line at the top of the function:

int halfsize = size / 2;

...and replace this line..

float distance = (float) Math.hypot(i - size / 2, j - size / 2) / (size / 2);

...by this line...

float distance = dist(i,j,halfsize,halfsize) / halfsize;

Then you should get a big performance boost.

jazzaiman

Re: Re: Radial transparency gradients

2 years ago

>> All right, did some testing. It seems 90% of the processing time of the complete radialGradient function is spent on Math.hypot.

Is there a performance testing method I don't know of? I mean, I don't know any, except for commenting chunks of code out and seeing render times.

martin846

Re: Re: Radial transparency gradients

2 years ago

Hmm, I get some very interesting results here! Just switching to

int halfsize = size / 2;

rather than recalculating it every time speeds up my test script by a factor of 4! However, switching to the built-in Processing dist() function slows it down by a factor of two. But the best result is to just use Math.sqrt() to calculate the distance:

Float xDist = i - halfsize
Float yDist = j - halfsize
Float distance = Math.sqrt(xDist*xDist + yDist*yDist) / halfsize

Which speeds up the script by a factor of 10! I think that this is because Math.hypot() is doing some fancy stuff behind the scenes for added accuracy, which we don't really need for this application.

I'm actually testing this from inside a Groovy script, so I'd be interested to know if anyone else gets the same results running either in pure Java, or inside the Processing IDE.

PhiLho

Re: Radial transparency gradients

2 years ago

Strange, dist() does almost the same thing.
Note that you can also gain a performance boost by using float instead of Float...

allonestr..

Re: Re: Radial transparency gradients

2 years ago

Often you could eliminate the sqrt altogether with a bit of rejigging.

For example, if an object is less than 100px away, do something.

dist = sqrt(dx*dx + dy*dy);

if dist < 100

{ do something; }

can be rejigged to be

dist = dx*dx + dy*dy;

if dist < 10000

{ do something; }

string

owaunz

Re: Radial transparency gradients

2 years ago

Wow! I love it when coders come with independently times but similar ideas.

My idea is sorta similar. I prerender the images and call them using key letters

Here is the sketch

http://openprocessing.org/visuals/?visualID=29717

Top Reply