# How to cut an image into random shapes?

## Recommended Posts

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

##### Share on other sites

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

##### Share on other sites

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

##### Share on other sites

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

##### Share on other sites

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'.

##### Share on other sites

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:

So what is the easy way of doing this?

##### Share on other sites

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

##### Share on other sites

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();`

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.