Pattern creation

For my patterns, I was inspired by the Islamic Architecture. The simple geometry of the motif combined with the complexity of the final pattern was the reason I choose to search and experiment with these patterns. I was also interested to generate such patterns automatically, in order to have a variety in short time.

As a result, I create an application in Processing [1][2], which generates Islamic rosettes and stars. I used a set of parametric equations taken by Bastanfard & Mansourifar’s article, “A Novel Decorative Islamic Star Pattern Generation”[3]. Due to the different software, some modification was necessary to be made. The final application can generate different rosettes and stars every time I run it. The variety is achieved due to three parameters, which take random values in a certain range. Every new motif is saved as a png file for further editing. The initial idea was to generate patterns in this application, after the creation of the primitive motif, but the size of the required file was so big that made the process very slow. Furthermore, with other techniques and software I had the freedom to create more complex and interesting patterns.Another parameter that is important for the Moiré Effect, is the size of the stroke.


The three parameters and the size of the stroke that affect the generated motif


The same application creates either rosettes or stars by changing the commented lines


The parametric equations that define the points


Using the motifs from the above application, I create more complex motif in Photoshop and I experimented a lot with different compositions, mostly by changing the scale and the position. This video shows the process that I followed.

For the patterns, I tried a lot of technics in order to find the most appropriate and quick. In this video I show the best I found.


[1]         “Language Reference (API) \ Processing 2+.” [Online]. Available: [Accessed: 20-Jan-2015].

[2]         “The Nature of Code.” [Online]. Available: [Accessed: 20-Jan-2015].

[3]         a. Bastanfard and H. Mansourifar, “A Novel Decorative Islamic Star Pattern Generation Algorithm,” Comput. Sci. Its Appl. (ICCSA), 2010 Int. Conf., pp. 111–117, 2010.

Moiré Effect Audio/Visual Reactive Installation


Paradoxes and illusions can be described as statements or stimuli that contradict or produce a distortion of the sense and generate new phenomena that are not present in the initial incitement. The application of paradoxes and illusions in art is not new. Visual paradoxes have been included in works by artists as far as the XIV century, like “The Ambassadors”  (1533) by Hans Holbein the Younger. Modern implementations are evident in pieces by M.C. Escher or Jesus Soto; these works invite the spectator to engage in a mental “tease” to produce an extension of what is literally displayed.

During the Digital Media Studio Project, a substantial amount of research was made into different illusions like the Simultanious Contrast, the Moiré Effect, Alliasing and Anamorphic Drawing. However, the interesting aspects of the Moiré Effect and the potential involved as a topic of congruence of different disciplines encouraged us to work on this specifically. The effect is created when two regularly spaced sets of lines are superimposed. The result is a new set of lines (moiré pattern) on the points where the original lines cross with a small angle difference

The Moiré Effect has been applied in modern art in pieces like the Kinetic sculpture by David C. Roy [1], Op Art and Moiré by Stiliana Alexieva [2], Uncertain Museum by Olafur Eliasson [3], New Animals Drawn with Moiré Patterns by Andrea Minini [4]. For our project, we decided to apply this effect in an installation with special emphasis in the digital domain, as it was difficult to find examples created with digital tools. Furthermore, we tried to extend the implementation of these illusions and take them to a “reactive” situation where the viewer would influence the piece.


The piece intends to create a reactive installation that displays the Moiré effect in different dimensions. The aesthetic intention of the work is to produce a situation where the audience is invited to reconsider timing and be influenced by the stimuli. As in many other art forms that use perceptual processes, the piece offers deep levels of engagement but also forces the viewer to be patient and to concentrate on the subtle aspects that start appearing only after a “trance” like experience and concentration. To achieve this “trance” like state, the piece maintains a high level of simplicity. The intention of the piece was not to overload the installation with a narrative or interactive component but instead to encourage the audience to observe something for a concentrated period of time. This also relates to the simplicity of the Moiré effect itself.

