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.

0

Work

 The piece I selected to reproduce was Kandinsky’s Several Circles from 1926.   

0

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).   

0

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.

0

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. 

0

The point is that I originally wrote this piece off as simple and not meaningful. But after examining it more closely, I began to respond differently after I could appreciate Kandinsky’s deliberate choices. I started to experience it more as art than as a collection of shapes.

0

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:

0
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.
0

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:      

0

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:     

0

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. 

0
<!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>
Click to Expand
x
Share this Project


About

An attempt to recreate and capture the essence of Kandinsky's "Several Circles" by writing code.