How to cut an image into random shapes?

[Teena]

Hello Everyone,

 

I just want to cut  any image programatically into random shape pieces.These pieces should not be look like squares.How can i do this?

 

Any suggestions help me alot!

Teena

[Teena]

Hello Everyone,

 

I just want to cut  any image programatically into random shape pieces.These pieces should not be look like squares.How can i do this?

 

Any suggestions help me alot!

Teena

[Teena]

I think this could be easiest question for you guys.Waiting from yesterday for answer.

[Teena]

I think this could be easiest question for you guys.Waiting from yesterday for answer.

[alex_h]

BTW reposting your question multiple times is actually less likely to get you an answer, not more!

 

Making an algorithm that can cut any image into a random selection of non-rectangular pieces is a pretty complex task. There are lots of variables to consider.

* what sizes could the input image be?

* what are the larges and smallest sizes the pieces should be?

etc

You need to have answers to these questions before you can make a decision about what method might be appropriate for carrying this task out.

Then you have the question of how to decide along which lines to cut up the source image. One simple solution is to have a selection of predetermined maps and randomly choose one. But it depends on your answers to the first two questions as to whether this is a viable solution or not, for example you would need to stretch the maps to fit the size of the input image so if there are a wide range of input image sizes then this may not be a good approach.

Once you have solved this stage then I guess you need to use some combination of masks and rendertexture usage to cut out the various pieces.

 

It is definitely not an 'easy question'.

[Teena]

I am using canvas for my games.I just want to make a simple engine to drag and drop these irregular pieces to  make picture.And my target audience is kids.

 

Could be like this:

http://www.codeproject.com/Articles/404077/Puzzle-game-for-tablets-and-SmartPhones#_comments

 

So what is the easy way of doing this?

[alex_h]

In that example the parts are not generated programmatically. They have been manually created with photoshop or equivalent.

[Teena]

Yes they are doing manually.

 

http://www.useragentman.com/blog/2011/10/29/clipping-jpeg-images-into-non-rectangular-polygons-using-polyclip-js/

 

With the help of above link ,we can clip images but i dont know how to deal it with canvas.

[alex_h]

It looks like it takes an HTML image element as input. One approach that might work would be to assign your canvas content to an image using canvas.toDataURL

var canvas = //your canvas goes herevar img = new Image();img.onload = function(){    //now the image is ready to pass to polyclip}img.src = canvas.toDataURL();