Monthly Archives: April 2016

Check out the real action here.

The naive approach on converting an image to SVG circled dots image, and applying some effects on it VS d3 native selector with transition. It is obvious, it is not going to turn out well. Looping through pixels is just a dumb way when working with images, but sometimes inevitable.

I loaded the image, and looped through each pixel to collect the color data and some coordinate info that will be used later to render the effect, the process is very lagging while loading a large image, I tried to cut my images small so that the rendering can be more fluent, and since my circle radius is set to be small, a large image will give me better resolution, so it also kind of defeats the purpose of making my image look dotty. Eventually, I made each image around 100×100.

The following Paint effect I called is actually a little trick with loops.

1

The 4 directions effect, when I generated all the dots, I randomly decides which dots I want it to come from which direction, and simply marked each circle with a class name of direction, and then everything else is just self explained.

2

The following is a little bouncing effect on rain.

Apr-24-2016 19-35-55

You can see them in real action here.

Thanks for reading.

Advertisements

I open sourced my playbook on how to quickly start a Ubuntu 14.04.4 LTS (Trusty64) virtual box with Docker preinstalled on your local machine with Vagrant. You can download it from here.

If you want to do complex work inside of your box, you can easily add more roles and build on top of it.

If you want to start an Ubuntu Server 14.04 LTS instance on Cloud Service, such as AWS, it will also work.

Thanks for reading.