Abstract

In the broad topic of patterns there is no dearth of examples, and volumes have been dedicated to their cataloging by designer, era and style. The concept of the pattern in a general sense brings to mind repetitive designs of a more or less perceptible nature and may exist, or be implemented, in a scalable manner, e.g. the formal pattern of a piece of music [ABA] or the structural components within these sections [I-IV-V-I]. Regardless of the field of practice the pattern is certainly not limited to these easy to detect instances and variations to a pattern may solidify or diminish its patternlike qualities. Film Moiré: Previews, is early research by the authors into a variety of audio and visual methods for generating moiré and moiré-inspired patterns within a digital framework. A moiré pattern is often created from the combination of two source materials creating an interference artifact based on their spatial relationship with one another. This paper will include details on the creation of three unique moiré and moiré-inspired Previews, including an explanation of how they were constructed. The authors will also approach the pattern in its various perceptible forms as well as explore physical artifacts that emerged in a conceptual manner from the process of creating these patterns.

INTRODUCTION: The Moiré Pattern

The moiré pattern, as generally used and accepted today, originated from French textile use of mohair.[1][2] Mohair, from Angora goats, would be woven, soaked, and pressed with other textiles to create rippled patterns. The final “watered textile” was termed moiré. Spillman notes that these patterns or “bands result entirely from the varying angles at which the rays of light are reflected from the surface of the fabric.”[3] Following an extensive and fascinating history of the moiré pattern, Spillman defines the effect as follows:

The term moire pattern refers to the patterns that are produced when two (or more) geometrically periodic structures, such as parallel screens (sheer curtain fabric, wire mesh in window screens), or gratings (fences, railings), are superimposed. Alternating dark and bright moire bands are then perceived where the two overlapping patterns pass in and out of alignment,[4]

which, citing Wilding (1973) produces “optical interference.”[5]

The secondary pattern from two similar woven patterns is how moiré is frequently used today. Examples of moiré patterns can also be found in numerous fields including architecture,[6] music,[7][8] visual art,[9] weaving,[10] and even at the atomic level.[11]

While the moiré pattern is quite specific, the concept of the pattern in a general sense brings to mind repetitive designs of a more or less perceptible nature and may exist, or be implemented, in a scalable manner, e.g. the formal pattern of a piece of music [ABA] or the structural components within these sections [I-IV-V-I]. Regardless of the field of practice, the pattern is certainly not limited to these easy to detect instances, and variations to a pattern may solidify or diminish its pattern-like qualities. As Mclean notes, “For a pattern to be interesting, we need to do more than repeat it; the repetition only provides the metrical ground on which the pattern acts.”[12] Like patterns, an algorithm will likely have a repetitive quality to it. As “a procedure for solving a mathematical problem” the algorithm follows a series of operations that may be similar in their functionality.[13] McLean notes the similarities between pattern and algorithm but suggests that the combination of these concepts recasts the “pattern as a generative and perceptual connection between creation and reception. In short, (McLean) define(s) algorithmic pattern as the perception of systematic activity.”[14] Still, even though patterns do exist in many domains it may be the case that not all patterns are immediately perceptible without knowing certain “key features and difference” and requires the creator to make these perceptible.[15] But this also leads one to consider that while a perceptible pattern is likely the goal of a work based on patterning, the patterns that may emerge unknowingly, or are not repetitive, may also have some intrinsic value.[16]

The authors of this paper attempt to approach the pattern in its perceptible form and in the broad topic of patterns there is no dearth of examples.[17] Of these many approaches, the moiré pattern can be positioned in an interesting way given its unique characteristics. As touched upon earlier, a moiré pattern is often created from two source materials creating an interference artifact based on their spatial relationship with one another. Figure 1 is an example of this: the combination of two rows of vertical fencing.[18] The moiré pattern emerges because one fence is slighter further away and appears to have a smaller picket spacing. In this image one sees a less frequent overlapped density created by the two high frequency spacings of the fencing.

Moiré patterns can also be manufactured by moving simple, line-based images in and out of phase with one another as can be seen in figure 2. This effect is not dissimilar to “two-slit interference,”[19] but in this case the waves are mirrored on both sides of this theoretical plane (not to mention the phasing of actual waves is not relevant here).

In figure 2 the overlapping lines create a series of new lines extending outward from near-center due to the interference caused by the close spatial relationships between each set of circles.

Another method of moiré pattern generation is by resampling source material. In figure 3 below, the brick wall pattern creates a secondary radial pattern when the image dimensions are reduced with an algorithm that under-samples the original image.[20] This effect is called aliasing when the sampling is less than what’s required.[21]

This effect can also be created when our high frequency visual algorithm pattern is resampled by a lower dimension, discrete pixel viewport of the computer display.

In figure 4 a vertical bar pattern is set to a repeat at 10,000 cycles, whereas the image is just above 1600 pixels wide. The resulting moiré (aliasing) that occurs is represented by the extra thick black and white lines.

Film Moiré: Previews