The reactive components of the piece are triggered by a Kinect[5] that controls the zoom and movement of the images used for the creation of the effect allowing a deeper level of examination. Likewise, the sound design changes and reacts to different parameters controlled by the Kinect. However, the installation is not intended to allow precise control of what is happening. The audience would sense that the images and sounds change with there presence and movement but no logical interaction between viewer and system is clear.

The images used are created in a quasi – fractal procedure inspired in certain algorithmic drawings present in some Asian countries [6]. This allowed us to think in a conceptual integration of image and dimension that reflects the interdisciplinary and cultural exchange present in the team. Furthermore, it presented an opportunity to work on the different possibilities of observation of the patterns according to the amount of zoom that the images would have.

The sound design is intended to invite viewers into the room where the system is setup. Subtle sounds and musical patterns are constantly being played. However, these sounds are carefully considered for them not to cause exhaustion on the staff of the venue or museum where the piece is displayed. The installation would only enlarge the audio dimensions when the audience is completely engaged with the piece.

The technical objectives of the piece were based on the creation of custom software or the use of open-source software. This allows flexibility and the opportunity to customize the system. However, the group is aware that this methodology involves time and testing in order to produce a flawless system. Nevertheless, we were able to produce a version of the system that is solid enough to use in presentation.


The installation utilizes a room, preferably dark, were the system is setup. A Kinect is connected to a computer that runs custom software developed for the project and delivers the X, Y and Z values of the cameras with the amount of viewers in the room. Inside the program, a variety of patterns designed by the team are loaded. The program creates a constant Moiré effect by slowly rotating one image imposed on top of the other. At the same time, the data sensed by the Kinect is sent via Open Sound Control [7] to a Pure Data patch and uses the data to control different aspects of the sound design.

The piece enters a state of passiveness when no audience is sensed. The audio is reduced to a slow simple pattern with a high-pitched accompaniment. The visual aspect maintains the moiré effect but completely zoomed out. When the system detects a viewer it zooms into the pattern allowing the visualization of moiré patterns in a different dimension. The sound design triggers some changes and produces more layering of sounds and patterns that contribute to the reactiveness of the piece. The viewer influences the speed and wideness of the movement while in the sound domain it produces some timbre variations to different sounds and to the speed of the patterns that are being played. An additional layer of sound is emitted through a pair of headphones that invite the viewers to view the patterns up close in a more intimate state,  as the audio of the headphones is only for the current viewer.


The production of the piece was divided in four main areas divided as follows: software development, production and staging, image and pattern creation and audio development. These areas dealt with different aspects of the installation described as following.

Pattern Generation

In the creation of the patterns, different technics and software have been used.  A pattern consists of a symmetrically repeated shape [8], which called motif. This motif could be a simple or a compound shape. For a more complex and interesting form we experimented with the scale and the position of one or more shapes to create compound motifs. These motifs were the primitive forms and they were either vectors or bitmaps.  Our group members used different processes to create such motifs and the final patterns; Photoshop and Illustrator were the main software that have been used. The requirements for our system was to be png files, 4K resolution and circular. There are a lot of ways to create patterns in these software. In our case, we used brush tool and pattern fill, in order to accomplish the required symmetry. We also used Photoshop scripts as a faster way to produces such patterns and most importantly the ability to experiment with the different parameters.


Figure 1- Creation of patterns in Photoshop


Another way to create a pattern is algorithmically [9]. The goal of this process was to create a variety of generated primitive motif(s) and patterns. Processing was used to develop an application which generates Islamic rosettes and stars. The parametric modelling gave us the ability to produce a great variety of rosettes and stars by changing three parameters with random numbers. In order to create the pattern multiple motifs are generated in rows and column or in parametric positions. However, we chose to use Photoshop for the final patterns. In Photoshop, we can develop more complex forms of motifs and patterns by experimenting with scale and position.


Figure 2- Proccessing Application of motifs creation

