WARNING

Due to a bug in how iOS handles webgl instancing, this animation performs incredibly poorly on iOS—to the point where it doesn't really work at all. On my phone, it runs at 0.0075 fps and makes my phone heat up to the temperature of the sun.

I'd recommend trying this on desktop (it also just looks better), but if you really want to see what happens on iOS, you can proceed anyway.

Instructions

This experiment visualises images as collections of animated coloured particles.

In addition to providing a few images (selectable on the configuration in the top right of the screen), it also allows you to upload your own by dragging and dropping them onto the canvas.

Through a bit of experimentation, I've found the following makes the best images:

• Lower resolution images or blurred images work better as it prevents the particles from changing size and colour too quickly as they move about. Most of the demo images are lower than 500px wide.
• Images with lots of contrast between lighter and darker areas make more effective graphics. Similarly, images where the details are on the lighter parts of the images and the backgrounds are dark also look better.
• Some images, especially images with finer details, look better with a high number of smaller points (adjust pointSizeMultiplier), while others look better with a low number of larger points.

To export high quality videos from this you'll need to clone the repo and look for the this.record call in ParticlePhotoWebgl.vue (or ask me for help on Twitter!)