Computer Vision

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.


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.


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.


I have been thinking about how to make data visualization more fun, although this blog has absolutely nothing to do with data, it is still a very fun experiment with d3. Basically the idea comes from a super simple and ugly wall decoration at GYPSY:


and then I suddenly want to do something fun with it, which leads to the following: here is the live version.


As you can probably tell, the colorful circles will drop to the bottom and get absorbed by those black holes until all the black holes are filled by the colorful ones.

Thanks for reading.

Recently I read a paper about exploring the use of memory colors for image enhancement. Memory colors have been defined as “those colors that are recalled in association with familiar objects”. Several early psychophysical studies support that the majority of people associate and ideal color with an array of everyday objects (skin, grass, sky, plant, sand, and etc).

An interesting fact is that when people use Photoshop to polish their photos, they inadvertently apply a lot of memory colors. Think about some of the modern famous photo apps like Instagram, which also applies memory color to enhance the photos, it has proven that memory color make people more pleasing than the original color.

There are also situations where the association with memory color is less appropriate; for example, the images that convey a certain mood, memory color can make the mood disappear.

The basic idea of using memory color to enhance an image is to shift the original color in some region of that image towards the memory color.

The following is a little experiment I did in Matlab to see how variation goes within an image.

For the common object that people might see every day: grass, brick, sky.

brick  grass  sky

I obtained the following graphs:

brick_rgbgrass_rgb  sky_rgb

The following is the Matlab code that does the trick:

function [ ] = generate_3d_plot( img_str )
  img = imread(img_str);
  [height, width, dim] = size(img);

  s = height*width;
  R = double(reshape(img(:,:,1), 1, s));
  G = double(reshape(img(:,:,2), 1, s));
  B = double(reshape(img(:,:,3), 1, s));
  scatter3(R,G,B,30,[R' G' B']./255,'filled','Marker','o');
  title('RGB values');

Thanks for reading.