Watercolor
September 18, 2015

I probably mentioned that I’ve been trying to make a little virtual study in Unity. But I’ve run into one small nag: I don’t really like the extraordinarily low-poly, textureless feel needed to achieve acceptable speeds on my janky old iPhone 4. (Don’t get me wrong; that art style is great for some projects...it’s just not good for this one.) So I’ve been working towards making a 2D, texture-only version. I’ve also wanted a more unusual art style, so I spent today creating a watercolor algorithm. In broad strokes, it uses a very slightly modified version of the K-means algorithm. Here it is in a little more detail:

  1. Draw the original image.
  2. Draw monochromatic ellipses of varying sizes, intensities, and opacities all over the original. (This is what lends the image the blotchy look later.)
  3. Make some centroids for the K-Means algorithm.
  4. Until satisfied:
    1. Blur the entire image with a Gaussian blur.
    2. Apply a very slightly modified K-Means algorithm using these steps:
      1. Assign every pixel to a centroid based on an average of the pixel's screen-space distance from the centroid and its color distance from the centroid's average color.
      2. Move every centroid to the average location of its pixels.
      3. Set every centroid's average color to the average of its pixels.
      4. Lerp every centroid's pixel colors a small way towards its average color.
  5. Apply post-processing effects:
    1. Draw the original image almost completely transparently over the new image. This prevents from the final image from looking like someone just spilled lots of colored paints on a canvas.
    2. Add a small bit of monochromatic noise to the entire image.

It’s not perfect yet, but it’s good enough for government work. Here’s an example of the results produced by this algorithm:

Before:

After: