What would Kandinsky’s Several Circles look like with Processing? That was the question I explored in this recitation (and hours after it) when recreating his Several Circles through coding in Processing. Firstly, I chose Several Circles because I enjoy Kandinsky’s avant garde artistic compositions where this piece was one of my favorite pieces due to the minimalistic yet aesthetic design. I think that this piece is beautiful due to how Kandinsky overlapped shapes and placed it in different positions, hence I wanted to replicate this piece using processing to understand the complexity of such a design.
When using Processing, I was aware that it was based on the x-y coordinate system therefore to replicate Kandinsky’s piece to a higher degree, I used Rhinoceros to measure the exact distance of the origin and the diameter of the ellipse. This helped me when I wrote the integers for the ellipse functions that stated the origin of each ellipse and the width and height where a photo will be placed below to show the process.
After measuring the distinct coordinates of the ellipses, I would use Photoshop to extract the color to correctly represent Kandinsky’s color usage. As the human eye cannot detect color as clearly as a computer, this would create more accuracy in the representation. In addition, there are also more limits to a male’s eyes genetically where less values can be seen as compared to females hence this would be more reason to use Photoshop rather than natural instinct.
While I tried to make the most accurate representation I could of Several Circles through Processing, there were still many limitations that I experienced which may be due to lack of knowledge of functions. For example, the original painting has many dry textures that represent an evaporated state as well as random gradations of white representing fog like textures around the navy blue large ellipse in the center. When using processing, I found that it was extremely difficult to manipulate this texture if it was not geometric based on the functions that I used. I could make the composition similar in position of ellipses and color, but I couldn’t manipulate the human texture. Below is a photo of the comparing the two works while writing the code.
I think that Processing is not good for realizing the preciseness of Kandinsky’s design in an efficient manner as it could be done in Rhinoceros and Adobe Illustrator in 20 minutes as compared to the ten hours of programming I spent with Rhinoceros, Photoshop, and Processing. I think that Processing provides flexibility with creating change in a fast manner for animations while if I were to use Illustrator I would have to create frames by myself. For this particular design, as it is static, Processing is bad for realizing this but it my drawing became a continuous animation, Processing would be a wonderful resource to use.
Below is the snapshot of my drawing.
Works Cited
“Several Circles by Vasily Kandinsky.” The Guggenheim Museums and Foundation, www.guggenheim.org/artwork/1992.
Here is my code
size (600, 600); background(25, 26, 21); pixelDensity (2); noStroke(); fill (lerpColor (#a4b0ac, #cabfb9, 0.01), 225); ellipse (260, 230, 290, 290); //White ellipse fill (lerpColor(120, 150, 10), 20); ellipse (113, 409, 55, 55); //background gradiation fill(lerpColor(120, 150, 10), 20); ellipse (172, 385, 55, 55); //orange maroon ellipse fill (lerpColor(120, 150, 10), 20); ellipse (138, 415, 55, 55); //red ellipse fill (lerpColor(120, 150, 10), 20); ellipse (160, 415, 55, 55); //brown ellipse fill (#111e53, 255); ellipse (260, 230, 280, 280); //Navy blue ellipse fill (25, 26, 21); stroke (255); strokeWeight(0.3); ellipseMode(CORNERS); ellipse (135, 105, 310, 280); //Black ellipse fill(#855c7a, 125); noStroke (); ellipseMode(CENTER); ellipse (310, 120, 70, 70); fill(#855c7a, 255); arc (310, 120, 70, 70, HALF_PI+2.5, TWO_PI, CHORD); //Purple ellipse fill (#bb9c4a); stroke (lerpColor(#ceb67a, #bb9c4a, 0.8)); strokeWeight (3); ellipse (450, 100, 40, 40); //yellow ellipse noStroke (); fill (#648067, 190); ellipse (310, 240, 60, 60); //green ellipse fill (#527d9f, 150); ellipse (270, 260, 20, 20); //blue ellipse fill (#6d5a18, 150); ellipse (290, 300, 50, 50); //yellow-brown ellipse fill (#bb9c4a); stroke (lerpColor(#ceb67a, #bb9c4a, 0.8)); strokeWeight (2); ellipse (60, 60, 20, 20); //yellow ellipse noStroke (); fill (#b76c71); ellipse (75, 130, 50, 50); //pink ellipse fill (255, 25); ellipse (75, 130, 40, 40); //pink ellipse highlight fill (#b76c71, 200); ellipse (75, 130, 30, 30); //pink ellipse normal fill (#2f597f); ellipse (345, 384, 70, 70); //navy blue ellipse fill (#9b6b05, 125); ellipse (345, 304, 100, 100); //orange-brown ellipse stroke (#284d60, 100); strokeWeight(2); fill (#203e3c, 225); ellipse (435, 190, 90, 90); //emerald green ellipse fill (#375064); arc (435, 190, 90, 90, PI-QUARTER_PI+0.10, PI+0.25, CHORD); noStroke (); fill (#284d60, 225); ellipse (435, 190, 30, 30); //navy blue small ellipse fill (0); stroke (255); strokeWeight(0.15); ellipse (435, 190, 20, 20); // black ellipse small stroke (255); strokeWeight (0.5); fill(#c37206); ellipse (500, 135, 20, 20); //orange small ellipse noStroke (); fill (#9e2f24); ellipse (530, 80, 20, 20); //red small ellipse fill (#b8524d, 255); ellipse (375, 332, 30, 30); //red ellipse fill (#d3a3b9, 255); arc (375, 332, 30, 30, HALF_PI+0.2, TWO_PI-0.2, CHORD); //pink arc fill (#2d1c14); ellipse (362, 340, 8, 8); //black ellipse fill (#4f6676); ellipse (255, 375, 55, 55); //gray blue ellipse fill (#736a7f); arc (255, 375, 55, 55, -0.2, PI+0.3, CHORD); //lavender arc fill (0); ellipse (240, 405, 8, 8); //black small ellipse by lavender arc fill (#9b6b7b); ellipse (207, 353, 8, 8); //small lavender ellipse fill (#82382b); stroke (0); strokeWeight (1.5); ellipse(180, 356, 10, 10); //small maroon ellipse stroke (0); strokeWeight(0.5); fill (#9c7822); ellipse (150, 360, 45, 45); //yellow ellipse fill(#8b4a20, 200); ellipse (172, 385, 45, 45); //orange maroon ellipse fill (#862014); ellipse (138, 415, 45, 45); //red ellipse noStroke(); fill (#633f1f, 150); ellipse (160, 415, 45, 45); //brown ellipse fill (#d2b239, 200); ellipse (113, 409, 45, 45); //yellow ellipse noStroke (); fill (#ccae1a); ellipse (139, 301, 13, 13); //yellow background ellipse fill (#1b152d); ellipse (139, 301, 9, 9); //black ellipse fill (#958494, 150); stroke(#7fa8be); strokeWeight(2); ellipse (80, 350, 62, 62); //lavender ellipse fill (#76707c, 150); stroke (0); strokeWeight(3); ellipse (80, 350, 60, 60); //gray ellipse half-transparent noStroke (); fill(#9a878b, 125); ellipse (89, 338, 23, 23); //pink background for black ellipse fill(0); ellipse (89, 338, 20, 20); //black ellipse on lavender ellipse stroke(#c18c64); strokeWeight (0.5); fill (#b36f7a); ellipse(86, 475, 15, 15); //pink small ellipse with yellowish surrounding stroke (#285e82); fill(#20537e, 150); ellipse (118, 500, 30, 30); //blue small ellipse with skyblue surrounding fill (0); stroke (#696b20); strokeWeight (1.3); ellipse (78, 518, 13, 13); //black ellipse with khaki surrounding fill (#ad720a); strokeWeight(0.5); stroke (#a5903d); ellipse(290, 465, 25, 25); //yellow-orange ellipse lower mid noStroke(); fill (#8f8494, 200); ellipse (500, 430, 120, 120); //lavender ellipse lower right fill(#826a46); ellipse (433, 403, 30, 30); //tan ellipse lower right fill(#375560); arc (433, 403, 30, 30, 0-0.2, 1, CHORD); //navy blue arc lower right noStroke (); fill(#a78f6b, 120); ellipse (465, 415, 40, 40); //yellow background for blue ellipse fill (#6087a4, 225); stroke (0); strokeWeight (0.125); ellipse (465, 415, 27, 27); //sky blue ellipse lower right fill (#a18e0b, 225); noStroke (); ellipse (470, 500, 15, 15); //yellow lowest right ellipse fill (#862820, 225); ellipse (453, 532, 22, 22); //red lower right ellipse fill (#1c415c, 200); ellipse (520, 545, 18, 18); //lowest navy blue ellipse fill (#826a24, 200); ellipse (565, 430, 15, 15); //farthest right small yellow ellipse fill (#3d301f); arc(565, 430, 15, 15, PI-QUARTER_PI, PI+QUARTER_PI, CHORD); //brown arc intersection between lavender and yellow fill (225, 100); ellipse (545, 305, 25, 25); //background of blue ellipse fill (#7e9696, 220); ellipse (545, 305, 23, 23); //background of blue ellipse fill (#172c63); ellipse (545, 305, 20, 20); //mid right blue ellipse fill (#8f221d, 200); stroke (0); strokeWeight (0.25); ellipse (504, 380, 12, 12); //red ellipse in lavender fill (0); stroke (255, 50); strokeWeight (1); ellipse (518, 381.5, 8, 8); //black ellipse by red