✧ CONTENTS ✧
✧ INTRO ✧
“Chromatlas” is a generative art project that explores the aesthetics of scientific illustrations from the 18th and 19th centuries, commonly applied symbols, forms, and objects used in data visualization, as well as algorithms essential to generative art and creative coding.
Although color research is a vast field with a rich storied history, I’m particularly fond of pioneering endeavors in collecting, sorting and naming. Most of those activities are part of the “art and science“ practices from the 18th and 19th centuries. With focus on observation & interpretation, they unravel complexity through visualizing abstract ideas. The most relevant reference for Chromatlas comes from Nature’s Palette: A Color Reference System from the Natural World where Patrik Baty writes “In 1774, in order to help identify and describe minerals, German geologist Abraham Gottlob Werner devised a classification system based on the external properties of minerals. He considered colour to be one of the key characteristics for mineral identification and devised a nomenclature of 54 colours for that purpose, assembling a collection of minerals as physical examples of each.”
Other sources of inspiration for Chromatlas, aside from Werner’s color charts, are varied and diverse - from vintage scientific illustrations to geometric and trigonometric visualizations; from graphs and pie charts to alternative layouts for the periodic tables to psychological research diagrams and elaborate illustrations of natural and sometimes unnatural phenomena.
The other important theme and the one I often return to, at the core of Chromatlas is– human psychology. It stems from my fascination and an insatiable curiosity for topics like apophenia – the tendency to perceive a connection or meaningful pattern between unrelated or random things or illusions – special perceptual experiences in which information arising from “real” stimuli leads to an incorrect perception and the illusion of depth of knowledge – our belief that we understand more about the world than we actually do.
When logical connections are made between reality and generated/created images, are they provoking at least mild skepticism and are they raising questions about our accepted conceptions of reality, truth, and meaning? The level of detail and density of the design based on real data can influence viewers, as Edward Tufte explains: “High-density designs also allow viewers to select, to narrate, to recast and personalize data for their own uses. Thus control of information is given over to viewers, not to editors, designers, or decorators. Data-thin, forgetful displays move viewers toward ignorance and passivity, and at the same time diminish the credibility of the source. Thin data rightly prompts suspicions.“ Or simply put, to make your lie believable just add more details, as I remembered from a movie or TV show.
One question that I was frequently asked as this project progressed was “But what are we looking at? What data are you using for visualizations?”
Although Chromatlas charts do not represent some collected data and are imaginary or/and a lie, they are at their core based on visualizing programmed randomness (a sequence of pseudo-random numbers that, for the most part, suit our demand for various simulations) and explicit mathematical formulas. 0.
The whole series consists of 10 NFT projects, labeled vol. 1 – 10 and minted from January until July 2022 on fx(hash) in editions ranging from 156 to 320. A special segment of the project, consisting of the book (79x50cm) and three posters (70x80cm) was part of the Biennale of Art in Pancevo in June 2020.
✧ COLORS ✧
Let me start this chapter about Chromatlas colors with common influencers opening: A lot of you have asked me... can you share your color palettes? Say no more!!!
Unexpected or not, there are only 8 colors in the palette + background. Variety is achieved with varying opacity (30-80%), color scales and multiply blending mode.
Most often 4 of the available 8 colors are picked at random, one for each corner and scales in two directions were created. From that array of colors each object gets its color.
All 8 colors are displayed at the bottom row stars in Vol. 8 and 4 chosen are marked with vertical lines in the graph. In Vol. 4, the chosen colors and positions are shown in the bottom left corner.
This algorithm is so awesome that I also used it for Balancium and Herbarium series.
The sketch from which it all started was a simple preparation for the lecture on colors and gradients in Processing. I picked two colors and then with lerp() function found in-between values. It looked interesting enough for me to continue experimenting after the lecture.
✧ QUOTES ✧
The Chromatlas descriptions are various quotes on representation or/and reality.
- Reality is almost always wrong. – As I was watching House M.D. reruns, I heard this line in the S1.Ep3.
- "spontaneous perception of connections and meaningfulness of unrelated phenomena" – definition of the term "apophenia"
- "Where the real world changes into simple images, the simple images become real beings and effective motivations of hypnotic behavior." - Guy Debord. The society of the Spectacle.
- "in principle any representation can be presented according to the on/off binary logic of computing" - Friedrich Kittler
- ... If the numbers are boring, then you’ve got the wrong numbers. – taken out of context, but sounded appropriate from Edward Tufte
- "...so I asked myself why it was that we often find images from science beautiful. "– Herbert W. Franke from the Right Click Save interview
- "...pie charts are bad and the only thing worse than one pie chart is lots of them" – by Martin Ternouth, quoted from a post on Edward Tufte’s forum
- "Most likely anything that you think of that is possible isn’t true… In fact that’s a general principle in physics theories: no matter what a guy thinks of, it’s almost always false." - Richard Feynman, I quoted just the first sentence
- "As for a picture, if it isn't worth a thousand words, the hell with it." — Ad Reinhardt
- "Most of our life experiences, with a few exceptions, do not consist of narratives that are irresistible and captivating at every turn, like in a movie." – I really wrote this in my PhD theses, and when I came across it a year later, I thought it was hilarious yet very accurate.
✧ SHAPES ✧
Vol. 1 shapes
Sometimes simple primitives (squares, arcs or circles) aren’t enough, so we need tools for drawing complex shapes. In Processing/p5js shapes are defined with vertices (points) connected with lines or curves.
Simple “rotated square” or rhombus is the result of this code:
beginShape(); vertex(x1, y1); vertex(x2, y2); vertex(x3, y3); vertex(x4, y4); endShape();
With the Bezier formula, straight lines connecting vertices can become smooth curves. Simply, if we pull tangents from these points, then each segment between two vertices is defined with two more points – end of tangents. Bezier curves are fun, just watch The Beauty of Bézier Curves by Freya Holmer on YT.
Previous code becomes:
beginShape(); vertex(x1, y1); bezierVertex(cx11, cy11, cx21, cy21, x2, y2); bezierVertex(cx22, cy22, cx31, cy31, x3, y3); bezierVertex(cx32, cy32, cx41, cy21, x4, y4); bezierVertex(cx42, cy42, cx12, cy12, x1, y1) endShape();
The length of the tangents defines the shape. If the tangent is 0, we get a square, if the tangent is around 0.55 (55% of the length of the distance between points) we get a circle, and all other values produce different interesting forms.
In Vol. 1, shapes are defined by the same code, and only the length of the tangent is changing progressively. Each shape is a bit more rotated, and eventually, the sinus function determines the size of the objects.
Vol. 2 shapes
Mathematical and more specifically trigonometry functions can be used to create a number of interesting shapes. Most often cos() and sin() are used to draw/locate points on the edge of a circle. This can also be visualized with line rotating around the end point, in equal increments (e.g. PI/8)
beginShape();
for (let u=0; u<TWO_PI; u+=PI/8){
vertex( cos(u)*200, sin(u)*200);
}
endShape();
By drawing lines between these vertices, we will create polygons, but as we add more points, we get closer to a circle shape.
beginShape();
for (let u=0; u<TWO_PI; u+=PI/30){
vertex( cos(u)*200, sin(u)*200);
}
endShape();
Or we can use curveVertex, alternatively, with less points. However, when using curves, three more loops are added: one for the start/end coordinate, and two for start and end control points.
beginShape();
for (let u=0; u<TWO_PI + 3* PI/30; u+=PI/30 ){
curveVertex(cos(u)*200, sin(u)*200);
}
endShape();
Things can become more interesting after this initial setup. Instead of using simple cos(u) & sin(u) add coefficient, divider and/or add one more sin() and cos(). First, let’s multiply u with f value, and divide cos/sin with that value. Add border to see what’s happening.
let f =16; //try larger values: 22, 28
beginShape();
for (let u=0; u<TWO_PI + 3* PI/30; u+= PI/30 ){
curveVertex((cos(f*u)/f)*2000, (sin(f*u)/f)*2000);
}
endShape();
Progressively changing f value and position of the shapes produces clouds/snakes/tornadoes from the vol. 2.
In the end add one more cos and sin to this formula, and we get some nice flowers.
curveVertex((cos(f*u)/f + cos(u))*200 , (sin(f*u)/f + sin(u))*200);
✧ free PDFs for print ✧
In May I've published PDFs, chosen outputs from Chromatlas Vol. 1 - 5. and prepared them for print. The size of the artboard is 40x40 cm, but it can be resized to whatever you need. If you can print on tinted paper, remove the background layer from the PDF (they are editable). My prefered paper is Woodstock Betulla by Fedrigoni. On this link you can preview them and download ones you like the most and want to print.
