Tuesday, May 24, 2011

Create Mosaic with your Image - Part 1

I have written a code to create a mosaic effect on the image.

Original Image:

Mosaic Image:

Mosaic Tile width used here is 5 px x 5px. You can change it in the code as well to whatever px you want  in MosaicView.m in the following lines.

int _widthOfTile=5;
int _heightOfTile=5;

In the code , you will have to select effect 1 on the first page.
Once you are on the next page, you will see the original image.
You tap on it , then you will be able to see the mosaic image.
You tap on it again, it back to original image again.

You can download the code here

I will be writing more variations of this mosaic effect and posting it here on the blog soon.

Note: I don't hold the copyright of these images, they are used only for the coding testing purpose here. 


  1. Hello - I've been messing with your code for a few days trying to figure out if there is a way to upload an image from the device image library? I want to replace the "pic1.png" with an image from the image library. Possible?

  2. Hi, i need to blur only the selected reactangular area. but not able to change the logic you have implemented UIColor *fillColor=[self getPixelValue:CGPointMake((i*_widthOfTile) + (_widthOfTile/2), (j * _heightOfTile) + (_heightOfTile/2)) :_width :_height]; for selected pixels only. Can you help me for the same?