The concept for Film Moiré: Previews emerged from the author’s recent work Way of Schesa, a slowly evolving, live-coded audiovisual work associated with the nascent Algochill scene.[22] The term Algochill doesn’t appear to be widely used although a couple events have occurred.[23][24] In Way of Schesa (2023), millions of particles are live-coded as a visual representation of interstellar space travel (see figure 5).[25] The audio component, created with TidalCycles, is built around the process of rhythmic phasing, à la Steve Reich, with a focus on static harmonic structures that are slowly detuned over the course of a performance.[26] As with the work of Reich and other slowly evolving visual works like Andy Warhol and John Palmer’s Empire (1965),[27] changes in Way of Schesa are gradual, introducing new patterns on a momentary basis as the underlying algorithms continually modify the audiovisual output.

Film Moiré: Previews considers the conciseness of data to audiovisual representation found in works like Ryoji Ikeda’s Test Pattern (2008)[28] as inspiration and draws on another earlier work by the authors: | | | | | | | (2016).[29] Similarly slow in its unfolding, | | | | | | | explores the possibilities for pattern creation through the layering, transformation and interference of simple images, see figure 6.

Preview 01

In order to generate the moiré pattern for Film Moiré: Previews, Lawson created an interference method similar to the fences concept noted above.[30] Below is the GLSL code sample demonstrating this approach with one set of vertical bars with frequency of ten and another set of vertical bars with a frequency of eleven.

void main () {
  vec3 c = white;
  c -= vec3( step( .5, fract( uv().x * 10.0 )));
  c -= vec3( step( .5, fract( uv().x * 11.0 )));
  gl_FragColor = vec4( c, 1.0 );
}

In figure 7, the moiré pattern is represented by the four clustered and dense areas that emerges from the two bar patterns.

Preview 02

Preview 02 uses the same circular approach of Colby Vaughn’s moiré to create the nodal and antinodal lines, positive and negative interference.[31] This preview creates significantly more pronounced moiré lines using three sets of animated concentric circle generators in the GLSL code.

void main () {
  float a = sin(time) * 0.05;
  float b = 20.0;
  float f = step(0.5, 
            fract(distance( vec2(a,-a), uv()) * b + time * .1));
  f += step(0.5, 
            fract(distance( vec2(-a,-a), uv()) * b + time * .1));
  f += step(0.5, 
            fract(distance( vec2(0.0,a), uv()) * b + time * .1));
  gl_FragColor = vec4(f * white, 1.0);
}

This code animates the circles’ foci towards and away from the center of the image space, facilitating a broader range of possible moiré visuals, see figure 8.

Preview 03

With the final Preview, the visual coordinate space is reconfigured from cartesian (x and y) into polar (distance and angle). With polar coordinates, it’s easier to create lines from the image’s center to its edges with a repetition in degrees or radians. In this code example three sets of radiating lines are drawn. Each set is slightly offset from the image center and animated around the center. This offset causes the moiré patterns to emerge as circular arcs and circle shapes.

void main () {
  float theta = atan(uv().x, uv().y) / PI2 + .5;
  float theta2 = atan(uv().x + sin(time) * .01, 
                      uv().y + cos(time) * .01) 
                 / PI2 + .5;
  float theta3 = atan(uv().x + sin(time + PI/2.0) * .05, 
                      uv().y + cos(time + PI/2.0) * .05) 
                 / PI2 + .5;
  float b = 150.0;
  float f = step(0.5, fract(theta * b  + time * .1));
  f += step(0.5, fract(theta2 * b  + time * .5));
  f += step(0.5, fract(theta3 * b  + time * .5));
  gl_FragColor = vec4(f * white, 1.0);
}

See figure 9, below, for the demonstration of the above code block.

Audio Methods

Although Spillman argues against the moiré pattern as an illusion, the experience of these patterns feels, well, illusory.[32] In consideration of a suitable approach to the audio there are several well-known so-called audio illusions including but not limited to the Shepard’s Tone and Risset Rhythm. Each effect is quite unique and represents a specific kind of pattern that effectively “tricks” our ears, but is also recognizable as that pattern. Forcing this particular relationship between two “named” patterns, for lack of a better description, felt contrived albeit it an interesting concept.

Initially Smith approached the audio component in similar fashion to the rhythmic phase concept found in Way of Schesa, also a “named” illusion of sorts based on one’s context although quite different from the examples above. This produced interesting results as phasing tends to do, but the relationship with the visual component was lacking in aesthetic integration; the music did little more than serve as a soundtrack to the visuals as opposed to becoming a cohabitant in a shared aesthetic space. The next approach, detailed below, relied on a kind of phase offset in the frequency domain as opposed to rhythmic offsets in the time domain, and is created using TidalCycles.[33] The sound source is a sample-based oscillator created by looping a short sample at audio rate, a synthesis method that is by no means novel but does enable a rich harmonic foundation as well as near-endless possibilities based on the timbral qualities of the sample being used. In the following example the “Gabba” sample is looped 128 times per cycle with a tempo of cps(120/60/4).[34]

d1 $ stack [
s "gabba*128" # nudge (range 0 1 $ slow 7 sine) 
              # begin (range 0.1 0.7 $ slow 2.0 sine),
s "gabba*128" # nudge (range 0 1 $ slow 6 sine) 
              # begin (range 0.1 0.8 $ slow 2.1 sine),
s "gabba*128" # nudge (range 0 1 $ slow 5 sine) 
              # begin (range 0.1 0.9 $ slow 2.2 sine)
]