click on the link to download the DMSP Islamic motif generator

During the testing of the patterns with the application we decided to experiment not only with the shapes and the movements but also with color. In the first version, the patterns were black and white with the background to be white and the patterns black. When inverting the color into negative, we realized that the effect was getting stronger. Although black and white was interesting, by adding color and especially gradient colors to the patterns, the result was even more interesting.

Visual Software

In order for the audience to perceive the Moire effect, a software application was created. This application animates choosen patterns created by the team. The application is based on Windows operating system and C# programming language. The application is able to use more than one pattern but only one pattern and its duplicate will be animated (panning, rotating, and zooming). The application also uses the Kinect device to capture the audience movement so that animated pattern can be affected by its data.

The first version of the application was created using standard image manipulation library from .NET. This library uses high level image processing to manipulate the image, however the result in rotation, translation and zoom is not smooth. After the critique and feedback before presentation week, Dr. Parker suggested us to use OpenGL[10] to manipulate the image rather than the standard library. A few days before presentation, OpenGL implementation was finished. This new implementation makes image rotation smoother and overall better than previous version.

DMSP visual software

Figure 3 – DMSP Visual Software

click on the link to download the DMSP Pattern Animator

Sound Design

The sound design/music was created with a Pure Data[11] program that implemented two audio illusions. As researched during the first stage of the project, the Moiré patterns resemble some minimalistic procedures applied in music.


Screen shot 2015-04-14 at 5.28.23 PM

Figure 4 – Pure Data Main Patch for DMSP

The base of the program was the implementation of the algorithm used by the contemporary music composer Steve Reich, in his piece “Clapping Music”. To do this, the program creates rhythms and pitches in a small sequence that will later be played by two “players” that de-phase one beat every time the pattern is completed. This algorithm was implemented six times with different velocities, timbres and spaces producing some complex layering of material that can be described the same way as when the eye discovers new figures in the moiré pattern.

Screen shot 2015-04-14 at 5.28.37 PM

Figure 5 – Clapping Music Algorithm

Other sound implementations were created to fill time and space. The Shepard tones [12] (an auditory illusion of constant falling or raising) were included in the installation and were activated each time the viewer was sensed by the kinect. Finally, the program also fired some notes with a FM synthesizer that produced a constant texture that had subtle changes according to the amount of people in the room.

Regarding space and timing, the sound design was created considering actual and practical implementations in a museum or gallery. The selection of density and volume of the patterns being produced when no viewer is sensed is spaced out and has passive state as I thought that if the installation was going to run without pause, it should not be tiring for the working personnel of the museum or gallery. Additionally, the piece had a specific audio signal being played in a pair of open-end headphones that invited the viewer to step close and listen to a different texture that was not being played in the outside audio. The other audio signals were diffused in a quadraphonic setup that panned the sound in a 360 degrees azimuth angle thanks to the implementation of the panning algorithm developed by John Chowning[13] in his piece “Turenas”.

Screen shot 2015-04-14 at 5.28.59 PM

Figure 6 – Implementation of Chownings panning algorithm

click on the link to download the DMSP PD patch


As a reactive installation, the system has to be able to capture the audience seamlessly. The application uses a Kinect device for this purpose. The Kinect will capture the audience movement when they see pattern animation in monitor. Not only visual animation of the pattern but also the audio part is manipulated by the Kinect data.

There are two types of changes that the application captures through the Kinect, the audience movement and how many people are present in the audience. For the visual presentation, the number of people in the audience will affect the image’s rotation speed and the audience movement will affecting image’s translation (panning) and zoom. The application not only uses one image to produce the pattern, as a result, when the application changes the image that currently being animated, the apllication will also notify the audio part to create a new set of material to produce the patterns. All communication of the visual and audio software was possible by implementing Open Sound Control embedded in the code.



Figure 7- The sculpture with the lights

In order to engage audiences to interact with the installation, we create a sculpture to cooperate with the digital animation software.

