Reproducing Kandinsky
Made by Sienna Stritter
An attempt to recreate and capture the essence of Kandinsky's "Several Circles" by writing code.
Created: September 29th, 2015
0
Artist
Kandinsky was a Russian painter born in 1866. He began painting at age 30, and his works have been categorized into six main themes: horse and rider, apocalypse, landscape, music, geometry, and scientific imagery. Although the content of his paintings evolved over his career, all along his “journey towards abstraction” Kandinsky “sought to convey profound spirituality and the depth of human emotion” through his work. To Kandinsky, art was more about a “visual” or “pictorial” language that was “loosely related to the outside world” than about creating an accurate or realistic depiction of reality. His increasingly abstract use of forms and colors were an attempt to convey “universal human emotions and ideas.”
To Kandinsky, art was spiritual. He is considered “one of the pioneers of abstract modern art” because of his tendency to use color and form abstractly in an effort to convey strong sentiments or to engage the “sight, sound, and emotions” of his audience.
Kandinsky’s artwork is intended to convey emotions. I chose to study Several Circles because it was not immediately apparent to me how it was an emotional or spiritual piece. On the other hand, strong emotions were more evident to me in some of his works like Riding Couple (which might convey a romantic love) or Moscow I (perhaps expressing nostalgia or glory).
Several Circles is, in fact, several circles. There are many circles of various sizes, colors, and opacities placed around the canvas. Some of them overlap, some of them are contained in others, and some of them don’t touch at all. The background is dark, so the colored circles really pop out at the audience. Most of the circles are sharp and defined, although the largest one appears more distant, more hazy, with a less clean-cut edge.
Response
Kandinsky explained that to him, the circle is “a link with the cosmic,” “the synthesis of the greatest oppositions,” and the form that “points most clearly to the fourth dimension." I don’t get quite all that from a couple of circles, but it definitely made me reexamine the piece.
Upon first glace, it just appeared to be colored circles on a black background. But really, the background is not just black. There are some softer gray portions – almost swirls – that make the circles seem more fluid and not just stuck to the canvas. The circles themselves are not just blobs of color, but rather have been deliberately layered so that different colors interact by mixing or superposition. Kandinsky was purposeful – for example, where circles overlap, the resulting color is not necessarily a simple blend of the two colors.
Product
I reproduced Kandinsky’s Several Circles by using an HTML Canvas and writing JavaScript code to position, draw, and fill different circles. Using JavaScript, I could specify the coordinates of the center of the circle, its radius, its fill color, and its border color and width. Here's my final product:
Because I am by no means a JavaScript expert and I was operating under a time constraint, my code is not at all elegant or clean (see end of documentation). Although I tried to plan the positions using a printed copy and ruler before I began, I spent a lot of time changing the parameters by just a few pixels in an attempt to get the placements correct. I used a color codes chart (found at http://www.rapidtables.com/web/color/RGB_Color.htm) to pick RGB values that corresponded to the colors in the painting and then adjusted the opacity of the fill. I played around with switching the order of segments of code (very easy, with copy/paste) so that my circles would be layered in different orders. This helped me match Kandinsky’s piece where different circles overlap. For example, the left image has the blue circle drawn before the orange circle. The right image is drawn in the opposite order.
Reflection
As
discussed, I learned that there was a lot more to this painting that I
originally thought. I believed it would be simple and easy to reproduce with a
tool like JavaScript that provides lots of flexibility in positioning and
color. But ultimately, I think I failed to capture the themes and style of the
work. For one, my background was just a solid black filling. Kandinsky’s
background captures fluidity and motion while mine is stagnant. I was also
unable to accurately mimic his techniques in overlap. Perhaps with more time I
would have figured out a better solution, but in my reproduction I could only
make one circle opaque and place it on top of another. But when Kandinsky
overlaps circles, sometimes he uses a new color rather than a blend or
combination of the two underlying colors. This brings a new, unexpected pop to
the piece. See below, my overlapping circles on the left and Kandinsky’s on the
right:
I was also frustrated by my inability to create the blurry, haziness of the biggest background circle. My circles just look like slabs of colors stacked on top of each other, while Kandinsky’s capture a depth and relationship of perspective I was unable to reproduce. Again, mine of the left and his on the right:
To reiterate, perhaps more time and more familiarity with JavaScript would have allowed me to create a better reproduction. But I think my experience speaks to the affordances of digital versus traditional composition. Maybe sometimes using technology can be limiting in the ways we can produce artistically. Of course, sometimes it may enhance artistic expression, but at least for me, simply writing code removed me from the true artistic experience and prevented me from capturing the emotion and feeling behind the piece.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Several Circles Reproduction </title>
</head>
<body>
<canvas id="myCanvas" width="640" height="652" style="border:1px solid #000000;">
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0,0,640,652);
context.fillStyle="black";
context.fill();
//cyan
context.beginPath();
context.arc(290, 255, 170, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(107, 227, 240)";
context.fill();
//blue
context.beginPath();
context.arc(290, 250, 160, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(20, 39, 213)";
context.fill();
//black
context.beginPath();
context.arc(255, 230, 120, 0, 2 * Math.PI, false);
context.fillStyle = 'black';
context.fill();
//upper purple
context.beginPath();
context.arc(360, 130, 60, 0, 2 * Math.PI, false);
context.globalAlpha=0.6;
context.fillStyle = "rgb(202, 96, 240)";
context.fill();
//light green
context.beginPath();
context.arc(355, 315, 25, 0, 2 * Math.PI, false);
context.globalAlpha=0.6;
context.fillStyle = "rgb(120, 249, 120)";
context.fill();
//barely visible blue
context.beginPath();
context.arc(315, 335, 10, 0, 2 * Math.PI, false);
context.globalAlpha=0.4;
context.fillStyle = "rgb(20, 39, 213)";
context.fill();
//yellow middle of main
context.beginPath();
context.arc(335, 365, 25, 0, 2 * Math.PI, false);
context.globalAlpha=0.6;
context.fillStyle = "rgb(245, 190, 41)";
context.fill();
//pink top left
context.beginPath();
context.arc(80, 120, 25, 0, 2 * Math.PI, false);
context.globalAlpha=0.8;
context.fillStyle = "rgb(255, 134, 223)";
context.fill();
//yellow top left
context.beginPath();
context.arc(65, 60, 12, 0, 2 * Math.PI, false);
context.globalAlpha=0.8;
context.fillStyle = "rgb(255, 248, 134)";
context.fill();
//forest green right
context.beginPath();
context.arc(490, 200, 60, 0, 2 * Math.PI, false);
context.globalAlpha=0.6;
context.fillStyle = "rgb(18, 127, 112)";
context.fill();
//little cyan in forest green
context.beginPath();
context.arc(490, 200, 18, 0, 2 * Math.PI, false);
context.globalAlpha=1;
context.fillStyle = "rgb(107, 227, 240)";
context.fill();
//black in forest green
context.beginPath();
context.arc(490, 200, 16, 0, 2 * Math.PI, false);
context.globalAlpha=1;
context.fillStyle = "black";
context.fill();
//yellow top right
context.beginPath();
context.arc(505, 100, 25, 0, 2 * Math.PI, false);
context.globalAlpha=0.8;
context.fillStyle = "rgb(255, 248, 134)";
context.fill();
//orange top right
context.beginPath();
context.arc(575, 140, 12, 0, 2 * Math.PI, false);
context.globalAlpha=0.8;
context.fillStyle = "rgb(245, 122, 41)";
context.fill();
//red top right
context.beginPath();
context.arc(600, 80, 9, 0, 2 * Math.PI, false);
context.globalAlpha=0.8;
context.fillStyle = "rgb(240, 69, 69)";
context.fill();
//little cyan in mid right
context.beginPath();
context.arc(575, 390, 10, 0, 2 * Math.PI, false);
context.globalAlpha=1;
context.fillStyle = "rgb(107, 227, 240)";
context.fill();
//little blue in mid right
context.beginPath();
context.arc(575, 390, 8, 0, 2 * Math.PI, false);
context.globalAlpha=1;
context.fillStyle = "rgb(20, 39, 213)";
context.fill();
//big white bottom right
context.beginPath();
context.arc(515, 490, 65, 0, 2 * Math.PI, false);
context.globalAlpha=.75;
context.fillStyle = "rgb(255, 235, 235)";
context.fill();
//baby red bottom right
context.beginPath();
context.arc(530, 445, 8, 0, 2 * Math.PI, false);
context.globalAlpha=.75;
context.fillStyle = "red";
context.fill();
//baby black bottom right
context.beginPath();
context.arc(550, 450, 4, 0, 2 * Math.PI, false);
context.globalAlpha=.75;
context.fillStyle = "black";
context.fill();
//baby yellow way right
context.beginPath();
context.arc(584, 490, 9, 0, 2 * Math.PI, false);
context.globalAlpha=.6;
context.fillStyle = "rgb(245, 190, 41)";
context.fill();
//baby yellow bottom right
context.beginPath();
context.arc(470, 570, 9, 0, 2 * Math.PI, false);
context.globalAlpha=.9;
context.fillStyle = "rgb(245, 190, 41)";
context.fill();
//baby red bottom right
context.beginPath();
context.arc(440, 600, 12, 0, 2 * Math.PI, false);
context.globalAlpha=.9;
context.fillStyle = "red";
context.fill();
//baby blue bottom right
context.beginPath();
context.arc(520, 620, 10, 0, 2 * Math.PI, false);
context.globalAlpha=.8;
context.fillStyle = "rgb(81, 140, 242)";
context.fill();
//peach ring bottom right
context.beginPath();
context.arc(480, 480, 22, 0, 2 * Math.PI, false);
context.globalAlpha=.8;
context.fillStyle = "rgb(252, 220, 147)";
context.fill();
//baby blue bottom right
context.beginPath();
context.arc(480, 480, 18, 0, 2 * Math.PI, false);
context.globalAlpha=.8;
context.fillStyle = "rgb(85, 250, 255)";
context.fill();
//peach ring bottom right
context.beginPath();
context.arc(437, 467, 19, 0, 2 * Math.PI, false);
context.globalAlpha=.6;
context.fillStyle = "rgb(252, 220, 147)";
context.fill();
//orange top right
context.beginPath();
context.arc(355, 510, 13, 0, 2 * Math.PI, false);
context.globalAlpha=0.8;
context.fillStyle = "rgb(245, 122, 41)";
context.fill();
//blue bottom left
context.beginPath();
context.arc(150, 550, 18, 0, 2 * Math.PI, false);
context.globalAlpha=.7;
context.fillStyle = "rgb(81, 140, 242";
context.fill();
//pink bottom left
context.beginPath();
context.arc(120, 520, 10, 0, 2 * Math.PI, false);
context.globalAlpha=0.8;
context.fillStyle = "rgb(255, 134, 223)";
context.fill();
//yellow ring bottom left
context.beginPath();
context.arc(100, 570, 9, 0, 2 * Math.PI, false);
context.globalAlpha=.9;
context.fillStyle = "rgb(245, 190, 41)";
context.fill();
context.beginPath();
context.arc(100, 570, 7, 0, 2 * Math.PI, false);
context.globalAlpha=.9;
context.fillStyle = "black";
context.fill();
//blue bottom of main
context.beginPath();
context.arc(375, 425, 40, 0, 2 * Math.PI, false);
context.globalAlpha=0.9;
context.fillStyle = "rgb(104, 196, 249)";
context.fill();
//orange
context.beginPath();
context.arc(385, 355, 40, 0, 2 * Math.PI, false);
context.globalAlpha=0.6;
context.fillStyle = "rgb(245, 122, 41)";
context.fill();
//pink
context.beginPath();
context.arc(415, 380, 16, 0, 2 * Math.PI, false);
context.globalAlpha=0.6;
context.fillStyle = "rgb(255, 10, 240)";
context.fill();
//baby black by pink
context.beginPath();
context.arc(400, 385, 4, 0, 2 * Math.PI, false);
context.globalAlpha=.75;
context.fillStyle = "black";
context.fill();
//5 in a row
context.beginPath();
context.arc(154, 457, 25, 0, 2 * Math.PI, false);
context.globalAlpha=0.9;
context.fillStyle = "red";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = '#003300';
context.stroke();
context.beginPath();
context.arc(130, 450, 25, 0, 2 * Math.PI, false);
context.globalAlpha=0.9;
context.fillStyle = "rgb(255, 248, 134)";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = '#003300';
context.stroke();
context.beginPath();
context.arc(184, 457, 25, 0, 2 * Math.PI, false);
context.globalAlpha=0.6;
context.fillStyle = "rgb(255, 150, 57)";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = '#003300';
context.stroke();
context.beginPath();
context.arc(198, 428, 25, 0, 2 * Math.PI, false);
context.globalAlpha=0.9;
context.fillStyle = "rgb(255, 90, 57)";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = '#003300';
context.stroke();
context.beginPath();
context.arc(170, 400, 25, 0, 2 * Math.PI, false);
context.globalAlpha=0.9;
context.fillStyle = "rgb(252, 178, 50)";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = '#003300';
context.stroke();
//middle left rings
context.beginPath();
context.arc(90, 370, 40, 0, 2 * Math.PI, false);
context.globalAlpha=0.9;
context.fillStyle = "rgb(104, 196, 249)";
context.fill();
context.beginPath();
context.arc(90, 370, 38, 0, 2 * Math.PI, false);
context.globalAlpha=0.9;
context.fillStyle = "black";
context.fill();
context.beginPath();
context.arc(90, 370, 35, 0, 2 * Math.PI, false);
context.globalAlpha=0.9;
context.fillStyle = "rgb(242,196,249)";
context.fill();
context.beginPath();
context.arc(100, 353, 11, 0, 2 * Math.PI, false);
context.globalAlpha=0.9;
context.fillStyle = "black";
context.fill();
//baby yellow ring
context.beginPath();
context.arc(130, 310, 8, 0, 2 * Math.PI, false);
context.globalAlpha=0.9;
context.fillStyle = "black";
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'rgb(252, 178, 50)';
context.stroke();
//baby pink ring
context.beginPath();
context.arc(204, 394, 5, 0, 2 * Math.PI, false);
context.globalAlpha=0.9;
context.fillStyle = "black";
context.fill();
context.lineWidth = 2;
context.globalAlpha=0.8;
context.strokeStyle = 'rgb(255, 10, 240)';
context.stroke();
//baby light pink
context.beginPath();
context.arc(234, 394, 5, 0, 2 * Math.PI, false);
context.globalAlpha=0.6;
context.fillStyle = "rgb(243,84,195)";
context.fill();
context.beginPath();
context.arc(280, 430, 30, 0, 2 * Math.PI, false);
context.globalAlpha=0.9;
context.fillStyle = "rgb(181, 107, 255)";
context.fill();
//baby black by green/purp
context.beginPath();
context.arc(257, 450, 4, 0, 2 * Math.PI, false);
context.globalAlpha=1;
context.fillStyle = "black";
context.fill();
</script>
</body>
</html>Share this Project
Found In
About
An attempt to recreate and capture the essence of Kandinsky's "Several Circles" by writing code.