T R A N S I E N C E

By: Sajidah Akther and Polina Olemskaia

Introduction 

Transience is a series of eight generative animations created using p5.js. We have used an enveloper follower to make our animations sound-reactive, and we have worked with image processing and computer vision in some of our animations in order to create user interaction. The result of each drawing differs from one another but they have been made through our experimentation with Perlin noise, PI and arithmetic operations. Transience was inspired by the idea of momentary motions and constant change. A transient is also a high amplitude, short-duration sound at the beginning of a waveform that occurs in musical sounds. This is reflected in our animations, through their transitional design, as well as the way in which they are constantly evolving their form and structure with motion detection and increased amplitude. We wanted to create an experience for our viewers, by having our drawings controlled in a noticeable way both visually and through audio input. View our project.

Research

I explored work by Diana Lange and was inspired by her drawings that she created using processing and photoshop. Lange’s work is made up of many lines that form a complex structure, it’s the style and detail of her work that I found intriguing, so I was inspired to recreate this as an animation. My aim was to capture our viewers attention with a successive, transitioning drawing and it’s unpredictable outcomes. I have been able to incorporate this in ‘Solar’ and ‘Timepieces’. What is interesting about the work is that these structures are transitory, and each time we are faced with something new.

I also explored the work of Memo Atken, in particular his webcam piano. It is an interactive sound and video installation, his aim was to create an instrument that sounds traditional but is performed via an unconventional, intuitive approach. My animation, ‘Neurones’ was heavily inspired by Atken’s webcam piano, I wanted to create an interactive, gestural media which allows users to gain control and to engage with the generative drawing right away.

We then looked at different resources and companies that produce interesting, innovative work. Actelion Imagery Wizard corporate imagery tool was one that caught our attention. This automatically 'generates images and translates images into graphic elements such as points, lines and curves using special algorithms'. This project is interesting not only because of the complexity of the program which produces images, but also because of the uniqueness of the work. We liked the minimalism of the outcome, the use of points, and it reminded us of atoms. After our research, we wanted to create a set of animations that could be used as visual effects for videos, music clips or adverts.

Process

‘Ultraviolet’ is a sound-reactive generative drawing which enables user modification, and it was inspired by the electromagnetic spectrum. It is made up of four set of lines, all starting at a vertical or horizontal point and moving in a diagonal direction. I have created this by experimenting with arithmetic operators. The main being, signs propagating right shift “>>”, left shift “<<”, incrementation “++” and modulus “%”. The co-ordinates of the lines are dependent on the amplitude so it draws according to the music. The stroke of the lines are what makes this animation interesting, the lines are incremented across the screen and as a result, fills the screen in a colourful way. I have made the red, green, blue values of the stroke function adjustable by including sliders, so that users can interact with the drawing and form their own, colourful drawings. I have positioned my lines in this way so that they overlap and create structure. This generates a geometric, three dimensional effect and the changing blend of colours form a different atmosphere each time.

‘Neurones’ is an interactive generative drawing, constructed of shapes and lines which are controlled and formed by the use of computer vision and sound. The drawing first begins when the webcam detects movement. When the drawing has begun, and the webcam picks up movement, triangular shapes will appear on the drawing screen in areas where the motion was detected. These triangles are sound-reactive, so the size of the triangles will increase and decrease according to the amplitude. When the webcam detects movement, particles begin floating out, its force is dependent on the movement. The direction in which they float towards is dependent on where the motion is detected. Continuous movement will result in the line drawing to age and fade out. However when the user stop moving for a moment, the drawing will begin again, and the lines will get the position of the particles, and draw from there. The lines are representative of electrical signals, the connected points pulse as the amplitude increases. It moves vertically in a random set, but how far the line moves down the x axis depends on the varying amplitude, and as a result it forms a cardiac rhythm.

‘Timepieces’ is inspired by mechanical watches and its measure of time. The animation consists of a series of rotating shapes that continuously overlap each other, increase and decrease in size, and as a result forms geometric patterns. I have been able to code his by looping and rotating the rectangle and ellipse. The way in which the shapes of my animation changes sizes, positions and angles is all through my use of Perlin noise. I have multiplied noise by the frame count and two PI so that it generates random sequence of movements in the form of a circle. My aim was to display the inner workings of a mechanical watch through this transitional design. A mechanical watch is driven by a mainspring which has to be wound periodically, and when this is done, the structure changes, the same way the drawing develops each frame.

