Color transformation

I am now discussing color transformations for creating kaleidoscopic images with two-color symmetry. Each pixel has three color components: red, green and blue. Their values are between 0 and 255. Thus we can think that a pixel color is a point with coordinates (r, g, b) inside a three-dimensional cube. The corners of the cube are the following: black with coordinates (0,0,0) and white (255, 255, 255), the primary colors red (255, 0, 0), green (0, 255, 0) and blue (255, 0, 0) and the secondary colors cyan (0, 255, 255), magenta (255, 0, 255) and yellow (255, 255, 0). A color transformation is a mapping of points inside this cube. Clearly, it should not map points into the outside of the cube because all possible colors are in its inside. Further, the mapping should not destroy information. This means that every point in the cube is only the image of exactly one other point and that the color transformation has an inverse.

For two-color symmetry we want that the transformation is its own inverse. Then we could not say which part of the kaleidoscopic image has the original colors and which part has the transformed colors without knowing the input image.

The most simple transformation with these properties is making the negative image:

r → 255 – r, g → 255 – g and b → 255 – b.

This inverts the color cube and maps black to white, red to cyan, blue to yellow and green to magenta. The result is often quite bewildering. Consider this photo of a bee on lavender blossoms:

Its negative image is quite strange:

This is no surprise for those who do analogue photography. The developed negative does not give a good idea of the final image both in color or black and white photography. The problem is that dark parts become light and inversely. This makes it difficult to recognize details of the input image in the kaleidoscopic image with transformed colors.

We might want to have a different transformation. The grays should not be changed; especially, black remains black and white remains white. The other corners of the color cube should map as for making the negative image. To get this, we dissect the pixel color into two parts: an achromatic grey and a fully saturated color. The grey part results from the smallest of the red, green or blue components. If

s = min(r, g, b),

then (s,s,s) are the coordinates of the grey. It has no hue, zero saturation (colorfulness) and its intensity is given by s. By the way, you can call s “value” or “brightness” or whatever, see https://en.wikipedia.org/wiki/HSL_and_HSV. Subtracting this, we get the color part with components (r-s,g-s,b-s). At least one of these components is equal to zero, which means that we have a fully saturated color. Its hue depends on the input image. The largest of the three color components:

L = max(r, g, b)

defines its intensity. It is L-s.

To transform the color we leave the gray part as it is. For the saturated color part we want the smallest component to become the largest and inversely. This is easiest done by making a negative such as r-s→(L-s)-r-s=L-r. Adding the gray part, we get a simple transformation:

r → L+s-r,

g → L+s-g and

b → L+s-b.

You can easily verify that this transforms the corners of the color cube as desired and that this transformation is its own inverse. Using it on the image of the bee we get:

In spite of the false colors we recognize the bee very well. For some images you might prefer this transformation.

Then, we can use both transformations together, one after the other. The result does not depend on the order of execution. This combination exchanges black and white, whereas the other corners of the color cube stay in place. We get something strange like this:

Posted in Kaleidoscopes, programming | Tagged , , , , | Leave a comment

Kaleidoscopes with twofold color symmetry.

A checkerboard is a square lattice with twofold color symmetry. The alternating black and white squares make it more interesting than a simple square lattice. Thus I want to have too some twofold color symmetry for our kaleidoscopes. Farris has done this too in his book “Creating Symmetry”; but I am proposing a different method.

First think about the simple square lattice. How would you tell a human or a computer to build it ? You could say: “Place squares side by side in rows and columns.” This defines the geometrical structure and does about the same as the functions X(x,y) and Y(x,y) of the kaleidoscope, which can generate rosettes, friezes or tilings of the plane. Now consider the checkerboard and how to get it. You could say: “Make a square lattice and for each square look at the sum of its row and column numbers. If the sum is an even number, then paint the square black, and else paint the square white.” Think of this sum as an extra function W(x,y) for defining the color symmetry.

Such a function W(x,y) is useful to generate kaleidoscopic images with two-color symmetry. For a pixel at the position (x,y) we look up the color of the input image at the mapped position [X(x,y),Y(x,y)]. For positive W(x,y)>>0 the pixel gets this color without change, and for negative W(x,y)<<0 we somehow transform the color. If W(x,y) is near 0 then we use an interpolated color. Clearly, symmetries of W must relate to symmetries of X and Y as in the example of the checkerboard.

For further discussion, we use the more convenient complex numbers z=x+i*y for points in the plane and a complex function Z(z)=X(x,y)+i*Y(x,y) for the mapping. A complex function S(z) is a symmetry of the function Z if Z(S(z))=Z(z) for all z. Thus the kaleidoscope will look up the same point in the input image for z and for S(z). Then, both points will have the same color in the kaleidoscopic image if use no color transformation. To get two-color symmetry we make that W(S(z))=-W(z) and use it to control a suitable transformation of color. This makes that z and S(z) in general have different colors. Then the symmetry S(z) is broken in the image but S(S(z)) is still a symmetry because W(S(S(Z)))=-W(S(z))=W(z).

For the checkerboard, the important symmetries S(z) are translations in x or y-direction: S(x,y)=(x+a,y) and S(x,y)=(x,y+a), where a is the length of the sides of the squares. As color control function we can use W(x,y)=cos(π*x/a)*cos(π*y/a), which is positive on some squares and negative on their neighboring squares. We get a checkerboard pattern if we draw white pixels for W>0 and black pixels for W<0. Note that doubled translations by 2*a in x or y-direction are symmetries of the checkerboard.

Posted in Kaleidoscopes, programming | Tagged , , , | Leave a comment

