Color channel separation and uncoloring of tiles.

Also, die untere Schicht wären einfach entfärbte Ziegelsteine. Die Textur und der Farbwert sollten so sein, dass die Steine hinterher passen, der Mörtel ist wurscht.

In der zweiten Textur (als separate Datei) dann den Mörtel in seiner natürlichen Färbung und mit Transparenz (partielle oder vollständige Transparenz über Alphakanal der jeweiligen Pixel) dort, wo die Steine zu sehen sein sollen.

The lower layer consists of uncolored bricks. Texture and color should be chosen to match the bricks after recoloring, ignoring the mortar.

The second layer (stored in a separate file) contains the mortar in original color, made transparent (using the alpha channel) where the bricks are to be displayed.

Tordanik at 18.02.2013 in OSM-Forum


Let's apply this idea to the seamless tilable brick and mortar wall created by marek kleciak.

Obviously™ we need two channels. Using a vector quantization algorithm we choose two color values, which represents the image pixels as close as possible.

We get: 56 2e 2e and a3 a4 8b.

Each pixel is assigned to the channel with least color distance. For each channel we create a black and white graphic of same size as the original, which is white at the pixels assigned to the channel.

Channel 1 Channel 2
mask1.png mask2.png

Using these masks, we separate the original image into two partly transparent extracts, which if stacked (in any order) produce the original image.

Masked images
Channel 1 Channel 2
masked1.png masked2.png

The masked images are uncolored. In a real application we would brighten the uncolored images until the brightest pixel reaches the largest possible value of 255, to allow creation of bright colors if recolored again. This step is ommitted here.

Uncolored images
Channel 1 Channel 2
uncolored1.png uncolored2.png

The uncolored partly transparent images together with the channel colors are the result of this procedure.

Recombining the images

We create a stack of a solid background color at the bottom, uncolored channel 1 with opacity 50% next and uncolored channel 2 with opacity 100% on top. Unfortunately with CSS means we cannot color the channel 1 layer properly and cannot color the channel 2 layer at all.

Uncolored images combined with new color
(to the extent possible using CSS only)

Nevertheless the results are not too bad. ☺

Tiles used in Kendzi3D
colorable2.png colorable1.png