Snow Falling Effect on image in ImageView (Android)

Before Snow Falling Effect

After Snow Falling Effect

Create new Android Project

Project Name: PlayingwithBitmaps

Build Target: Android 2.3.3   //or greater than that

Application Name: PlayingwithBitmaps

Package Name: com.hamad.playingwithbitmaps

Create Activity: Main

Min SDK: 10 // or greater than that

1. create main layout:

• One image view to display the image.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:id="@+id/rlMain" >

    <ImageView
        android:id="@+id/imViewAndroid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/car" />

</RelativeLayout>

 2. code of main activity:

package com.shaikhhamadali.blogspot.playingwithbitmaps;

import java.util.Random;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.widget.ImageView;

public class Main extends Activity {
 ImageView imViewAndroid;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  imViewAndroid = (ImageView) findViewById(R.id.imViewAndroid);
  imViewAndroid.setImageBitmap(applySnowFallingEffect(BitmapFactory.decodeResource(getResources(), R.drawable.beautiful)));
 }
 public Bitmap applySnowFallingEffect(Bitmap source) {
  // get source image size
  int width = source.getWidth();
  int height = source.getHeight();
  int[] pixels = new int[width * height];
  // get pixel array from source
  source.getPixels(pixels, 0, width, 0, 0, width, height);
  // create random object
  Random random = new Random();

  int R, G, B, index = 0, thresHold = 50;
  // iteration through pixels
  for(int y = 0; y < height; ++y) {
   for(int x = 0; x < width; ++x) {
    // get current index in 2D-matrix
    index = y * width + x;              
    // get RGB colors
    R = Color.red(pixels[index]);
    G = Color.green(pixels[index]);
    B = Color.blue(pixels[index]);
    // generate threshold
    thresHold = random.nextInt(255);
    if(R > thresHold && G > thresHold && B > thresHold) {
     pixels[index] = Color.rgb(255, 255,255);
    }                           
   }
  }
  // create output bitmap                
  Bitmap bmOut = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
  bmOut.setPixels(pixels, 0, width, 0, 0, width, height);
  return bmOut;
 }
}

  3. note that:

• With the help of this,applySnowFallingEffect() method you can apply Snow Falling Filter Effect on image on click,on action_down etc.
• also the algorithm is to generate a threshold number (0-255), if all R,G,B values of a pixel are greater than the threshold, then set the pixel to white.

  4. conclusion:

• Some deep information about Snow Falling Filter effect .
• Know how to apply Snow Falling Filter Effect on image bitmap from drawables.

  5. About the post:

• By Using the Approach of Randomizing Image pixel, another filter is created,named White/Snow Falling filter.
•  The code seems to explain itself due to comments, and is very easy to understand.
•  Don’t mind to write a comment whatever you like to ask, to know,to suggest or recommend.
•  Hope you enjoy it!

6. Source Code:

        you can download the source code here

Cheers,

Hamad Ali Shaikh

Read More

Dark Effect on image in ImageView (Android)

Before Dark Effect

After Dark Effect

Create new Android Project

Project Name: PlayingwithBitmaps

Build Target: Android 2.3.3   //or greater than that

Application Name: PlayingwithBitmaps

Package Name: com.hamad.playingwithbitmaps

Create Activity: Main

Min SDK: 10 // or greater than that

1. create main layout:

• One image view to display the image.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:id="@+id/rlMain" >

    <ImageView
        android:id="@+id/imViewAndroid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/car" />

</RelativeLayout>

 2. code of main activity:

package com.shaikhhamadali.blogspot.playingwithbitmaps;

import java.util.Random;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.widget.ImageView;

public class Main extends Activity {
    ImageView imViewAndroid;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imViewAndroid = (ImageView) findViewById(R.id.imViewAndroid);
        imViewAndroid.setImageBitmap(applyDarkFilter(BitmapFactory.decodeResource(getResources(), R.drawable.beautiful)));
 }
 public Bitmap applyDarkFilter(Bitmap source) {
     // get image source size
     int width = source.getWidth();
     int height = source.getHeight();
     int[] pixels = new int[width * height];
     // get pixel array from source
     source.getPixels(pixels, 0, width, 0, 0, width, height);
     // create random object
     Random random = new Random();
  
     int R, G, B, index = 0, thresHold = 0;
     // iteration through pixels
     for(int y = 0; y < height; ++y) {
         for(int x = 0; x < width; ++x) {
             // get current index in 2D-matrix
             index = y * width + x;
             // get RGB colors
             R = Color.red(pixels[index]);
             G = Color.green(pixels[index]);
             B = Color.blue(pixels[index]);
             // generate threshold
             thresHold = random.nextInt(255);
             if(R < thresHold && G < thresHold && B < thresHold) {
                 pixels[index] = Color.rgb(0,0,0);
             }
         }
     }
     // create output bitmap
     Bitmap bmOut = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
     bmOut.setPixels(pixels, 0, width, 0, 0, width, height);
     return bmOut;
 }
}

  3. note that:

• With the help of this,applyDarkFilter() method you can apply Dark Filter Effect on image on click,on action_down etc.
• Basically, the algorithm is to generate a threshold number (0-255), if all R,G,B values of a pixel are less than the threshold, then set the pixel to black.

  4. conclusion:

• Some deep information about Dark Filter effect .
• Know how to apply Dark Filter Effect on image bitmap from drawables.

  5. About the post:

• By Using the Approach of Randomizing Image pixel, another filter is created,named Dark/Black filter,or enhance the noise of darkness
• this could also used as ink dropping effect.
•  The code seems to explain itself due to comments, and is very easy to understand.
•  Don’t mind to write a comment whatever you like to ask, to know,to suggest or recommend.
•  Hope you enjoy it!

6. Source Code:

        you can download the source code here

Cheers,

Hamad Ali Shaikh

Read More

Tint Color Effect on image in ImageView (Android)

Before Tint Color Effect

After Tint Color Effect

Tint Degree=30

Tint Degree=30

Tint Degree=50

Tint Degree=80

Create new Android Project

Project Name: PlayingwithBitmaps

Build Target: Android 2.3.3   //or greater than that

Application Name: PlayingwithBitmaps

Package Name: com.hamad.playingwithbitmaps

Create Activity: Main

Min SDK: 10 // or greater than that

1. create main layout:

• One image view to display the image.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:id="@+id/rlMain" >

    <ImageView
        android:id="@+id/imViewAndroid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/car" />

</RelativeLayout>

 2. code of main activity:

package com.shaikhhamadali.blogspot.playingwithbitmaps;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.widget.ImageView;

public class Main extends Activity {
    ImageView imViewAndroid;
    public static final double PI = 3.14159d;
 public static final double FULL_CIRCLE_DEGREE = 360d;
 public static final double HALF_CIRCLE_DEGREE = 180d;
 public static final double RANGE = 256d;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imViewAndroid = (ImageView) findViewById(R.id.imViewAndroid);
        imViewAndroid.setImageBitmap(applyTintEffect(BitmapFactory.decodeResource(getResources(), R.drawable.car),80));
 }
  public Bitmap applyTintEffect(Bitmap src, int degree) {
      // get source image size
         int width = src.getWidth();
         int height = src.getHeight();
  
         int[] pix = new int[width * height];
      // get pixel array from source
         src.getPixels(pix, 0, width, 0, 0, width, height);
  
         int RY, GY, BY, RYY, GYY, BYY, R, G, B, Y;
         double angle = (PI * (double)degree) / HALF_CIRCLE_DEGREE;
         
         int S = (int)(RANGE * Math.sin(angle));
         int C = (int)(RANGE * Math.cos(angle));
  
         for (int y = 0; y < height; y++)
             for (int x = 0; x < width; x++) {
                 int index = y * width + x;
                 int r = ( pix[index] >> 16 ) & 0xff;
                 int g = ( pix[index] >> 8 ) & 0xff;
                 int b = pix[index] & 0xff;
                 RY = ( 70 * r - 59 * g - 11 * b ) / 100;
                 GY = (-30 * r + 41 * g - 11 * b ) / 100;
                 BY = (-30 * r - 59 * g + 89 * b ) / 100;
                 Y  = ( 30 * r + 59 * g + 11 * b ) / 100;
                 RYY = ( S * BY + C * RY ) / 256;
                 BYY = ( C * BY - S * RY ) / 256;
                 GYY = (-51 * RYY - 19 * BYY ) / 100;
                 R = Y + RYY;
                 R = ( R < 0 ) ? 0 : (( R > 255 ) ? 255 : R );
                 G = Y + GYY;
                 G = ( G < 0 ) ? 0 : (( G > 255 ) ? 255 : G );
                 B = Y + BYY;
                 B = ( B < 0 ) ? 0 : (( B > 255 ) ? 255 : B );
                 pix[index] = 0xff000000 | (R << 16) | (G << 8 ) | B;
             }
      // output bitmap
         Bitmap outBitmap = Bitmap.createBitmap(width, height, src.getConfig());    
         outBitmap.setPixels(pix, 0, width, 0, 0, width, height);
         
         pix = null;
         
         return outBitmap;
     }
}

  3. note that:

• i know that,it is a quite complicated algorithm, yet I also don’t really understand it clearly.I’ve found it at this link Working with images in Google Android

• With the help of this,applyTintEffect() method you can apply Tint Color Effect on image on click,on action_down etc.

  4. conclusion:

• Some deep information about Tint Color effect .
• Know how to apply Tint Color Effect on image bitmap from drawables.

  5. About the post:

•  The code seems to explain itself due to comments, and is very easy to understand.
•  I Think this Rocking algorithm,what do you think?
•  Don’t mind to write a comment whatever you like to ask, to know,to suggest or recommend.
•  Hope you enjoy it!

6. Source Code:

        you can download the source code here

Cheers,

Hamad Ali Shaikh

Read More

Convolution Matrix for image processing (Android).

It’s not easy to explain about Convolution, so I just pick up several article links which would be helpful for you to understand convolution better.and you can use it for references.

GIMP Documentation on Convolution Matrix <— really detailed on explanation.

VcsKicks.Com – Convolution Application on Box Blur effect

Convolution Study by Ahn Song Ho

CodeProject – Image Processing for Dummies (Part II – Convolution Filters)

RoboRealms – Short article on Convolution

Convolution on Wikipedia

  I write this post just to introduce about Convolution and prepare for the next several posts on image processing, cool effects!

At the very first, you need a base for computing Convolution Matrix on Android, don’t you?
so here is the code:

  1.code of convolution matrix:

package pete.android.study;
 
import android.graphics.Bitmap;
import android.graphics.Color;
 
public class ConvolutionMatrix
{
    public static final int SIZE = 3;
 
    public double[][] Matrix;
    public double Factor = 1;
    public double Offset = 1;
 
   //Constructor with argument of size
    public ConvolutionMatrix(int size) {
        Matrix = new double[size][size];
    }
 
    public void setAll(double value) {
        for (int x = 0; x < SIZE; ++x) {
            for (int y = 0; y < SIZE; ++y) {
                Matrix[x][y] = value;
            }
        }
    }
 
    public void applyConfig(double[][] config) {
        for(int x = 0; x < SIZE; ++x) {
            for(int y = 0; y < SIZE; ++y) {
                Matrix[x][y] = config[x][y];
            }
        }
    }
 
    public static Bitmap computeConvolution3x3(Bitmap src, ConvolutionMatrix matrix) {
        int width = src.getWidth();
        int height = src.getHeight();
        Bitmap result = Bitmap.createBitmap(width, height, src.getConfig());
 
        int A, R, G, B;
        int sumR, sumG, sumB;
        int[][] pixels = new int[SIZE][SIZE];
 
        for(int y = 0; y < height - 2; ++y) {
            for(int x = 0; x < width - 2; ++x) {
 
                // get pixel matrix
                for(int i = 0; i < SIZE; ++i) {
                    for(int j = 0; j < SIZE; ++j) {
                        pixels[i][j] = src.getPixel(x + i, y + j);
                    }
                }
 
                // get alpha of center pixel
                A = Color.alpha(pixels[1][1]);
 
                // init color sum
                sumR = sumG = sumB = 0;
 
                // get sum of RGB on matrix
                for(int i = 0; i < SIZE; ++i) {
                    for(int j = 0; j < SIZE; ++j) {
                        sumR += (Color.red(pixels[i][j]) * matrix.Matrix[i][j]);
                        sumG += (Color.green(pixels[i][j]) * matrix.Matrix[i][j]);
                        sumB += (Color.blue(pixels[i][j]) * matrix.Matrix[i][j]);
                    }
                }
 
                // get final Red
                R = (int)(sumR / matrix.Factor + matrix.Offset);
                if(R < 0) { R = 0; }
                else if(R > 255) { R = 255; }
 
                // get final Green
                G = (int)(sumG / matrix.Factor + matrix.Offset);
                if(G < 0) { G = 0; }
                else if(G > 255) { G = 255; }
 
                // get final Blue
                B = (int)(sumB / matrix.Factor + matrix.Offset);
                if(B < 0) { B = 0; }
                else if(B > 255) { B = 255; }
 
                // apply new pixel
                result.setPixel(x + 1, y + 1, Color.argb(A, R, G, B));
            }
        }
 
        // final image
        return result;
    }
}

  2. note that:

• You can find more articles on Internet for details. However, you can see that Convolution is applied very widely in image processing for using filters.
• Some image effects are better to implement using Convolution Matrix method like: Gaussian Blur, Sharpening, Embossing…

  3. conclusion:

• Some deep information about Convolution Matrix.
• Know what is convolution matrix and where it can be used.

  4. about the post:

•  The code seems to explain itself due to comments, and is very easy to understand.
•  Don’t mind to write a comment whatever you like to ask, to know,to suggest or recommend.
•  Hope you enjoy it!
• Hope you like and comment on it!

  5. Source Code:

        you can download the source code here

Cheers,

Hamad Ali Shaikh

Read More