Op Art

In this project, you will write code to create tools to explore an art form called Op Art.
Op Art Phase 1 Op Art Phase 2
  1. Watch this animation to get a feel for how you will use your program to generate Op Art.
    Op Art animation
  2. Play with the program linked here to get a feel for the type of tools you will be developing. Initially the click-drag-release of the mouse is used to draw rectangles. When you press the space bar, then the drawing phase ends and the mouse click becomes a paint bucket that fills bounded regions with paint. Below you can see examples of phase 1 (drawing rectangles) and phase 2 (filling regions with color) of the program.

    Op Art 1 Phase 1 Op Art 1 Phase 2

    Op Art 2 Phase 1 Op Art 2 Phase 2

The coding in this project is subtle and is all about correct sequencing that match the set of events that take place in the creation of the Op Art. You will first build all the helper blocks that will help make your coding easier.

  1. In phase 1, the drawing phase of the project, you will be drawing many rectangles from corner to diagonally opposite corner defined by the mouse click- drag-release.
    Opposite corners of a recatngle
    So first, create a reporter block that will define a corner by storing the x and y coordinates of the corner in a list.
    corner x:(x) y:(y) {report (list (x)(y)) }
  2. Create also the helper reporter blocks that allow you to retrieve the stored x and y values for a given corner.
    x of corner:(corner){ report (item(1) of (corner)) } y of corner:(corner){ report (item(2) of (corner)) }
  3. Now create a reporter block that will define a rectangle by storing its two diagonally opposite corners in a list.
    rectangle, corner1:(corner1) corner2:(corner2){report(list(corner1)(corner2)}
  4. Now create a block that will draw a rectangle given its two defining corners. The following blocks may help.
    drawRectangle corner1:(corner1) corner2:(corner2); go to x:() y:(); pen down; pen up; x of corner:(); y of corner:(); corner1, corner2
  5. Now create some variables that will help you store and keep track of important information.
    variables: drawingDone, rectangleList, corner1, corner2
    drawingDone: is a Boolean variable that takes values true/false and is used to keep track of which stage of the program (drawing or paintbucket) is on. It is initially false but when the space bar is pressed—which concludes the drawing phase—it is set to true.
    rectangleList: is a list that will store all the rectangles created so they can be redrawn after each screen refresh.
    corner1: variable to store the mouse x and mouse y values when mouse first clicked
    corner2: variable to store and update mouse x and mouse y values as the mouse is dragged until released.
  6. Try your best, but if you get stuck you can look at this page for some more information.
  7. Now you have all the helper tools you need to create the Op Art program. 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.
  8. Use your Op Art tool to generate exciting works of art and take screenshots of your creations. Share with your class and post them on your class website if you have one.
    Op Art example 1 Op Art example 2 Op Art example 3
  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 1 Vasarely 2 Riley 1 Riley 2 Riley 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 enclosed. For each pixel, the number of the enclosing rectangles will be either odd or even. Color each pixel black if the number is odd and white if even (or vice versa.) To understand why this algorithm works, use paper and pencil to apply it to simple cases with few overlapping rectangles. Write code to automate your Op Art generation.
    Overlapping rectanglesOverlapping countedOverlapping regions colored