Twin Pictures video

So here's a small video to show you Twin Pictures.


upgrades on Twin Pictures

So today I published a new version of Twin Pictures. I added some interesting features.

First, for the second image, you can choose instead to use the first image in negative. So, just like the default settings with the Android logo, it creates a really great effect. You can really enjoy the dueling process for the two images with the negative option.

Here's an example with the Mortal Kombat Logo:

I also added new ways to split the screen for the images:

  • Random: the original method, no real structure, it's spinning around at various speed
  • Symmetry: this method splits the screen in two. So you see equally part of image 1 and image 2 at all time.
  • Asymmetry: this method can look symmetrical on certain point of view, but not on the part shared by the images. At some point, you will not see one of the image.
  • Symmetrical Yin Yang: this one is inspired by some pictures I showed in a previous post. The screen is split in two, but there's no axis of symmetry.
  • Asymmetrical Yin Yang: just like asymmetry above, it splits the screen, but not necessary equally and without an axis of symmetry.
It's also possible to set the brightness. The minimum is 50% and by default it's at 100%.

Next upgrade:

I'm looking at options for the part of the screen where the images intersect. For now, there's a very small change between the images. But it's enough to be a rough one (but it will be an option). So, i'm planning 5-6 options just to give more choice to the users with the visual aspect.



A new live-wallpaper

Recently, I showed images about grouping points together to create a different kind of Voronoi diagram (see Merging Voronoi).

The case with two groups is very interesting because it splits the plane in two parts. I was first intrigued by what it would look like animated and then I imagined that if each group is associated with an image. It's possible to show parts of the first image where its group is visible and part of the second image where the second group is.

So I came up with a very simple live-wallpaper. All you need to do is select two images and let the animation do the rest. This is much more easier to use than the Weird Voronoi (Pro) with all the functions.

Here's some outputs:

(this one is the default, when you first start the live-wallpaper)

Here's the link and the QR code:



Weird Voronoi Pro (news and possible improvement)

So first, after playing around with all the functions. I found my favorite configuration yet (but I might found a better one... who knows).

field value
Select a ratio, R = (d1*d2)/(d3^2)
x = f(R) f(R) = tan(R*pi/4)
y = f(x) f(R) = R*(0.5*[!] + 0.5)
z = f(y) f(R) = R^2
c = f(z) f(R) = R

And for the improvements, one option is to at least double the number of steps. But I will wait for some comments about this. As you can see, in the above configuration, I don't even need the last one.

Also, I'm still looking for more functions to offer a larger variety of transition in the [0;1] range. Particularly functions that might reach both limits more than once in the [0;1] of the input. This will create more disturbance inside one cell alone!

This week, I will start writing some documentation, to explain all of this and to present the choices available later to develop your own function with GLSL.


Weird Voronoi Pro

Finally, I published my professional version of my live-wallpaper. Currently (while I'm writing those words), the live-wallpaper is not available on the Market, BUT NOW IT'S AVAILABLE. I think there's a delay before a paid apps is officially available (I hope it's not too long).

The big changes compared with the free version is the number of functions. First, you can choose a "ratio" as a basic value. For each pixel, before determining its color, the three closest points (according to the distance function used, not necessary the straight line) are found. Let d1, d2 and d3 be those distances. In the free version, the only ratio that exists is d1/d2. Which is the basic one used to draw Voronoi diagram. The background used on this blog is drawn with that ratio. Remember that where there's a Voronoi's edge, it means that two points are a the same distance, so d1/d2 = 1. If the pixel is right on a point, then d1/d2 = 0.

But in this new version, you have access to other ratio, like d1/d3, d2/d3 and (d1*d2)/(d3*d3). You, currently, have 11 choices for this. And the ratio influence the shape of the cells. For the color, only ratio using d1 and d2 make sense. All the other creates weird interaction. But some people might like it.

Second, the functions. For now, the function used to compute the distribution of the color consist of 4 steps. Let R be the ratio, then you have:

  1. x = f(R)
  2. y = f(x)
  3. z = f(y)
  4. c = f(z)

where 'c' is the value used for the color. For each step, you can choose among 55 functions (but let say 54, because if you choose f(R) = 1, then you remove a lot of choices). The default function is f(R) = R.
So, if we consider all possible choices (and ignore those that opposed each other), you have 54^4 possibles functions with 11 ratios. Therefore, you have 93 millions functions available to you.

NOTE that all function are f:[0,1] -> [0,1]. So, by restraining to this interval, it's easier to control at each steps.

Among the functions, there's some that use [?] and [!], two values between 0 and 1. These are values controlled elsewhere in the computation.

  • [?] is a random value that changes for each frame rendered. This value is not stable so it creates effects that some time might look like lightnings.
  • [!] on the other hand is more stable. It's a wave that follow the positive values of a sine. Therefore, it goes from 0 to 1 and then from 1 to 0. It can be used to have a regular effects over the color distribution. By default, it takes 4 seconds to have a full cycle, but it's possible to change the speed.

Here's the qr code and the direct link:


Here's some screenshots:

The settings for the function. From the settings, click on "Functions" then "Cell and Color functions". You can see the selection of the ratio first followed by the four steps of functions.

I also post an update for the [!] feature. First, I was using the function sin(pi * t) where t is in [0;1]. But I forgot that this function is not continuous on the first derivative. This mean that at some point, the transition was not very fluid. It was following an half-circle and going fast on the 0 and took a lot of time around the 1.

Therefore, I changed it to cos(2*pi*t) * 0.5 + 0.5. With this, the function is still in the [0;1] range but the transition is very smooth. There's no drastic, unaesthetic, changes. All of this because the this function is continuous on the first derivative.


merging voronoi

Here we are playing again with the Voronoi diagram (VD). We wanted to see what happen when sites are merged together (MVD, merged VD).

VD partitions the plane in cells where each of these cell represents the closest part of the plane to a particular site. So, if you have sites on a map of various fast food restaurants, the Voronoi diagram tells you which one is physically the closest to your location.

But imagine that we want to consider all restaurant from a particular chain as one entity. We want to know the influence or the domination of a particular chain.

The following images are in pair. The first one is the influence of a chain of restaurant and the second is the actual VD that everyone knows. Cells with the same color represents a chain of restaurant.

In the images, you can see some brighter points (particularly in the first two images), this is the actual location of the site (or restaurant for in our example).

And just like the VD is well known for its role in texture synthesis, we hope to find a way to use the MVD to create some interesting results.

As for the diagram itself, we don't really know what to do with it or how to interpret it. VD has a dual graph called the Delaunay Triangulation. But what would be the dual graph of MVD ? Where do we put the edges ? That's an open question.


More texture synthesis

In this post, I present some new result that we really like. Again, it's a variation of the Voronoi diagram. You can observe the Voronoi cells interacting with each other. The colors help to see clearly the cells. And because of the few number of color, some cells might share the same color but are not related at all.

Here's some of the results:

This method, if it produces the result we're expecting, can be used to create texture by simply specifying some parameters or an artist can use a program with that method implemented to place some control points and control other parameters.

Again, all these images can be computed with CUDA because each pixel is unique.