In this assignment we were first tasked with recreating a Proun drawing by El Lissitzsky, using the Processing software and coding language. The original drawing is shown on the left below, with my recreation created using Processing juxtaposed on the right. 

We were then tasked to ‘remix’ the image, using variables such as the user’s input with the mouse to change aspects of the drawing. I edited my script so that the drawing would draw as usual if the user did not touch the mouse, but if the mouse is pressed, the fill colour of the background and each shape would then change relative to the variables ‘mouseX’ and ‘mouseY’, which are the X and Y positions of the mouse relative to the drawing popout. Here are a selection of the colours produced as you press the mouse and move it around the screen.

Finally, here is the code I used to produce these images if you would like to edit it to remix the image yourself. To avoid clutter I am only posting the code for the active images, the section within the else loop is identical to that used to produce the simple replica image.

//////// GEOB 472 - Assignment 2
// Set up background of the sketch
void setup(){
  size(500,500);
}

//ACTIVE REMIX SECTION - when mouse is pressed the colours of the shapes 
// change relative to the mouse position, when mouse is released, 
// they are drawn back over with the original image
void draw() {
  if (mousePressed) {
    //IF MOUSE PRESSED DRAW RANDOM COLOURED DRAWING
    background((mouseY/2),(mouseX/2),(abs(mouseX-255)));
    // Draw black rectangles down both edges
    fill((mouseX/2),(mouseX/2),(abs(mouseY-255)));
    rect(0,0,70,500);
    rect(430,0,70,500);
    //dark grey quadrilateral
    fill((mouseX/2),(mouseX/2),(abs(mouseX-255)));
    noStroke();
    beginShape(); 
    vertex(200,130);
    vertex(245,75);
    vertex(420,250);
    vertex(335,250);
    endShape(CLOSE);
    stroke(0);
    // main ellipse
    fill((mouseY/2),(mouseY/2),(abs(mouseY-255)));
    ellipse(200,250,160,160);
    //center black square
    fill((mouseX/2),(mouseY/2),(abs(mouseY-255)));
    rect(250,160,15,15);
    //vertical part of black cross
    fill((mouseY/2),(mouseX/2),(abs(mouseY-255)));
    rect(230,340,5,30); 
    //top horizontal line
    line(125,175,345,175); 
    //right vertical line
    line(335,165,335,315); 
    //diagonal line
    line(125,175,300,356);
    //horizontal part of black cross
    stroke(198,190,178); 
    rect(220,356,25,5); 
    //bottom horizontal line
    stroke(0); 
    //bottom horizontal line
    line(210,356,300,356); 
    // Draw last two coloured shapes
    fill((mouseY/2),(mouseY/2),(abs(mouseX-255)));
    noStroke();
    beginShape();
    vertex(206,122);
    vertex(221,122);
    vertex(265,160);
    vertex(250,160);
    endShape(CLOSE);
    fill((mouseX/2),(mouseY/2),(abs(mouseX-255)));
    beginShape();
    vertex(206,123);
    vertex(250,160);
    vertex(250,175);
    vertex(206,135);
    endShape(CLOSE);
    
    //saveFrame();  //uncomment this line to save frames of various colours
  } else {
   // ELSE DRAW ORIGINAL COLOURED DRAWING
   background(198,190,178);
   // Draw black rectangles down both edges
   fill(0);
   rect(0,0,70,500);
   rect(430,0,70,500);
   //start the dark grey quadrilateral
   fill(113,110,106); 
   noStroke();
   beginShape(); 
   vertex(200,130);
   vertex(245,75);
   vertex(420,250);
   vertex(335,250);
   endShape(CLOSE);
   // Continue with black shapes
   fill(0);
   stroke(0);
   ellipse(200,250,160,160); //main ellipse
   rect(250,160,15,15); //center black square
   rect(230,340,5,30); //vertical part of black cross
   line(125,175,345,175); //top horizontal line
   line(335,165,335,315); //right vertical line
   line(125,175,300,356); //diagonal line
   stroke(198,190,178); //horizontal part of black cross
   rect(220,356,25,5); 
   stroke(0); //bottom horizontal line
   line(210,356,300,356); //bottom horizontal line
   // Draw last two coloured shapes
   fill(198,190,178);
   noStroke();
   beginShape();
   vertex(206,122);
   vertex(221,122);
   vertex(265,160);
   vertex(250,160);
   endShape(CLOSE);
   fill(52,50,48);
   beginShape();
   vertex(206,123);
   vertex(250,160);
   vertex(250,175);
   vertex(206,135);
   endShape(CLOSE);
  }
}

• 472