Hello all. I'm looking for a convinient way to create such an effect in a web application: i have some picture, which has not very high resolution, and i want it to appear as a cloud of particles in some random part of the screen, and then to move to it's position.
It's ok that i will lose some resolution (i don't think that 1x1px particles are nice ;) ).
I want to use silverlight/canvas or processing-js/canvas.
Any ideas? Thx.
When your silverlight application loads the picture, what you can do is to split it into tiles. You use one object for each tile and you store the normal position for this tile (i.e. where it is originally in the picture). Then you give each tile a random position, and use a loop to move the tile in a line from the random position to its normal position. This appear as a cloud that resolves into the correct picture.
You can then play around with the size and number of tiles, and how they move to their correct position (you could have them slow down, or follow a curve instead of a straight line).