Following a slow sine wave, the sample’s position is slowly moved further into the cycle (starting later) while the duration of the sample is modified. Shortening the duration of the sample has the effect of slightly modifying the characteristics of the sample’s waveform albeit a very subtle change. Once this is layered with a similar yet distinctly-modified sample-based oscillator one hears a phase pattern emerge based on the frequency cancellation/interference between the two oscillators.

In practice, a variety of small modifications will produce a range of subtle to not-so-subtle effects. For instance, changing the sample would likely have a not-so-subtle effect while modifying the sample multiplier, nudge and begin range may have more subtle effects depending on how large or small those changes are. This approach was used in Preview 01 (audiovisual sample provided above).

d1 $ stack [
slow 1 $ s "gabba*128" # cut 1 
                       # bandf (range 0 10000 (slow 5.3 sine)) 
                       # bandq 0.8,
slow 1.1 $ s "gabba*128" # cut 2 
                         # bandf (range 0 10000 (slow 5.1 sine)) 
                         # bandq 0.8,
slow 1.2 $ s "gabba*128" # cut 3 
                         # bandf (range 0 10000 (slow 5.0 sine)) 
                         # bandq 0.8
]

The above code block is another iteration that employs a slowly oscillating bandpass filter to modify the frequency content of each oscillator at different rates. This effect is similar to the previous one in that the frequency domain, not time domain, is the focus. With two or more oscillators being affected by bandpass ranges at different rates a series of patterns emerges not unlike falling and rising waves. This approach was used in Preview 02 (audiovisual sample provided below).

The creation of patterns in the physical domain through code-based means were touched upon earlier in this paper and the method used to build the audio component of Preview 03 is conceptually linked. Rather than focus on the musicality of the audio signal, a spectrograph was used to visualize what patterns might be possible using a bank of oscillators. For this experiment Smith utilized the p5.Oscillator in p5.JS for no other reason than it was readily available at the time.[35]

for( let i = 0; i < osc_num; i++ ) {
  sine_num[i] = sin( frameCount * ((i+0.1) / 5));
  osc[i].freq( map( sine_num[i], -1.0, 1.0, 2000, 3500));
  sine_num2[i] = sin( frameCount * ((i+0.1) / 5.1));
  osc2[i].freq( map( sine_num2[i], -1.0, 1.0, 2000, 500));
}

The foundation of this system includes two oscillator arrays, inspired by the creation of the moiré effect from a visual perspective. Each array contains 10 oscillators with the frequency of each oscillator mapped to a simple sine wave pattern unique to the others. The oscillators in the first array move between 2000 - 3500 Hz while in the second array from 2000 - 500 Hz. The particulars of these oscillators were then adjusted until a suitable visual pattern emerged, one inspired by the moiré pattern, and a process that led Smith into musical territory he may not have considered otherwise. Figures 10 and 11 are the results of this process and the resultant audio was used in Preview 03, audiovisual sample provided below.

These patterns can also be rendered in physical form, in this case using a pen plotter, which retains the repetitive qualities of the spectrogram to some extent while introducing significant visual noise as an artifact of the process (see figure 12).

Lastly, in contemplating the concept of the pattern in the context of this paper it seemed an egregious error to not revisit the computer code, duplicated below, as the source of said pattern, and to consider the pattern within it.

void main () {
  float theta = atan(uv().x, uv().y) / PI2 + .5;
  float theta2 = atan(uv().x + sin(time) * .01, 
                      uv().y + cos(time) * .01) 
                 / PI2 + .5;
  float theta3 = atan(uv().x + sin(time + PI/2.0) * .05, 
                      uv().y + cos(time + PI/2.0) * .05) 
                 / PI2 + .5;
  float b = 150.0;
  float f = step(0.5, fract(theta * b  + time * .1));
  f += step(0.5, fract(theta2 * b  + time * .5));
  f += step(0.5, fract(theta3 * b  + time * .5));
  gl_FragColor = vec4(f * white, 1.0);
}

In each GLSL code block, including the example above, there are necessary repetitions. Specifically, each pattern generator is represented by a line of code, and as each form of moiré requires a certain number of patterns to be generated, this is reflected in the code. This code block, like the notational aspect of the previous figure, represents the instructions by which a moiré pattern can be created upon its execution, and the repetitive pattern it contains is clearly evident. As can be seen in figure 13, and purely for the sake of artistic rigor, the code as an image is, not surprisingly, patternable and susceptible to a similar type of interference.

Conclusion and Future Work

As an open-ended project, Film Moiré: Previews provides a platform for the authors to explore different approaches to the moiré pattern as well as experimentations in extending upon it or allowing it to evolve into new works. This may also include a more direct integration between the audio and the visuals in which certain aspects of the audio signal have some clear impact on the appearance of the visuals. For instance, the direct insertion of moiré patterns into the audio signal a la Aphex Twin or Plaid,[36][37] i.e. steganography[38].