‘Solar’ was created by looping a triangle and rotating it in a circle using Perlin noise, overall giving off the impression of a sphere expanding. A set of triangles rotate out, and move in a wave-like motion which represents the electromagnetic radiation that’s given off by the sun and spread widely through space. By layering my series of shapes within the centre and creating an overflowing effect, I wanted to reflect the nuclear fusion within the sun’s core. The shapes expand and overlap each other to form new mixture of patterns each time. The sun has been regarded by some cultures as a deity and I wanted to highlight this idea by keeping this animation quite minimal, the focal point being the core. Allowing users to stay engaged with the evolving structure and form of the drawing and its movement following the sound. I have created a three-dimensional, outer space affect by making particles travel and disperse out of the centre and as a result zooming the users attention further in towards the core.

‘Dancing Blood Cells’ contains three ellipses, which consist of points representing blood cells. These cells rotate by the orbit of the three circles and change in size each frame. I created a constructor function and passed in parameters to control the position of the ellipse and to draw as many ellipse as I want. The diameter of one of the ellipse changes by the amplitude of the music. I also used Perlin noise to add gradient, changing forms of points.

In ‘Bright Rose’ I used the same principle as in “Dancing Blood Cells” where I organised everything by a constructor function and drew ellipses by circle orbit. However, to improve this idea I wanted to create a drawing resembling a rose. Looking at a rose, reminds me of a sine wave which draws by a circle therefore I created ellipses by orbit which changes by sine. In order to make all the ellipses link together, I connected them by a line. The most interesting part of this drawing is that if you reload the sketch again, it will create different forms of roses because some parameters are random or mapped from certain intervals.

For ‘Net’, I was inspired by this formula: https://blogs.scientificamerican.com/guest-blog/making-mathematical-art/. One of the best ways to create a generative drawing is by using mathematics in your code. I implemented one of them in my code but had difficulties with drawing circles. When I coded it, they did not appear. It took a long time to understand that the digits were too small, I then multiplied everything by three hundred to solve this. The second challenge was discovering how to make full use of someone else's formula in an interesting way. I tried to make the sketch dependent on music but unfortunately, it made the overall program really slow because it was drawing fourteen thousand circles, not only that but the diameters were changing all the time. Instead of drawing, I decided that I will display images of my sketch where the index will change by the amplitude. Another difficulty I had was with mapping my amplitude, the numbers were inaccurate however I used parseInt to solve this.

In ‘Oblivion’, I played with the rotation of the triangle, specifically, tangents rotating around the circumference. The triangles rotate by a circle which move from the top left corner to the bottom left corner. It creates a three dimensional shape, this reminded me of the cylinder that is wrapped by a net.

Build and Evaluation

During our creative process, I experimented with many line and circle drawings, making them sound-reactive and seeing which worked effectively both visually and audibly. I encountered problems with sound lagging and this is because a majority of areas within my code were dependent on sound, however I was able to solve this by being more selective. I simplified my code and went for a minimalistic approach with some animations so that the code runs smoothly along with the music. 

When drafting for our creative project, we worked with video effects such as an ASCII cam. We explored thresholding and frame differencing, and faced problems with the order of copying and loading the video images. After trial and error with rearranging our code, we managed to achieve our outcome. Most of our video coding experiments were incredibly slow due to the amount loading per frame. So in order to create reliable programs we decided to take a different approach yet we still implemented some of the code and knowledge we gained from our experiments in our final animations.

When working on generative drawings, the most challenging part was creating a piece of work that’ll catch a users attention for more than 5 seconds. In order to achieve this, we made our animations dependent on music and coded our drawings in a way which insured constant change. However, Polina made a target to not use an envelope follower and to create animations that were interesting enough through her visuals, specifically in ’Bright Rose’ and ‘Oblivion’. 

Moreover, we found that in order to reach the best composition for our drawings was to experiment with all the parameters and the best way to do this is to use a constructor function and Polina has implemented this in two of her animations.

Overall, the series of animations have successfully displayed a number of coding techniques to form interesting outcomes, especially the experimentation with Perlin noise and arithmetic operations that have enabled our generative drawing to constantly evolve. Our use of the envelope follower, image processing and the DOM have successfully made our work user interactive.

References

[1] Alastair Porter, “Freesound”, freesound.org, 2015

[2] Memo Atken, “Webcam Piano 2.0”, http://www.memo.tv/webcam-piano-2/, 2010

[3] Diana Lange - https://www.flickr.com/photos/dianalange/14072660559/, 2014

[4] Daniel Shiffman, “Starfield in Processing”, https://www.youtube.com/watch?v=17WoOqgXsRM, 2016

[5] P5.js, “Generative Painting”, https://p5js.org/examples/hello-p5-drawing.html, 2015

[6] Julia Laub, Cedric Kiefer, “Onfromative", http://onformative.com/work/actelion-imagery-wizard, 2011

[7] "Minds Eye The Ocean”, http://freemusicarchive.org/genre/House/

[8] “Curious Case”, "Amsterdam", http://freemusicarchive.org/