The sculpture includes 4 planes which are placed in specific angles. Each plane represents a piece of openwork pattern. The pattern is centre symmetrical and hand-carved. Therefore, when audiences walk around the sculpture, they see one plane firstly. Then, when they look another plane through the first plane ‘s hollow section, they will experience moire effect illusion. Compared with software, sculpture does not directly display moiré effect animation by superposing and moving two patterns. But guide audience to explore the principle of moiré pattern. Help them to understand what the software shows is not just an abstract animation.


Figure 8- Whatching Moire Effect


Furthermore, there are some spot lights inside the sculpture. So the shadows of the sculpture can be projected to the walls. The shadows also represents the moiré pattern. Because shadows can be larger than the original object. So the shadows of the sculpture will be full of the room’s walls embracing the screen which displays software animation. The shadows and light build an illusory environment, attract audiences to immerse in this illusion world.

The sculpture and software construct the installation together and help the installation reach an aesthetic balance of dynamic and static, light and shadow and also technological and artistic.


To help the audience get deeper comprehension of our project, we are suggested by our supervisor, Marcin Pietruszewski, to produce a brochure. This brochure is well designed by the group members, including some key elements of our project such as patterns, overlap, gradient colors, etc.

1Overall, the cover design is combined by 5 characters, which represents the 5 members in our group. Specifically, since the limitation of the length of the exhibition as well as to guarantee the quality of the presentation, we did not present all of the patterns that were already designed, so in this brochure, we tried to show some fresh patterns which have not be displayed on the screen because all the patterns consists our efforts and they are really adorable.

2The text inside the brochure gives a brief introduction and explanation of our studio presentation, which clearly expresses our motivation, the definition of our illusions, the scientific principles used in this project, the progress of the project and the instructions of interaction. Besides, we also put 4 small characters to beautify the pages, the patterns used in such characters are also from our previous design works.


The patterns were created by firstly testing different designs, as the effect was not always strong enough. This led the team to select certain patterns that produced interesting effects when the system was zoomed out to be used in that stage while leaving other patterns to be used when the system sensed a viewer and created the patterns up close. Some patterns created did not work at all and were discarded form the presentation.

The project encountered some issues when the final stage was being implemented. The image processing was demanding for the CPU and a lot of glitches were being produced, luckily the group member in charge was able to implement the algorithm in openGL making the program more CPU efficient and solving the problem.

The design team also spent some time creating a cardboard sculpture that presented some complications when trying to integrate it with the digital domain. By presentation day, we were able to apply the sculpture as a light


The piece got considerable amount of feedback and recommendations to add things or change others. However, the initial aesthetic objectives that the group intended to apply in the piece would have been altered. We decided to maintain our initial posture and continue searching of ways to improve the overall quality maintaining its simplicity. This simplicity was an important component of the overall concept of the piece, as paradoxes and illusion often emerge only when the spectators invest time on the initial stimuli.

However, the project could have been benefited if more group members would have been able to develop the visual and audio applications. Perhaps, using a more user friendly software like VVVV[14] or max/msp[15] with its jitter extension could have allowed more members to contribute. Nevertheless, the development of a custom application like the one that was created would prove to be useful as no licensing would be needed.

One aspect of the installation that was brought to our attention consisted on the staging of the piece itself. The installation was setup in the SoundLab in Allison House and even though we could not take down some of the equipment and props permanently installed in the room, it was suggested that we could have used other materials and settings to focus the attention of the viewer on the screen used and to hide the distracting elements.

Finally the installation seems to bring out suggestions to expand it into 3D. However, some tests were made in order to see if we could accomplish this. Unfortunately, the effect did not work in our initial attempts to apply it in 3D.

The installation reached a nice stage of completion and proved to be a solid and engaging project that captured viewers for more time that was initially expected. We are aware that many improvements can be done to it. However, the project’s goals were fulfilled entirely as the piece engaged viewers and seemed to help them enter a nice state of contemplation.

