The fully animated and high-resolution version of this project can be found here!  Note: You need a WebGL enabled browser to view (the latest version of Safari, Internet Explorer, Chrome, and Firefox all qualify).

Here is a picture of the final result:

Artist

Bridget Riley is an English painter who is most known for her contributions to Op Art. Op Art (short for optical art) is an abstract style that leverages optical illusions. Especially early in her career (which began in the early 1960s) Riley experimented with radical black and white geometric forms. These forms were said to induce strange feelings such as motion sickness and dizziness in some cases. Notable examples of this period include Fall (the subject of this project), Movement in Squares, Cataract 3, and Blaze. In the 1980s Riley’s style radically changed after a transformative trip to Egypt. Shortly thereafter she began to incorporate color into her work, using her so-called “Egyptian Palette” representative of Egyptian culture and landscapes. Notable examples of this period include Nataraja and Fête.

Work

You can find the original piece here.

I selected Riley’s piece Fall for practical and creative reasons. From a technical perspective, I wanted to use Shadertoy to create the project in order to learn the tool and to test its limits. The complex repeating patterns of Fall, while difficult for a human to trace well, are a perfect candidate for the realm of procedural computer graphics. I was also interested in the piece creatively, as I find the optical effects and resonances of Fall very intriguing - I hoped that replicating this piece might lend some insight into the technique behind these effects. The piece itself is composed of a number of parallel vertical waves. Each wave alternates in color (from black to white to black and so on). Each wave is fairly thin (there are over 100 waves in total across the page), and I believe this tightly-packed pattern contributes greatly to the piece’s optical effect because it is difficult to track any individual wave with the eye. As mentioned, the piece is exclusively in black and white; this harsh contrast likely also contributes to the effect.

Approach

I chose to recreate this piece in Shadertoy, an website where programmers can share programs known as Shaders. Shaders are programs that are run on the graphics card on your computer and are used to compose complex graphical effects. In essence, the shader program is run thousands of times, once for each pixel in an image. Shaders are interesting because unlike tools such as photoshop where you edit images on the macro scale, shaders are primarily concerned at the pixel or even sub-pixel level. A shader designer must see the forest through the trees, while at the same time paying attention to the behavior of each pixel. With this in mind it isn’t surprising that even small changes to a shader program will drastically change the final image. Additionally, because it is a computer program, shaders excel at simulating complex patterns, fractals, and other forms that humans can’t quite replicate perfectly. This is particularly applicable to Fall, as I show in the “Product” section below. Finally, shadertoy allows me to easily animate the shader by providing a “time” variable, which is used to great effect in the final piece.

Product

The program itself is surprisingly simple, coming out at only about 50 lines of code. The shader is composed of a number of simple elements. First, I added a simple letterbox effect (lines 26-32 in the shader code) to maintain the aspect ratio of the original piece regardless of the user’s aspect ratio. Next, I designed perhaps the most important component of the piece: the wave function that defines the shape of the parallel curves. This function is a rather complex sinusoidal that was put together after a few minutes of tweaking different exponents and products. I also integrated time into this equation so that when the user presses “play” in the shadertoy viewer the graphic will “flow” downward. I include a visual of the raw sinusoidal below.

Once the sinusoidal was close to the original piece I repeated it horizontally and alternated the color using a simple modulo operation (see line 15 in the shader code). At this point the shader looked quite like the original piece, but there were still some issues. Of note, there was very noticeable aliasing (“jagged edges”) along the curves that distracted from the piece itself. To fix this, I employed a technique called Super Sample Anti Aliasing (SSAA) to make these edges smoother (see lines 45-50 in the shader code).

Left: No Anti-aliasing (jagged edge), Right: With Anti-aliasing (smooth edge)

Reflection

In the 1960’s it was impossible for Bridget Riley to achieve a “perfect” wave pattern in her creation of Fall. However, today with computers it is rather trivial to achieve this as this project shows. The biggest difference between my recreation and the original has to do with these human imperfections: small quivers in the curves of the original piece, slight differences in the distance between adjacent curves, etc. These imperfections of course do not exist in my version. This begs the question: are these imperfections an essential part of the original work, or could they be written off as an erroneous consequence of inadequate technology? I am inclined to disagree with this sentiment; my version appears to be rather lifeless compared to Riley’s due to the perfect / computational nature of shaders. It is actually possible to simulate these human-like imperfections in a shader (using techniques such as Perlin Noise or LUT Noise) but those methods are beyond the scope of this project. My version was able to improve on Riley’s (in my opinion) in one aspect however: it is animated. I believe that the animation contributes greatly to the optical effect of the piece. Technology and automation in general makes certain things much easier, such as generating perfect patterns and permutations and adding animation. However, certain other things become much harder, such as adding imperfections or a “human touch”. More than anything, I feel that this project accentuates these differences between the digital and analog paradigms.  

References

http://www.tate.org.uk/art/artworks/riley-blaze-p05083

http://www.tate.org.uk/art/artists/bridget-riley-1845

http://www.theartscouncil.org/artists/bridget-riley/

http://www.op-art.co.uk/op-art-gallery/bridget-riley/cataract-3

http://www.tate.org.uk/art/artworks/riley-nataraja-t06859

http://www.tate.org.uk/art/artworks/riley-fete-p78333

http://www.tate.org.uk/art/artworks/riley-fall-t00616

http://www.op-art.co.uk/op-art-gallery/bridget-riley/movement-in-squares