How to create an image reflection effect in Java ME

Comments

15 Sep
2009

Article Review by Larry101 (20090915)

This article demonstrates how to implement a cool image reflection in Java ME. The method described is fairly easy to implement and should be easy to implement for even fairly novice Java ME developers. The basic approach consists of:

1. Create a new image (image + reflection) the same width as the original and allowing additional height for the reflections
2. Get the graphics object for that image using the getGraphics() method
3. Fill the image with the background color of the canvas
4. Copy the original image to the new image
5. Get the red/green/blue array for the original image, line by line, using the getRGB() method.
6. Copy the image line by line, adjusting the transparency as required to create the reflection effect.

The article demonstrates a simple, yet effective way of making Java ME applications look more graphically appealing.

---

17 Sep
2009

Article Review by warjan (20090917)

Article is a great how to. It shows well explained code that creates reflection for given image. Quite useful if you want to add some interesting and nice looking effects to yours app graphics. It could be used for user's avatar for example.

I think that references to related articles on the web would be useful. For example excerpt from a book Filthy Rich Clients - http://www.informit.com/articles/article.aspx?p=1013851&rll=1&rll=1&rll=1&rll=1&rll=1 It is about Java SE, but it shows the possibilities of image manipulation and effects in Java through shifting RGB values.

Well written, well focused, good how to.

---

Log in or Join to leave comments.

Article Metadata

---

Article

Created: jappit (25 Jan 2009)

Last edited: hamishwillee (09 Feb 2012)

This article explains how to create a nice reflection effect starting from a simple Image.

You can see a live sample of this code here: Java ME Image reflection effect sample MIDlet

Source code

1. Method declaration

Let's start from method declaration:

public static Image createReflectedImage(Image image, int bgColor, int reflectionHeight)
{
}

We have 3 arguments:

• the original image to be reflected
• the background color (used for transparent images)
• the height of the reflection effect

2. The mutable Image

Now, let's create the mutable Image that will hold the resulting effect:

int w = image.getWidth();
 
int h = image.getHeight();
 
Image reflectedImage = Image.createImage(w, h + reflectionHeight);

We store the original image width and height into 2 int variables, and then create the mutable image with the same width, but with an height equal to h (the original image) plus the specified reflection height.

3. Copy the original Image

Now, first drawing steps are:

• Getting the Graphics object of the mutable image
• Filling the image with the background color
• Drawing the original image on the upper part of the mutable one

Graphics g = reflectedImage.getGraphics();
 
g.setColor(bgColor);
 
g.fillRect(0, 0, w, h + reflectionHeight);
 
g.drawImage(image, 0, 0, Graphics.TOP | Graphics.LEFT);

4. Create the reflection effect

Now, let's get to the important part of this article, that is the reflection effect itself:

• for each horizontal line of the reflected image part, take the corresponding vertical coordinate of the original image
• get the RGBA data of the corresponding horizontal line of the original image
• calculate the alpha to be applied to this line, and apply it to each element of the RGB data array
• draw the RGB data into the reflected image, by using its Graphics object

And here is the source code:

int[] rgba = new int[w];
int currentY = -1;
 
for(int i = 0; i < reflectionHeight; i++)
{
	int y = (h - 1) - (i * h / reflectionHeight);
 
	if(y != currentY)
		image.getRGB(rgba, 0, w, 0, y, w, 1);
 
	int alpha = 0xff - (i * 0xff / reflectionHeight);
 
	for(int j = 0; j < w; j++)
	{
		int origAlpha = (rgba[j] >> 24);
		int newAlpha = (alpha & origAlpha) * alpha / 0xff;
 
		rgba[j] = (rgba[j] & 0x00ffffff);
		rgba[j] = (rgba[j] | (newAlpha << 24));
	}
 
	g.drawRGB(rgba, 0, w, 0, h + i, w, 1, true);
}

in the above code, the rgba[] int array holds the current pixel row data, and will be refreshed only when necessary (so, when the y coordinate of the original image changes).

Sample usage

Using the above method is really simple, since it's only necessary to:

• Create the original Image to be reflected
• Call createReflectedImage() method by passing the original Image as argument, together with the background color and the reflection effect height

Image originalImage = Image.createImage("/cap_man1.png");
 
Image reflectedImage = ReflectedImage.create(originalImage, 0xffffff, 64);

Downloads

You can download the complete source code of this article here:

• ReflectedImage.java