Close
About
FAQ
Home
Collections
Login
USC Login
Register
0
Selected
Invert selection
Deselect all
Deselect all
Click here to refresh results
Click here to refresh results
USC
/
Digital Library
/
University of Southern California Dissertations and Theses
/
Code generated visualization: Coding Collage Gallery
(USC Thesis Other)
Code generated visualization: Coding Collage Gallery
PDF
Download
Share
Open document
Flip pages
Contact Us
Contact Us
Copy asset link
Request this asset
Transcript (if available)
Content
Code Generated Visualization:
Coding Collage Gallery
By
Yan Liu
A Thesis Presented to the
FACULTY OF THE USC ROSKI SCHOOL OF ART
AND DESIGN
In Partial Fulfillment of the
Requirements for the Degree
Master of Fine Arts
(Design)
May 2021
ii
Table of Contents
List of figures .................................................................................................................... iv
Abstract ............................................................................................................................. vi
Introduction ..................................................................................................................... 1
I. Historical and theoretical research .............................................................................. 2
A. Creative coding ....................................................................................................... 2
B. Internet Art .............................................................................................................. 4
C. Glitch Art ................................................................................................................ 6
D. Visual Music ........................................................................................................... 7
II. Coding Collage Gallery ............................................................................................ 10
A. Project Background and Introduction ................................................................... 10
B. Online gallery building process ............................................................................ 10
III. Collection of works series ..................................................................................... 12
A. Movie Color Journal ............................................................................................. 12
1. Introduction ....................................................................................................... 12
2. Methodology and process ................................................................................. 12
B. Glitch Art Painting ................................................................................................ 17
1. Introduction ....................................................................................................... 17
2. Methodology and process ................................................................................. 17
3. The Glitching Art Painting work ...................................................................... 21
C. Visual music video—Don’t think! Feel! ............................................................... 23
iii
1. Introduction ....................................................................................................... 23
2. Methodology and process ................................................................................. 23
Conclusion ....................................................................................................................... 27
Footnotes ........................................................................................................................... 28
Bibliography ..................................................................................................................... 30
iv
List of figures
Figure 01: File sharing web app interface design code ....................................................... 2
Figure 02: Compos Hobby Box .......................................................................................... 3
Figure 03: My Boyfriend Came Back From The War ........................................................ 3
Figure 04: Quiet, Calm, Staring. ......................................................................................... 5
Figure 05: Net Art Anthology online exhibition. ................................................................ 6
Figure 06: The Glitch Moment ........................................................................................... 7
Figure 07: Still from Radio Dynamics ................................................................................ 9
Figure 08: Oskar Fischinger Visual Music Composition .................................................... 9
Figure 09: Coding Collage Gallery Homepage ................................................................ 11
Figure 10: Movie Color Journal—Stage1: Strange Murder ............................................. 12
Figure 11: Stage 1 is Strange Murder ............................................................................... 13
Figure 12: Generate coding of Movie Color Journal—Stage 1: Strange Murder ............. 14
Figure 13: Stage 2 is Romantic Love ................................................................................ 15
Figure 14: Stage 3 is Fantastic Jailbreak ........................................................................... 15
Figure 15: Stage 4 is Dangerous Chasing ......................................................................... 16
Figure 16: Glitch Art Painting—Hatsune Miku ................................................................ 17
Figure 17: Visualization of the communication model as outlined .................................. 18
Figure 18: Liquid gravity .................................................................................................. 19
Figure 19: Image information open in programming ecosystem ...................................... 19
v
Figure 20: Data corruption image ..................................................................................... 19
Figure 21: Oil painting visual effect coding ..................................................................... 20
Figure 22: Glitch Art Painting—Liquid gravity ................................................................ 20
Figure 23: Original image – Pulp Fiction wallpaper ........................................................ 21
Figure 24: Data corruption image of Pulp Fiction Wallpaper ........................................... 21
Figure 25: Glitch Art Painting—Mia Wallace .................................................................. 21
Figure 26: Original image—Astronaut Photomontage wallpaper .................................... 22
Figure 27: Data corruption image of Astronaut Photomontage wallpaper ....................... 22
Figure 28: Glitch Art Painting—Astronaut Photomontage ............................................... 22
Figure 29: Unprocessed footage ....................................................................................... 24
Figure 30: Don’t Think! Feel! Video frame of The End or Beginning? ........................... 24
Figure 31: Don’t Think! Feel! Video frame of video title ................................................ 25
Figure 32: Don’t Think! Feel! Video frame of multiple earth satellite image .................. 25
Figure 33: Don’t Think! Feel! Video frame of flashing cubes .......................................... 26
Figure 34: Don’t Think! Feel! Video frame of black hole ................................................ 26
vi
Abstract
My thesis focuses on visual designs generated through creative coding. Founded on user
experience and interaction design, and final work encompasses creative coding generated work.
My work encompasses several fields that explore new directions and possibilities in generative
art. The resulting Coding Collage Gallery project is an online gallery that features three code-
generated works, focusing on three areas of concern throughout my MFA studies. The first
addresses basic creative coding art principles; different types of creative coding, including
interactive design, information visualization, and creative coding ecosystems. This research is
borne out in the Movie Color Journal series works. The second investigates glitch art that uses
digital or analog errors for aesthetic purposes by physically manipulating electronic devices or
corrupting digital data. This art style reflects The Glitch Art Painting series works created by
data corruption images and open-source code. The third theme focuses on visual music across
multiple media, including a short visual music video – Don’t Think! Feel! The music
visualization works are created from code-generated found footage. Through this research and
experimentation, I hope to explore the potential and limitations of code generated visualization.
Keywords: Creative coding art, Glitch art, Visual music, Online gallery.
1
Introduction
The Coding Collage Gallery project begins with my interest in using creative coding to
generate visual work. Throughout my MFA studies, my work has explored new possibilities and
boundaries through generative art and design. By producing and recontextualizing media—
painting, photography, and music—I understand new digital spaces that inform contemporary
design.
How could I show and share the visual works generated by programming, especially
during the pandemic time? I thought that building an online gallery is a suitable method to
collect and display digital work. The Coding Collage Gallery features collections under the
following categories: creative coding methodology, glitch art, and visual music. The first
addresses basic creative coding principles, including interactive design, information
visualization, and creative coding ecosystems. This research is borne out in the Movie Color
Journal series of works. The second investigates glitch art using digital or analog errors for
aesthetic purposes by physically manipulating electronic devices or corrupting digital data. This
art style, shown in the Glitch Art Painting series, was created by data corruption images and
open-source code. The third series focuses on visual music across multiple media, including a
short visual music video – Don’t Think! Feel! This music visualization work was created from
code generated footage.
The process to create coding generated art is experimental. Different types of code and
methods are suitable to express different work themes. The Coding Collage Gallery will collect
my code generated visualization work in progress and be a laboratory for creative code
experimentation.
2
I. Historical and theoretical research
A. Creative coding
My MFA study began with the study of user experience design and interaction design.
During this process, I began to experiment with programming to generate interactive interfaces
(Figure 01). I learned this is a well-established branch of creative coding, a type of art that uses
computer programming to create something expressive or functional. Although programming is
commonly used purely functionally, more and more artist communities use code languages as the
medium. Their work covers everything from computer-generated artwork to elaborate interactive
installations. Its purpose is to expand our understanding and sense of digital tools' possibility.
They use creative coding to create live visual effects and create visual designs, entertainment, art
installations, projections and projection maps, sound art, advertising, product prototypes, and
much more. Interaction design, information visualization, and generative art are the different
applications of creative coding.
Figure 01: File sharing web app interface design code. (Aybüke Ceylan, 2020)
Using programming to create design and artworks is a practice that began in the 1960s.
Compos 68, a Dutch art collective founded by Jan Baptist Bedaux, Jeroen Clausman and Arthur
Veen, successfully explored programming for artistic purposes and exhibited their works in
international exhibitions in the following decades. For example, Compos Hobby Box (1969,
figure 02) is a computer-generated design generated by the Utrecht University ELX-8 computer.
3
It was created by applying principles based on stereotypically Dutch Modernist aesthetics as
rules to produce unique compositions. Starting in the 1980s, professional programmers joined
simulation scenarios and tested their skills by creating "demos" (high-tech visual creation).
Figure 02: Compos Hobby Box (Jan Baptist Bedaux / Jeroen Clausman / Arthur Veen, 1969)
Another well-known work by Compos 68, My Boyfriend Came Back from the War (1996,
figure 03), uses the basic elements of HTML, hypertext, and images, as well as the emerging
language Java at the time, to tell a romantic movie story about a young woman reunion with her
boyfriend after he returned from a distant war.
1
The above works explore the use of
programming to create works in the form of graphics or movies but have high requirements for
the creator's programming ability.
Figure 03: My Boyfriend Came Back From The War. (Olia Lialina, 1996)
1
Olia Lialina,"My Boyfriend Came Back From The War | Net Art Anthology". Sites.Rhizome.Org, last
modified March 1, 2021, https://sites.rhizome.org/anthology/lialina.html.
4
To simplify the coding process, multiple software and online libraries have been
assembled so that coders and creators can cut into the essence of programming and focus on the
project's creative aspects. Processing is a programming visualization software and integrated
development environment for artists and designers based on the Java language. Casey Edwin
Barker Reas
2
and Benjamin Fry
3
created Processing in 2001, intending to enable creators to
write software to create interactive and visual works.
4
P5.js, OpenProcessing, and CodePen are
several online programming platforms and creative coding learning libraries that I will refer to in
the learning process. What they have in common is that they are all free, JavaScript-based open-
source libraries for creative coding with which artists and designers can code and share work in
an online environment. OpenProcessing is more suitable for educators and can organize courses
and post assignments on the platform. There is not only creative graphic coding but also a large
number of interactive design cases on CodePen.
B. Internet Art
We are used to viewing artwork as a place for contemplation and reflection. However, the
Internet is a different world. The Internet is swift, moving from impression to impression,
jumping from link to link. There is not much time for viewer contemplation. Andy Warhol once
said that everyone could only be famous for 15 minutes.
5
The fast pace of the Internet has made
these words a reality.
2
Also known as C. E. B. Reas or Casey Reas (born 1972), an American artist in Los Angeles whose
conceptual, procedural, and artworks explore ideas through contemporary software.
3
Also known as Ben Fry (born 1975), an American expert in data visualization.
4
Casey Reas and Ben Fry, Processing – A Programming Handbook for Visual Designers and Artists –
Second edition (MIT Press 2014), 1-5.
5
Andy Warhol 1968 – Moderna Museet i Stockholm. Moderna Museet, last modified March 1, 2021,
https://www.modernamuseet.se/stockholm/en/exhibitions/andy-warhol-other-voices-other-rooms/with-andy-warhol-
1968-text-ol/
5
The design and artwork on the Internet challenge the traditional way of viewing. Internet
art can be regarded as contemporary avant-garde art. It bypasses the spot limitation of traditional
art galleries and museums and can be connected to the Internet for people to watch
simultaneously. In many cases, the works are interactive and require some participation from the
audience. For example, as a virtual gallery, the Upstream Gallery (Figure 04) provides an online
display platform for the world's top digital artists and art collectives. Among them are the works
of JODI
6
or Rafaël Rozendaal
7
, who pioneered the development of digital art in the 1990s. Their
online works attract more than 60 million visitors every year. The vast number of visits far
exceeds the limitations of space and time dimensions, providing artists with more exposure
opportunities to be known.
Figure 04: Quiet, Calm, Staring. (Rafaël Rozendaal, 2013)
Net Art Anthology (Figure 05) is also an online Internet art exhibition that plays an
integral role in digital contemporary art history. It was created by Rhizome, an organization
dedicated to new media art. The goal is to address the problem that even the most famous
milestone artworks are often unable to be known by the public and be recorded in historical
6
JODI is a collective of two internet artists, Joan Heemskerk (born 1968 in the Netherlands) and Dirk
Paesmans (born 1965 in Belgium), created in 1994.
7
Rafaël Rozendaal is a Dutch-Brazilian Internet artist currently living and working in New York City.
6
perspectives. Therefore, from 2016 to 2019, Rhizome's famous digital preservation department
and Net Art Anthology collaboratively designed this online gallery, which collects 100
representative Internet artworks from the 1980s to the 2010s. It exhibits and contextualizes one
project each week. Even though artists' programming environment and technology 30 years ago
were different, the audience can interact with the artwork through the Net Art Anthology gallery
developed by Rhizome. These online museums or exhibitions have brought a lot of inspiration to
my Coding Collage Gallery project.
Figure 05: Net Art Anthology online exhibition (Rhizome and Net Art Anthology, 2016-2019)
C. Glitch Art
Glitch is unexpected faults shown on the screen usually, referring to errors in the video,
image, video, audio, and other digital work. As a technical word, faults are usually not a good
sign. Composer Kim Cascone once said that "at the end of the twentieth century, "fault" has
become a prominent aesthetic in many arts, reminding us that the control of technology is an
illusion and revealing that digital tools are as perfect, precise, and efficient as the people who
make them."
8
As early as 1978, artists could use the glitch patterns to create new art forms in
8
Kim Cascone, The Aesthetics of Failure: Post-Digital Tendencies in Contemporary Computer Music,
(Winter 2000), 392.
7
different technical and cultural scenes. Glitch Art is that artists create images for aesthetic
purposes through artificial destruction of digital codes or physical manipulation of electronic
devices. Rose Menkman is a Dutch artist and theorist specializing in exploring glitch art. Her
work focuses on creating visual artifacts accidentally produced in analog and digital media. The
following (Figure 06) is the example she showed in The Glitch Moment, processing the same raw
image in different methods to produce different visual effects.
Figure 06: The Glitch Moment(um) (Rose Menkman, 2011)
The core artistic expression of glitch art lies in the distortion, fragmentation, dislocation,
and deformation of images and the distortion and dislocation of colors, accompanied by the
assistance of stripes cross in the image. At present, several mainstream visual processing
methods are RGB split glitch, image block glitch, scan line jitter glitch, etc. Artists can create
glitch patterns through software algorithms or hardware failures.
9
D. Visual Music
Art and music are two primary culture fields. However, because the sound of music is
intangible, abstract, and ethereal (it disappears once it is gained), the slippage between producing
9
Jackson R, The Glitch Aesthetic, 2011, 47-51.
8
musical sound activity and the music's abstract nature creates semiotic uncertainty.
10
This
uncertainty was finally "resolved" by human sight to some extent, and humans have the desire to
‘illustrate’ the music they hear. For example, when the audience is watching live performances,
the above phenomenon is evident. Whether the music is classical music or a rock band,
musicians' movements and gestures can visually change the sound they produce to a certain
extent and change the audience's understanding of music.
11
In brief, the visual-performative
aspect of music is the core of its meaning. After 2013, multimedia and mixed media have
boomed such as audiovisual technology, stereographic projection and so on, creating more
varieties of artistic possibilities between vision and music.
Karin von Maur argued that: "In numerous avant-garde programs and manifestoes, there
have never been so many temporal concepts, such as dynamics, rhythm, simultaneity, speed, or
musical terms such as dissonance, cadence and so on. It proves the link of temporalization
tendency between art and music."
12
Film technology has significantly promoted the possibility
of "musicalized time" because it allows static images to advance on the timeline, which showed
in Oskar Fischinger's early visual music films (Figure 07). Trained at the Bauhaus, German-
American artist Oskar Fischinger is a pioneer film producer in the field of visual music history.
Between 1928 and 1932, he conducted fourteen film studies. In all these films, he closely
combined musical rhythms with abstract visual effects. His goal is to produce a new art form
called "color rhythm."
13
Many visual music artists such as James Whitney and Jordan Belson
claimed that Fischinger's style influences their work. In order to commemorate Fischinger's
10
Tim Shephard and Anne Leonard, The Routledge Companion to Music and Visual Culture (Taylor &
Francis, 2014), 1-2.
11
Tim Shephard and Anne Leonard, The Routledge Companion to Music and Visual Culture (Taylor &
Francis, 2014), 7.
12
Karin von Maur, The Sound of Painting: Music in Modern Art, (Prestel, 1999), 44.
13
Tim Shephard and Anne Leonard, The Routledge Companion to Music and Visual Culture (Taylor &
Francis, 2014), 19.
9
contribution to the field of visual music, Google has created a commemorative webpage (Figure
08) where visitors can try to create their own Fischinger-style visual music works on the website
and feel the stimulation of the senses by elements such as music, color, geometry shapes, and
rhythm.
Figure 07: Still from Radio Dynamics (Oskar Fischinger, 1942)
Figure 08: Oskar Fischinger Visual Music Composition (Google Studio, 2017), Link:
https://www.google.com/logos/doodles/2017/fischinger/fischinger17.9.html?hl=zh_CN&doodle=undefined
Musicians and artists have applied audiovisual technology and transformed it into an art
form that involve multiple levels of visual and auditory elements at the same time. Furthermore,
when displayed, the video can create immersive and interactive environment for audience. When
I create my visual music works, I try to use code as a medium to create visual footage through
programming and process visual parts through software, which can match auditory content.
10
II. Coding Collage Gallery
A. Project Background and Introduction
Since 2020, the Covid-19 pandemic has greatly restricted public travel. In the past year, I
have not been to enclosed entertainment spaces such as museums and cinemas. USC Roski
School of Art and Design graduation exhibition was moved from in-person to online. It has
become a problem of how can my design work be experienced and known by other people. I
participated in a recent online exhibition—Nature Created by Design
14
. The Nature by Design
exhibition displayed designers' and artists' work from countries worldwide, including the United
States, the United Kingdom, China, and Korea. This virtual gallery gives the illusion of space,
but is connected to the Internet, allowing the exhibition to break through time and region
limitations. Users and visitors can participate any time of day and in any location connected to
the Internet.
This exhibition inspired me to build an online gallery called Coding Collage Gallery to
feature my visual work processed after code. Creating coding art is experimental. There are three
collections in this gallery. Themes are creative coding methodology—Movie Color Journal,
glitch art—Glitch Art Painting, visual music—Don’t Think! Feel! The display form of an online
gallery allows visitors from all over the world connected to the Internet to visit and experience
these works and have the opportunity to interact with them.
B. Online gallery building process
This project started with my interest in using open-source code to create visual work.
After studying in a USC Roski School of Art and Design course—Post-Internet Art, I started
14
Nature Created by Design—The 15th international exchange exhibition, hosted by the Seoul Institute of
the Arts, focuses on climate and its impact on the environment. Link:
https://www.seoularts.ac.kr/mbs/kr/vr/nature_created_by_design/nature_created_by_design.html
11
trying to use the code in libraries such as OpenProcessing and P5.js as a medium to create works.
I also saved and shared the creative code demos on these platforms, other creators can use these
codes to produce their digital sketching. However, the display form and interactive method on
the platform are limited. I decided to collect my creative coding works in a more appropriate
interactive way in the Coding Collage Gallery and show the research process in a section of the
gallery. If creators are interested in creative coding, they can learn about this art form through
this part.
The Coding Collage Gallery contains three sections. (Figure 09) The first is the work
exhibition section, which contains all creative coding works, classified according to different
themes. The second part is the research part, which introduces creative coding processes, tools,
and libraries. The third part is my project background and introduction. In the next chapter of my
thesis paper, I will introduce the details and creative process of different work series.
Figure 09: Coding Collage Gallery Homepage (2020-2021)
12
III. Collection of works series
A. Movie Color Journal
1. Introduction
This series of works (Figure 10) contains my color theory analysis of The Grand
Budapest Hotel. The movie storyline divides into four stages of story structures. This work series
uses color as the subject and source material for my first experiments with creative coding. I
used the Adobe Photoshop color picker to analyze and reinterpret the color information in the
film. Based on this analysis, I visualized my understanding and feelings of this movie and
created four dynamic visual works with open-source code.
Figure 10: Movie Color Journal—Stage1: Strange Murder (2020)
2. Methodology and process
The Grand Budapest Hotel is a representative movie directed by Wes Anderson. His
films have a strong personal style, high saturation colors, remarkably symmetrical composition,
overlook angle and shaking shots, and each frame is aesthetic as a poster. This movie is
delightful, and especially the color palette left a deep impression on me. In addition to using pink
as the film's overall environmental color, other color tones are also used perfectly. Color has a
role in dividing the stages of the movie. For example, in the four-story structure, the color tone
13
presents different stories at each stage, and the impressive visual style makes the storyline more
attractive.
Though each stage's visual content is removed through my creative recording, each
stage's mood is retained in the overall color palette. For instance, the movie's content first stage
is that the mysterious death of the hotel's hostess, Mrs. D, caused a property dispute between the
family and her lover Gustave. In this stage, the director used many high-brightness, high-
saturation red, yellow, and purple scenarios that bring people into a tense, mysterious atmosphere
at once. The contrast between white and black, light and dark, heralds the coming feeling of fear
and danger. Therefore, the Movie Color Journal—Stage 1: Strange Murder (Figure 11) is made
up of dark tones and framed in black. In this case, the addition of the textual content, 'Strange
Murder' adds a text/image relationship that anchors this reading of the somber tones.
Figure 11: Stage 1 is Strange Murder (2020), with color number: #b12b33, #d6a846, #813798,
#f5ceb3, #4d1e2f, #552133, #ae2c3f
The movie's content second stage talks about how the secondary character Mustafa fell in
love with the pastry girl and then married her. The process is beautiful and romantic and the
14
color tone is beige and light blue. The third stage is that the leading character Gustave was
framed and jailed, finally completed the prison break with the help of a friend. The visual color
palette is full of grey and white, grey-blue, and light khaki. The fourth stage is after Gustave and
Mustafa escaped from prison, then they fall into a dangerous chase. The helplessness is revealed
in the dark, and the preciousness of friendship is highlighted in the cold atmosphere.
To create Movie Color Journal work, I first extracted the representative color numbers
from each stage of The Grand Budapest Hotel and applied them to each stage's dynamic works.
Then I adjusted the attributes of the code (Figure 12) in OpenProcessing. The rhythm, speed, and
sharpness of the waves at each stage represent the story's tension. The colors used are the
representative color of each stage of the movie.
Figure 12: Generate coding of Movie Color Journal—Stage 1: Strange Murder (2020)
15
Figure 13: Stage 2 is Romantic Love (2020), with color number: #f697ac, #869bd0, #fad000, #ffc394,
#d898a8, #0092b6, #f5b0a8
Figure 14: Stage 3 is Fantastic Jailbreak (2020), with color number: #fffffc, #181d20, #b66b42,
#5b5e68, #b2b3bd, #202e48
16
Figure 15: Stage 4 is Dangerous Chasing (2020), with color number: #f7eceb, #dcd2da, #ffffff,
#5b5e68, #b2b3bd, #202e48, #fbe1d4
17
B. Glitch Art Painting
1. Introduction
The second series of works in the Coding Collage Gallery is Glitch Art Painting (Figure
16). The creation process of glitch art is random and experimental, with unpredictable outcomes.
This feature intrigues me. I created glitch patterns through data corruption of image and then
processed the patterns artistically so that the visual work has a unique aesthetic sense.
Figure 16: Glitch Art Painting—Hatsune Miku (2020)
2. Methodology and process
In 1948, Claude Elwood Shannon, an American mathematician, constructed a
communication model of signal and noise (Figure 17): "information source -> encoder ->
channel -> decoder -> destination".
15
There are five basic steps of this model. The first is the
transmission of information starting from the source of information. The second is the sender
encodes the message into a signal suitable for transmission. The third then transmitter sends it
through the channel to the receiver. The last is that the message is decoded from the signal and
finally delivered in the appropriate form to the destination. There is an additional arrow to insert
15
Claude Elwood Shannon, ‘A Mathematical Theory of Communication’, Reprinted with corrections from
The Bell System Technical Journal, Vol.27 (July, October, 1948), 2.
18
noise into the channel, which can be a destructive external factor that corrupts the signal’s
message.
Figure 17: Visualization of the communication model as outlined (Claude Elwood Shannon, 1948)
I created these series of works mainly through data corruption. First, the astronaut picture
(Figure 18) is the famous photographic work by German artist Michael Najjar. I used it as the
original image, and opened it in the programming ecosystem. The encoder contains information
such as the color number and location of each pixel. The second picture (Figure 19) is the image
after I randomly deleted part of the code. This operation caused the color and position
information of some pixels in the original image to be erased. After the decoder sends the
information to the destination, the image (Figure 20) will randomly appear glitch visual effects
such as stripe misalignment and block glitch. After the image reaches the desired visual effect, it
freezes and is sampled. Then I process the image through an oil painting visual effect code
(Figure 21) to create the final visual work (Figure 22). Then I chose a series of cultural icons I
like (such as the Pulp Fiction movie and astronauts) as the original works to then corrupt the data
as aforementioned to create a collection, Glitch Art Painting. Then I named each sub-work with
the content of the original image.
19
Figure 18: Liquid gravity (Michael Najjar, 2013)
Figure 19: Image information open in programming ecosystem
Figure 20: Data corruption image
20
Figure 21: Oil painting visual effect coding
Figure 22: Glitch Art Painting—Liquid gravity (2020)
21
3. The Glitching Art Painting work
Figure 23: Original image— Pulp Fiction wallpaper
Figure 24: Data corruption image of Pulp Fiction Wallpaper
Figure 25: Glitch Art Painting—Mia Wallace (2020)
22
Figure 26: Original image—Astronaut Photomontage wallpaper
Figure 27: Data corruption image of Astronaut Photomontage wallpaper
Figure 28: Glitch Art Painting—Astronaut Photomontage (2021)
23
C. Visual music video—Don’t think! Feel!
1. Introduction
I was reading The Last Three Minutes by the English physicist Paul Davies recently. The
author discussed the origin and the end of the universe at length. In the book, the author
discusses why the universe must have an end, what kind of form the end of the earth will be, and
whether humanity can find a new universe to survive, and other issues. These questions made me
struggle. I could not find the answer within my cognition. These thoughts were the inspiration to
create the visual music video—Don't Think! Feel! I wanted to make my point of view visible in
this video.
2. Methodology and process
When creating the Don't think! Feel! visual music video, the process can be divided into
two steps: creating footage and compositing footage. The music background is an excerpt from
Babymetal's Future. Due to copyright issues, only the visual part has remained when played
back. When creating footage, I used open-source code from OpenProcess and p5.js libraries to
generate the following video cuts (Figure 29). When compositing and processing footage, I
mainly used the software Adobe After Effects and its plug-ins. Adobe After Effects is a motion
graphics, digital visual effects, and compositing software developed by Adobe Systems, which
can be used in the post-production process of film making, television production, and video
games. In addition to After Effects, I also used plug-ins Saber
16
and Red Giant
17
. After Effects
has extensive plug-in support. Those third-party plug-ins can automatically generate pre-set
16
Adobe After Effect plug-in, used to create energy beams, lightsabers, lasers, portals, neon lights, electric,
haze visual effect. Link: https://www.videocopilot.net/blog/2016/03/new-plug-in-saber-now-available-100-free/
17
Filmmaking software used to create video effects, 3D motion graphics, color correction, VFX, provide
Adobe After Effect plug-in. Link: https://www.redgiant.com/
24
particle systems with realistic effects such as ‘electric’, ‘neon light’, ‘fire’, or movie special
effects such as ‘glitches’ and ‘the universe’.
In The Last Three Minutes, Davies says that our universe originated from the Big Bang,
while gravitational collisions would destroy some planets. The story of this video starts with two
planets traveling at high speed in the universe. Due to the enormous gravity, two planets collided
and produced a massive shock wave. A question comes to mind: Will the two planets annihilate
each other, or will it create a new universe? Is this the end or Beginning? (Figure 30). After
struggling with this question for a long time, I began to tell myself that I could not reconcile or
answer this even after thinking about it for some time. Why not start enjoying the current life?
Don't think! Feel! Feel the music and start swinging!
Figure 29: Unprocessed footage (2020)
Figure 30: Don’t Think! Feel! Video frame (2020)
25
Figure 31: Don’t Think! Feel! Video frame of Don’t Think! Feel! (2020)
Figure 32: Don’t Think! Feel! Video frame of multiple earth satellite image (2020)
26
Figure 33: Don’t Think! Feel! Video frame of flashing cubes (2020)
Figure 33: Don’t Think! Feel! Video frame of black hole (2020)
27
Conclusion
Creative coding is applied widely in interactive design, data visualization, music
visualization, games, art Installations, and other fields. Using code as a tool and media to create
visual work become a global phenomenon. Affected by Covid-19, online galleries and
exhibitions boomed significantly, and many artworks can be displayed and interacted with
through the Internet. Digital art is becoming part of the dominant culture worldwide both as a
process and as something collectible like traditional art.
There are mainly two strategies in approaching my artworks in the Coding Collage
Gallery. First, I begin with a preconceived vision of the work's content, such as with the visual
music series. I will find the coding type that fits the theme according to the storyline and process
it through aesthetic techniques. Second, I have a strategy to make full use of the randomness of
coding medium. I will not assume the generated outputs but see what the computer will produce
when playing, such as the Glitch Art Painting series. Randomness is crucial in creating this type
of generative art. Every time the script is run and the image data is corrupted, the result is
different. The artist can control the overall visual style, and the specific output works are
extraordinarily random and cannot be traced back to the source.
Generative art's unpredictability is exciting and attracts me to learn and experiment with
more types of code. Coding Collage Gallery is the beginning of my investigation into this
process. In the future, this project will continue to grow and evolve. I will use code as a medium
and use projections, animations, and other forms to express the final design and artwork.
28
Footnotes
1. Olia Lialina,"My Boyfriend Came Back From The War | Net Art Anthology".
Sites.Rhizome.Org, last modified March 1, 2021,
https://sites.rhizome.org/anthology/lialina.html.
2. Also known as C. E. B. Reas or Casey Reas (born 1972), an American artist in Los
Angeles whose conceptual, procedural, and artworks explore ideas through
contemporary software.
3. Also known as Ben Fry (born 1975), an American expert in data visualization.
4. Casey Reas and Ben Fry, Processing – A Programming Handbook for Visual
Designers and Artists – Second edition (MIT Press 2014), 1-5.
5. Andy Warhol 1968 – Moderna Museet i Stockholm. Moderna Museet, last modified
March 1, 2021, https://www.modernamuseet.se/stockholm/en/exhibitions/andy-
warhol-other-voices-other-rooms/with-andy-warhol-1968-text-ol/
6. JODI is a collective of two internet artists, Joan Heemskerk (born 1968 in
the Netherlands) and Dirk Paesmans (born 1965 in Belgium), created in 1994.
7. Rafaël Rozendaal is a Dutch-Brazilian Internet artist currently living and working in
New York City.
8. Kim Cascone, The Aesthetics of Failure: Post-Digital Tendencies in Contemporary
Computer Music, (Winter 2000), 392.
9. Xingyun Mao, High-quality post-processing: summary and implementation of ten
glitch art algorithms.
10. Jackson R, The Glitch Aesthetic, 2011, 47-51.
11. Tim Shephard and Anne Leonard, The Routledge Companion to Music and Visual
Culture (Taylor & Francis, 2014), 1-2.
12. Tim Shephard and Anne Leonard, The Routledge Companion to Music and Visual
Culture (Taylor & Francis, 2014), 7.
13. Karin von Maur, The Sound of Painting: Music in Modern Art, (Prestel, 1999), 44.
14. Tim Shephard and Anne Leonard, The Routledge Companion to Music and Visual
Culture (Taylor & Francis, 2014), 19.
15. Nature Created by Design—The 15th international exchange exhibition, hosted by the
Seoul Institute of the Arts, focuses on climate and its impact on the environment.
29
Link:https://www.seoularts.ac.kr/mbs/kr/vr/nature_created_by_design/nature_created
_by_design.html
16. Claude Elwood Shannon, ‘A Mathematical Theory of Communication’, Reprinted
with corrections from The Bell System Technical Journal, V ol.27 (July, October,
1948), 2.
17. Tim Shephard and Anne Leonard, The Routledge Companion to Music and Visual
Culture, 2014, 7.
18. Adobe After Effect plug-in, used to create energy beams, lightsabers, lasers, portals,
neon lights, electric, haze visual effect. Link:
https://www.videocopilot.net/blog/2016/03/new-plug-in-saber-now-available-100-
free/
19. Filmmaking software used to create video effects, 3D motion graphics, color
correction, VFX, provide Adobe After Effect plug-in. Link:
https://www.redgiant.com/
30
Bibliography
Lialina, Olia."My Boyfriend Came Back From The War | Net Art Anthology".
Sites.Rhizome.Org, Last modified March 1, 2021.
https://sites.rhizome.org/anthology/lialina.html.
Andy Warhol 1968 – Moderna Museet i Stockholm. Moderna Museet. Last modified March 1,
2021. https://www.modernamuseet.se/stockholm/en/exhibitions/andy-warhol-other-
voices-other-rooms/with-andy-warhol-1968-text-ol/
Rozendaal, R. Rafaël Rozendaal. Last modified March 1, 2021.https://www.newrafael.com/
Terkelg. "Awesome-creative-coding". Github. Last modified March 1, 2021.
https://github.com/terkelg/awesome-creative-coding
Benedikt Groß, Hartmut Bohnacker and Julia Laub, Generative Design. Last modified March 1,
2021. http://www.generative-gestaltung.de/2/#about
JODI. "JODI - 3 Artworks, Bio & Shows on Artsy". Artsy. Last modified March 1.
https://www.artsy.net/artist/jodi
Rosa Menkman. Sunshine in my throat. Last modified March 1, 2021. http://rosa-
menkman.blogspot.com/
Abstract (if available)
Abstract
My thesis focuses on visual designs generated through creative coding. Founded on user experience and interaction design, and final work encompasses creative coding generated work. My work encompasses several fields that explore new directions and possibilities in generative art. The resulting Coding Collage Gallery project is an online gallery that features three code-generated works, focusing on three areas of concern throughout my MFA studies. The first addresses basic creative coding art principles
Linked assets
University of Southern California Dissertations and Theses
Conceptually similar
PDF
Visualizing text as storytelling
PDF
Post modern UI/UX, an anti-design manifesto for 21st century
PDF
Visual design and development of music festival
PDF
Designing a personal narrative through collaged mass-market images: traditional collage and digital collage
PDF
Investiture of Chinese culture in character design
PDF
Anthropocene outfitters: clothing that works with our climate, not against it
PDF
Past imagination, present creation and the reality of tomorrow: explore the impact of Augmented Reality (AR), Virtual Reality (VR), and Mixed Reality (MR) design
PDF
Perceiving the environment through sound
PDF
Sound, sculpture and presence
PDF
Visualizing the effects of cultural communication on the individual: Confucianism and new family structure
PDF
Co-dressing: designing across cultures
PDF
Fragments: communication in contemporary techonology
PDF
The application of photography technology in modern graphic design: the beauty of astrophotography
PDF
Transplant: examining culture clash through linear storytelling and non-linear storytelling
PDF
A sense of joy
PDF
My spaces (2020-2021)
PDF
The daily life of nervous boy "Y": information visualization with multi-sensory design
PDF
Am I ugly? The impact of selective self-presentation selfies on self-awareness
PDF
ID × beauty: the intersection of design, beauty, and our performative identities
PDF
Building the digital dreamscape: virtual worlds, the subconscious mind and our addiction to escapism
Asset Metadata
Creator
Liu, Yan
(author)
Core Title
Code generated visualization: Coding Collage Gallery
School
Roski School of Art and Design
Degree
Master of Fine Arts
Degree Program
Design
Publication Date
04/24/2021
Defense Date
03/23/2021
Publisher
University of Southern California
(original),
University of Southern California. Libraries
(digital)
Tag
creative coding art,glitch art,OAI-PMH Harvest,online gallery,visual music
Language
English
Contributor
Electronically uploaded by the author
(provenance)
Advisor
Zoto, Alexis (
committee chair
), Fung, Alice (
committee member
), O’Connell, Brian (
committee member
)
Creator Email
yikoliu325@outlook.com,ykloveozil@gmail.com
Permanent Link (DOI)
https://doi.org/10.25549/usctheses-c89-451714
Unique identifier
UC11668778
Identifier
etd-LiuYan-9521.pdf (filename),usctheses-c89-451714 (legacy record id)
Legacy Identifier
etd-LiuYan-9521.pdf
Dmrecord
451714
Document Type
Thesis
Rights
Liu, Yan
Type
texts
Source
University of Southern California
(contributing entity),
University of Southern California Dissertations and Theses
(collection)
Access Conditions
The author retains rights to his/her dissertation, thesis or other graduate work according to U.S. copyright law. Electronic access is being provided by the USC Libraries in agreement with the a...
Repository Name
University of Southern California Digital Library
Repository Location
USC Digital Library, University of Southern California, University Park Campus MC 2810, 3434 South Grand Avenue, 2nd Floor, Los Angeles, California 90089-2810, USA
Tags
creative coding art
glitch art
online gallery
visual music