Images sliced and organized orthogonally, then processed with 360 Cartesian transformation.

Click the image for larger version.

X and Y axis indicate crossings of two Principal Component Analysis (PCA) resulting values.

PCA were calculated over 56 visual features, ranging from colors to shapes measures, for each image in the collection.

The following image shows variations from one measure to another over the 56 features.

Click the image for larger version.

PCA helps combining multivariate data by making statisical correlations of them. In relation to image analysis, the most obvious result are image simalirities between different pictures of the collection.

Move mouse over the image to zoom interactively or click here for larger version (5000 x 4000 px).

We can imagine plotting the values extracted for each RGB layer of the image. This data is already formatted in three dimesions.

Indeed, the standard representation of the RGB color space is a 3D cube because RGB define three corners, and the remaining five corners correspond to the combination of those three colors, namely black (R=0, G =0, B=0), white (R=255, G=255, B=255), cyan((R=0, G=255, B=255)), magenta(R=255, G=0, B=255), and yellow (R=255, G=255, B=0).

Press click on animation to hold the image, release mouse click to resume animation.

Using the three.js library, that allows implementing OpenGL graphics for the web, and getting inspiration from the elegant code by Mathias Bernhard, I developed different manners to use the quantified values of images.

The following images are screen captures of the interactive version which presents three organizations:

• RGB cube color space
• HSL conic color space
• Year-Saturation-PCA
• Experimental curve combining mathematical formulae

Click the images for a larger version or Launch interactive 3D visualization

Although Rothko worked on several different styles, I created a generator inspired by his last period, going roughly around 1949 until his dead in 1970.

The organization of shapes can be categorized in 8 different compositions, ranging in complexity from 1 to more than 5 identifiable shapes. To create the generator, first each image was processed to reveal its prominent shapes.

It is interesting to note that each sub-style comprises it own color palette. I extracted the main palette for each image.

Click the image for the complete version.

The generator is based on a description of shape relationships: inclusion, proximity/repulsion, framing, width-height, blurness, area occupied. Together with colors, each generation randomizes such values expressd in web language: CSS and JS.

Click the images to generate similar images.