click on the link to download the photos documentation


[1]      David C. Roy  [Online]. Available: [Accessed: 09-Feb-2015].

[2]       Stiliana Alexieva Artist  [Online]. Available: [Accessed: 09-Feb-2015].

[3]       “The uncertain museum • Artwork • Studio Olafur Eliasson.” [Online]. Available: [Accessed: 11-Feb-2015].

[4]       “New Animals Drawn with Moiré Patterns by Andrea Minini | Colossal.” [Online]. Available: [Accessed: 09-Feb-2015].



[7]  The Kolam Tradition: A tradition of figure-drawing in southern India expresses mathematical ideas and has attracted the attention of computer science. Marcia Ascher/ American Scientist Vol. 90, No. 1 (JANUARY-FEBRUARY 2002) , pp. 56-63 Published by: Sigma Xi, The Scientific Research Society Stable URL:

[8]    V. Gulati and P. Katyal, “Parameterized Modeling of Star Patterns for Traditional Latticed Screens,” Int. J. Comput. Appl., vol. 11, no. 1, pp. 28–36, 2010.

[9]    a. Bastanfard and H. Mansourifar, “A Novel Decorative Islamic Star Pattern Generation Algorithm,” Comput. Sci. Its Appl. (ICCSA), 2010 Int. Conf., pp. 111–117, 2010.




[13] Chowning, John. “The Simulation of Moving Sound Sources”. Computer Music Journal, Vol. 1, No. 3. (Jun., 1977), pp. 48-52



Presentation Week Documentation (Photo + Video)

In our presentation, some of us was taking photo and video. Not just in our opening time but also in our preparation (one and a half hours before opening time). After quite some time, finally I have been able to finish processing both photos and videos that I took. I have got 28 photos, 2 time lapse video, and 24 videos. From all of those, I personally like these three photos.


What kind of sorcery is this


The composition just perfect


Ready to battle (with the monitor)

Leaflet Draft

The Interactive Moire Patterns


Inspired by the “Moiré effect” which was found by the French silk workers in the 1700s, this is an interactive installation, illustrating the four dimensions of the illusory space of visual illusions, audio illusions, interactive actions and the imagination of woven timescales.


It is illusion! You will doubt the world if you keep believing in your eyes. The patterns showing on the screen are combined with 2 layers, and every 2 layers are completely the same. Meanwhile, listen carefully to the music surrounding you. When will the tone rise to an end?


It is science! The “Moiré effect” is caused when two regularly spaced sets of lines are superimposed. The result is a new set of lines (moiré pattern) on the points where the original lines cross with a small angle difference. The reason why moiré pattern is caught by our eyes results from the way in which people interpret visual sense: “the perceptual magnification of small stimulus differences (L. Spillmann, 1993)”.


It is an installation! Please interact with the screen by moving physically around the central space. Simply move forward and backward between the screen and the hidden camera, see the patterns following your actions and enjoy the illusions from different depths and different angles. There is no right or wrong way to interactive with the whole space, only that you throw yourselves into it.

HU Yiang, KURNIAWAN Anselmus Krisma Adi, NIKOLAKOPOULOU Vasiliki, QIAN Xicheng, SUBIA VALDEZ Rafael, YANG Bingxi

Pure Data patch for Moiré Installation

The installation the group is working on consists on different abstract “moiré” patterns that create an interactive immersive environment. The music that will accompany this installation will also be interactive and consists of three different main materials.

  • Pattern De-synchronizing algorithmic material [Clapping Music]
  • Shepard Tones
  • FM synthesis (long notes) with spectral cross – over.
  • Tremolo effects for each band of the FM cross – over.

This is a short demonstration of the quality of the music with some examples of the visual part of the installation. The program is not yet interactive, as this needs to be worked on with the Kinect, so the video is just a demonstration of the sonorities that will be applied in the piece.

The installation the group is working on consists on different abstract “moiré” patterns that create an interactive imersive environment.