Op Art

In this project, you will write code to create tools to explore an art form called Op Art.
Animation of the user drawing a collection of overlapping rectangles and then coloring each region black and white in such a way that no two adjacent regions have the same color.

Initially, the mouse is used to draw rectangles. Then when the user presses the space bar, the drawing phase ends and the mouse click becomes a paint bucket that fills bounded regions with paint. Here are two examples of phase 1 (drawing rectangles) and phase 2 (filling regions):

Example 1: Op Art 1 Phase 1 Op Art 1 Phase 2

Example 2: Op Art 2 Phase 1 Op Art 2 Phase 2

  1. "U3-OpArt"Create a new project called U3-OpArt
  2. In the drawing phase (phase 1), you will be drawing many rectangles by clicking and dragging from corner to opposite corner so it will be helpful to have an abstract data type (ADT) to manage the corner points.
    The corner ADT will work just like the point ADT that you created in Unit 2.
    Opposite corners of a rectangle
    1. Create a constructor corner that will report a list of x and y coordinates of one corner.
      corner x:(mouse x) y:(mouse y) reporting {-239, 38}
    2. Create two selectors x of corner and y of corner that will report either the x or y values for an inputted corner.
      x of corner: (corner) reporting -239 y of corner: (corner) reporting 38
  3. Create two global variables to temporarily store the two points of the current rectangle:
    • current corner 1: to store the coordinates where the mouse is first clicked
    • current corner 2: to store the coordinates where the mouse is released
  4. Now create a rectangle ADT for storing the two opposite corners of a single rectangle.
    rectangle, corner 1: (current corner 1) corner 2: (current corner 2) reporting {{-239, 38}, {41, -7}}
    corner 1 of rectangle reporting {-239, 38} corner 2 of rectangle reporting {41, -7}

Like in the Animation Studio project on the previous page, the stage will have to be cleared and redrawn many times so that the user can see each new rectangle changing in size as it drawn. The program needs a way to store all of the rectangles that have already been drawn so that they can be redrawn along with the current rectangle after each stage clear.

  1. Create a global variable rectangle list to store the all the rectangles that have been drawn.
  2. Your program needs a way to know whether the user is finished drawing. Create a global variable drawing done? that will store a Boolean value (either true or false) to keep track of the phase of the program (drawing or paint bucket).
    3. It is initially false but when the space bar is pressed—which concludes the drawing phase—it is set to true.
  3. The program also needs a way to draw a rectangle given its two defining corners. Create a draw rectangle block, and test that it correctly draws an inputted rectangle.
    stage showing a rectangle drawn and scripting area showing the script: clear, draw rectangle corner 1: (corner, x:(-139) y:(38)) corner 2: (corner, x:(41) y:(-7))
  4. Use the seven blocks and four variables you have created to create a program that:
    • repeatedly collects rectangles until the user is finished drawing (phase 1) by:
      • collecting the coordinates of the first corner when the user starts to draw a rectangle
      • repeatedly collecting the coordinates of the second corner and redrawing that rectangle and all previous rectangles until the user stops drawing a rectangle
      • storing the final coordinates for each rectangle so they can be drawn again
    • uses a keystroke (like space) to tell the computer to switch to phase 2 (painting) and then fills the clicked areas
    I thought about keeping some version of this, but I think it is not needed given the above. --MF, 9/9/18

    It is recommended that you first write down the algorithm detailing the sequence of events in the program and what should happen at each case before you build the actual code.

 
  1. Create a version of your Op Art program that uses polygons.
    Polygonal Op Art example 1 Polygonal Op Art example 2 Polygonal Op Art example 3
  2. Create a version of your Op Art program that uses circles.
    Circle Op Art example 1 Circle Op Art example 2 Circle Op Art example 3
  3. Study the works of legendary Op Artists such as Victor Vasarely and Bridget Riley to get a feel for what is possible in this art form.
    Vasarely Op Art #1 Vasarely Op Art #2 Riley Op Art #1 Riley Op Art #2 Riley Op Art #3
  4. It is possible to fully automate the painting phase by using the following algorithm:
    • for every pixel on the screen find out inside how many rectangles it is inside
    • color each pixel black if the number is odd and white if the number is even (or vice versa)
    To understand why this algorithm works, use paper and pencil to apply it to simple cases with few overlapping rectangles.
    Overlapping rectanglesOverlapping countedOverlapping regions colored