El Lissitzky’s Kestnermappe Proun in Processing Code

Shown above is a recreation of one of El Lissitzky’s Kestnermappe Proun works I created with code in Processing. 3.0.

Below is a remix I made of the code to create a dynamic piece of work that added a little dimension and colour to the piece, using mouse positions to change the shape, colour, and location of shapes in the work.

Code of original work:

//set up size of canvas
size (480, 660);

//set background colour
background (194, 189, 172);

//first (largest) quadrilateral
noStroke();
fill (151, 149, 140);
quad(138, 152, 194, 96, 429, 328, 316, 328);

//second quadrilateral (dark one on left)
fill (71, 72, 69);
quad(148, 161, 148, 142, 213, 208, 213, 226);

//third quadrilateral (one with background colour above)
fill (194, 189, 172);
quad(148, 142, 167, 143, 233, 208, 213, 208);

//black square
fill (22, 21, 22);
rect(213, 209, 20, 19);

//horizontal black line on top
stroke(22, 21, 22);
strokeWeight(2);
line(62, 230, 323, 227);

//left vertical black line
strokeWeight(0.5);
line(315, 220, 315, 403);


//center vertical white line
line(316, 220, 316, 403);
stroke (190, 188, 186);

//right vertical black line
stroke(22, 21, 22);
line(317, 220, 317, 403);

//diagonal black line
line(62, 232, 297, 462);

//bottom black line
stroke(89, 91, 90);
strokeWeight(1.5);
line(297, 462, 170, 462);

//ellipse
noStroke();
ellipse(163, 321, 202, 202);

//vertical rectangle at bottom
fill(39, 39, 38);
rect(194, 438, 9, 44);

//horizontal rectangle at bottom
fill(21, 21, 26);
strokeWeight(0.5);
stroke(194, 189, 172);
rect(179, 463, 39, 7);

//thin line above rectangle drawn above
stroke(89, 91, 90);
line(180, 463, 217, 463);

Remix Code

void setup() {
  size (480, 660);
}

void draw() {
  if (mousePressed) {
    background (mouseX, mouseY, mouseY/2);

    //thick black line on top
    stroke(22, 21, 22);
    strokeWeight(2);
    line(62, 230, 323, 227);

    //first (largest) quadrilateral
    noStroke();
    fill (160, 80, 124);

    beginShape();
    vertex(138, 152);
    vertex(194, 96);
    vertex(429, 328);
    vertex(316, 328);
    endShape();

    //perspective quadrilateral on left

    fill (71, 72, 69);
    beginShape();
    vertex(138, 152);
    vertex(316, 328);
    vertex(316, 350+mouseY/8);
    vertex(138, 174+mouseY/8);
    endShape();

    //perspective rectangle on right
    fill (22, 21, 22);
    rect (316, 328, 113, 22+mouseY/8);

    //second quadrilateral (dark one on left)
    fill (71, 72, 69);
    quad(148, 161, 148, 142, 213, 208, 213, 226);

    //third quadrilateral (top one that expands right)
    fill (194, 189, 172);
    quad(148, 142, 167+mouseX/2, 143, 233+mouseX/2, 208, 213, 208);

    //black square that expands right
    fill (22, 21, 22);
    rect(213, 208, 20+mouseX/2, 20);

    //left vertical black line
    strokeWeight(0.5);
    line(315, 220-mouseY/2, 315, 403-mouseY/2);

    //center vertical white line
    stroke (190, 188, 186);
    line(316, 220-mouseY/2, 316, 403-mouseY/2);

    //right vertical black line
    stroke(22, 21, 22);
    line(317, 220-mouseY/2, 317, 403-mouseY/2);

    // diagonal black line
    line(62, 232, 297, 462);

    //bottom black line
    stroke(89, 91, 90);
    strokeWeight(1.5);
    line(297, 462, 170, 462);

    //moving colour-changing ellipse
    noStroke();
    fill(mouseY, mouseX, mouseX, 70);
    ellipse(mouseX, mouseY, 202, 202);

    //vertical rectangle at bottom
    fill(39, 39, 38);
    rect(194, 438, 9, 44);

    //horizontal rectangle at bottom
    fill(21, 21, 26);
    strokeWeight(0.5);
    stroke(194, 189, 172);
    rect(179, 463, 39, 7);

    //set stroke colour of thin line above rectangle drawn above
    stroke(89, 91, 90);
    line(180, 463, 217, 463);
  } else {
    background (194, 189, 172);

    //first (largest) quadrilateral
    noStroke();
    fill (151, 149, 140);
    quad(138, 152, 194, 96, 429, 328, 316, 328);

    //second quadrilateral (dark one on left)
    fill (71, 72, 69);
    quad(148, 161, 148, 142, 213, 208, 213, 226);

    //third quadrilateral (one with background colour above)
    fill (194, 189, 172);
    quad(148, 142, 167, 143, 233, 208, 213, 208);

    //black square
    fill (22, 21, 22);
    rect(213, 209, 20, 19);

    //horizontal black line on top
    stroke(22, 21, 22);
    strokeWeight(2);
    line(62, 230, 323, 227);

    //left vertical black line
    strokeWeight(0.5);
    line(315, 220, 315, 403);


    //center vertical white line
    line(316, 220, 316, 403);
    stroke (190, 188, 186);

    //right vertical black line
    stroke(22, 21, 22);
    line(317, 220, 317, 403);

    //diagonal black line
    line(62, 232, 297, 462);

    //bottom black line
    stroke(89, 91, 90);
    strokeWeight(1.5);
    line(297, 462, 170, 462);

    //ellipse
    noStroke();
    ellipse(163, 321, 202, 202);

    //vertical rectangle at bottom
    fill(39, 39, 38);
    rect(194, 438, 9, 44);

    //horizontal rectangle at bottom
    fill(21, 21, 26);
    strokeWeight(0.5);
    stroke(194, 189, 172);
    rect(179, 463, 39, 7);

    //thin line above rectangle drawn above
    stroke(89, 91, 90);
    line(180, 463, 217, 463);
  }
}