Curatorial Statement

When not properly positioned, the shapes in this design appear meaningless. However, we recognize the suggested form when the shapes move into a position allowing us to see the illusory curves in their negative space. The accompanying sound plays into this theme by shifting from a static blur that our brain struggles to make sense of to a clear tone that's easily perceived. It briefly allows the viewer to make sense of the image before shifting back into incoherency. This ephemerality is intentional - offering a microcosmic example of the "right conditions" needed for something to make sense. 

Product

The visual elements of the product were synthesized through code—in particular, we used SVG vector graphics and JavaScript to produce the animations and loop the audio.

The audio track was sampled from Pac-Man's soundtrack and edited in Audacity, using Brownian noise to create the static effect.

Perceptual Illusion

Negative space is a powerful element of art. Artists emphasize the importance of positive and negative space when creating a composition, but it is only under certain conditions where negative space takes a life of its own. The idea of illusory contours brings negative space as a key design element, and through negative contours, we can produce an insightful and beautiful piece of media. In particular, recognizing negative space ties into the psychological phenomenon of not recognizing absences. People notice new patterns, but they do not notice that an observation stops occurring.

Context

The use of negative space is not obscure in art—neither is using it as an optical effect. We have seen examples in the previous assignment where negative space prominently featured to give a sense of duality to a piece.

Adding the extra dimension of motion, however, something rarely touched upon. In static art, people must manipulate an image in their minds to see the alternate perception of a work. In contrast, animation brings a layer of explicit transformation to the piece. For certain designs (such as this one), animation brings another layer of understanding that the viewer may not immediately grasp. Adding the dimension of time brings a unique element to an otherwise explored theme.

Process

We first started out with a gist of what we wanted—a shape that moved in a repeated pattern that produced something greater when they went under linear transformation. In this initial case, we had five triangles that transformed into a star. However, this sketch did not employ negative space. What was in the negative space of the transformed figure is a pentagon, which is less prominently distinguished. 

We then sought to capitalize further on an image seen during the last project - a particularly strong visual illusion. This helped shape our intent further.

Afterwards, we more fully incorporated the idea of loading screens in video games into the piece. Not only do we incorporate some iconic designs and a fitting audio component, but we also lend interactivity to the design, to demonstrate both the theme and optical illusion through another dimension otherwise less explored.

Critique

Our visual inspiration from this work came from loading icons, which are usually generated algorithmically. Hence, the visual animation is mathematically beautiful, being constructed from algorithms over imprecise human estimation. Beyond the animation, the illusion used is a particularly striking one. It's very hard to not see the triangles suggested, so our work is definitely effective at conveying the visual effect.

We struggled a bit with the sound aspect--that much is apparent. We tried using the Shepard Tone illusion and splicing in the Pac-Man soundtrack in various ways before deciding on using static as a buffer both for the visual aspect and for the audial loop. Making a seamless audio loop in JavaScript required workarounds, as normally, a looping audio track will skip.

More thought could have been put into using color, though it would have been worse to use color with indiscretion. We ended up indecisive on our choice of staying with black and white versus a more vibrant color. Both options are accessible through the project frame.

This work definitely succeeds in general form and idea behind the forms, though it is somewhat weak in fully expressing our meaning.

Reflection

Initially, we struggled to find a direction that would be able to work well with the short time constraint. After finding inspiration in loading icon GIFs, we knew that we would be letting the visuals take the lead in the project, but struggled to find a way to bring across the concept of "loading" in an audio format. Our idea then began to shift forms again, both in response to the issues finding a good audio complement as well as trying to incorporate an illusion. We were able to settle on an illusion that we felt conveyed a clear message, but still struggled a bit on how to match the illusion with the audio component. In particular, we had trouble deciding on finding color usage that would strengthen our message. Up to the deadline, there was indecision of whether the animation should be in black and white or in color, and eventually, we opted to stay with both.

Attribution

"D3.js - Data-Driven Documents." D3.js - Data-Driven Documents. Web. 26 Oct. 2015.

"Hivenfour/SeamlessLoop." GitHub. Web. 26 Oct. 2015.

"Method Draw." Method Draw. Web. 26 Oct. 2015.

Schnupp, Jan, Eli Nelken, and Andrew King. "The Continuity Illusion." Auditory Neuroscience. Web. 26 Oct. 2015.

Turnbull, Connor. "Using White Space (or Negative Space) in Your Designs - Tuts Web Design Article." Web Design Tuts. Web. 26 Oct. 2015.