Rosettes with glide reflection and rotation symmetry

We now come to the last distinct combination of symmetries for friezes and rosettes. It uses the glide reflection and the rotation by 180 degrees resulting from two mirror symmetries of the two preceeding posts. The mapping functions have to have the symmetry relations

f(r,φ)=f(1/r,-φ)=f(1/r,φ+π/p)=f(r,-φ-π/p) for rosettes with p-fold rotational symmetry.

From f(r,φ)=f(r,-φ-π/p) we see that a mirror symmetry arises at φ=-π/(2p). This gives us

xglidereflectrotation

and

yglidereflectionrotation

I found it quite difficult to get a nice image that clearly shows these symmetries. The photo of a butterfly (a red admiral) gave

admiralglidereflectionandrotation

This image has only three-fold rotational symmetry. Look at the pale violet flowers to discover the glide reflection. The center of the rotational symmetry is at the center of the orange shapes.

Posted in Anamorphosis, Kaleidoscopes | Tagged , , | Leave a comment

rosettes with glide reflection

For a rosette of p-fold rotational symmetry you have an equivalent to the glide reflection symmetry of a fries. It is a rotation by an angle of π/p around its center together with a reflection or  rather inversion at r=1. Thus the mapping functions have the condition f(r,φ)=f(1/r,φ+π/p), which results in

xglidemirror

and

yglidemirror

where I have used that cos{lp(φ+π/p)}=cos(lpφ+lπ). Using a photo of a yellow dragonfly I get this result of six-fold rotational symmetry:

glidemirror

Note the yellow horseshoe like shapes. The glide reflection makes that there are 12 copies, six opened towards the center and six opened outwards. Together they form a prominent star.

Posted in Anamorphosis, Kaleidoscopes | Tagged , , | Leave a comment

Combinations of mirror symmetries

We now create rosettes with combinations of the two mirror symmetries. We can put them in “parallel” or in “series”.

In “parallel” means that the rosette has both symmetries at the same time and thus the mapping functions have to obey to the conditions f(r,φ)=f(1/r,φ)=f(r,-φ)=f(1/r,-φ). They are then

x2mirrors

and

y2mirrors

These mirror symmetries for themselves make a rather “static” image of four-fold symmetry. To make this effect stronger I also used a four-fold rotational symmetry with p=4 to get this:

musfly

Here I used my photo of a fly on a Muscari flower. For the X-function I put a simple cos(4φ) term and for the Y-function a cos(8φ) term.

In “series” means that we use both mirrors one after the other. This gives a rotation by 180 degrees with the center at the intersections of the two mirror axis. The image should have this symmetry which we can write as f(r,φ)=f(1/r,φ). Thus the mapping functions are

xrotation2

and

yrottaion2

Because of the dynamical nature of this added rotation symmetry I preferred a rosette with 5-fold rotational symmetry. My photo of a goldsmith beetle gave this

goldbug2

Although this is a rather abstract ornament you can see details of the green back of the beetle and the rose flower.

I am happy that I can do this work on symmetries and create images but I cannot forget that there are many children, women and men in danger. We could help them by supporting Doctors Without Borders for example. During the next days you can get a lot of games for a small donation from  https://www.humblebundle.com/freedom.

Posted in Anamorphosis, Kaleidoscopes | Tagged , , , | Leave a comment

Rosettes with another mirror symmetry

Symmetries are important for design because they determine the overall appearance of an image. Rotational symmetry without mirror symmetry makes a dynamical image, whereas  additional mirror symmetries give a more static appearance. Generally, an image becomes more abstract if we have more symmetry.

As rosettes are essentially Friezes wound around a central point we can use all the symmetries of Friezes for rosettes too, although they may be distorted. As an example, we now look at the distorted mirror symmetry at r=1. It imposes the condition f(1/r)=f(r) on the mapping functions, thus they are

xeqrmirror

and

yeqrmirror

The images are somehow bloated around r=1. This makes it difficult to create nice images. A photo of a minstrel bug gave this

minstrel

and a moth morphed into that

anothermoth

See how the outside of the rosette is wrapped and squashed to the inside. Near the symmetry “axis” r=1 we get strong deformations and abstract designs. Far away details of the input image remain.

And now for something different: Let’s fire the anti-science fools on april 1 !

Posted in Anamorphosis, Kaleidoscopes | Tagged , , , | Leave a comment

Rosettes with mirror symmetry

The program for making rosettes offers many possibilities and it is difficult to find something to aim for. As a guide we can use symmetries. Mirror symmetry at the x-axis is a simple example. It makes that the image remains unchanged if we change the sign of φ. We use the mapping function of the last post. Because the cosine function is an even function and the sine function is an odd function we simply have to put all coefficients b and d of the mapping function equal to zero. This is a result with three-fold rotational symmetry:

yellowbutterfly

Here if have used a butterfly as input image. You can recognise some details of its wings and legs as well as parts of the yellow flower it sits on. The mirror symmetry makes that the image becomes more abstract. The mapping function is

function mapping(x,y){
 imageZero(x,y);
 imageAdd(0.7,0,0,0,1,6);
 imageAdd(0,0,1,0,2,3);
 imageAdd(0.5,0,0,0,2,12);
}

Make your own creations. This is easy: Load http://bookofgames.ch/rosette.html in your browser. Then download the html and JavaScript codes using those buttons. Open the downloaded html page in your browser and edit the JavaScript file in a text editor. Save your changes and reload the html page. Send a comment if you get stuck and need help or if you want to share your results.

Posted in Anamorphosis, Kaleidoscopes | Tagged , , , , | Leave a comment