Solved

Fade an image revisited

Posted on 2011-03-01
9
1,159 Views
Last Modified: 2012-05-11
Hi,

I asked a question earlier about fading an image, that is create the impression that the image loose its colors. So the answer was using transparency which works fine.
But I wonder if there are other way of doing this? My problem is that when I draw an image behind the transparent image it will of course show.

So is it possible to make the colors fade by other means? Perhaps using the ColorFilter?

Thank you,

Peter
0
Comment
Question by:pivar
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 86

Assisted Solution

by:CEHJ
CEHJ earned 100 total points
ID: 35006696
>> My problem is that when I draw an image behind the transparent image it will of course show.

Yes it will. One approach you could try is to keep the image fully opaque but mask it with another image, which of course CAN have an alpha channel
0
 
LVL 22

Author Comment

by:pivar
ID: 35007179
I'm not sure I follow. Can you show with some code?
How will the image fade?
0
 
LVL 12

Assisted Solution

by:satsumo
satsumo earned 300 total points
ID: 35007893
Yes, there are other methods.

One method is to draw a progressively more opaque rectangle on top of the image you want to fade. This is effectively what CEHJ suggests. This method can create a few styles of transition.  If you draw a white rectangle with alpha masking, this is a fade-to-white effect.  If you draw a white rectangle with an additive blend you get a white-out effect (like turning the brightness on TV right up).

The two methods have a different 'feel' about them.  The masking is smooth, the whiteout is more organic (the best word I can think of).  I don't know if the Canvas draw code from the previous question was any use to you.  Otherwise, I would show code for creating this effect.
0
 
LVL 12

Expert Comment

by:satsumo
ID: 35007938
Yet, another method is palette manipulation.  However, thats not supported by an modern API that I know of and requires using an indexed image.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 5

Expert Comment

by:UnConn
ID: 35007999
If you do not mind 'modifiying' the bitmap in memory at run-time (a little expensive) look into Xfer modes Avoid or Target.  I am using it to tint (or replace) anythign that is white (or close to white).  If you did a paint with an Xfer mode of Avoid set to black (avoid black) you could 'color' everything else white.  This should 'tint' the image white thereby making it a vlack and white image.  If you wanted it to fade you would have to run a loop where the accuracy in matching the color changed each time from 0 to 255 I think.
0
 
LVL 22

Author Comment

by:pivar
ID: 35008325
satsumo, the canvas code from the previous question was in javascript (according to the methods used). I would prefer to have it in java (but pseudo-code could also work). I ended up setting the alpha on the paint object used to draw the bitmap as described in one of the links.

I feel I need to give some more details. The image I want to fade is of an irregular shape. Behind the shape I don't want image painted behind to show. But outside the shape I want images behind to show. The pixels outside the shape are set to full transparency.

I was thinking of painting a masked opaque bitmap with the background color behind my image. Would that give the same effect or better/worse than the one you described above?
If you just could show how to create an image from another image setting the opaque pixels to a certain (opaque) color and keep the transparent pixels I think it would be enough. Looping through all pixels you don't need to show, but hopefully there is a more efficient way to do this, perhaps by filters or the like.

0
 
LVL 5

Assisted Solution

by:UnConn
UnConn earned 100 total points
ID: 35008652
The first one uses Avoid, but also only does it for a circle that I set.

The second one uses Target, creates the shape by drawing a circle first and then painting the the whole circle using Target.

Both will maintain the transparencies set.

/* START modify back color */
Bitmap viewBack = BitmapFactory.decodeResource(context.getResources(),back);
Bitmap backBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas backCanvas = new Canvas(backBitmap);
Paint backPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
backCanvas.drawBitmap(viewBack, 0, 0, backPaint);
backPaint.setXfermode(new AvoidXfermode(Color.TRANSPARENT, 255, Mode.AVOID));
backPaint.setColor(colorBack);
backCanvas.drawCircle(147, 147, 294, backPaint);
backCanvas.setBitmap(backBitmap);
if (DEBUG) Log.v(TAG, "back " + mAppWidgetId);
/* END modify back color */


backPaint.setColor(Color.WHITE);
backCanvas.drawCircle(147, 147, 138, backPaint);
backPaint.setXfermode(new AvoidXfermode(Color.TRANSPARENT, 255, Mode.AVOID));
backPaint.setColor(Color.WHITE);
backCanvas.drawBitmap(viewPic, 0, 0, backPaint);
backCanvas.setBitmap(backBitmap);
0
 
LVL 12

Accepted Solution

by:
satsumo earned 300 total points
ID: 35011463
Yes, the method you suggest (drawing the fade color as opaque and putting the semi-transparent image on top) gives the same result as the one I decribed.

Unless the graphics object you're using has better compositing functions than the HTML Canvas, the only way I can see to create the mask image is to load the original image into Photshop/GIMP/Some-Image-Editor and set the color channels to white but leave the alpha intact.  I know you can do the operation you want in other graphics systems.  UnConn might know a better way.

You could try repeatedly drawing the image over itself with an additive mode.  If pixels in the image have some whiteness the image will eventually become white.  By whiteness I mean every pixel has some amount of red, green and blue (even a small amount will do).  That would be an uneven sort of fade and it can only fade to white.
0
 
LVL 22

Author Closing Comment

by:pivar
ID: 35018344
Thanks for your assistance,

I used the paint the fading image on an opaque background scheme.

I used a loop over pixels to create the opaque background bitmap mask.


/peter
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Introduction Everyone is using a smartphone these days. Contacts, messages, applications, documents, bookmarks, pictures, videos and other stuff which you created and are present only on your device come under the umbrella called “Personal Data”.…
In this post we will learn how to connect and configure Android Device (Smartphone etc.) with Android Studio. After that we will run a simple Hello World Program.
Video by: Michael
Viewers learn about how to reduce the potential repetitiveness of coding in main by developing methods to perform specific tasks for their program. Additionally, objects are introduced for the purpose of learning how to call methods in Java. Define …
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now