Creative Coding: Programming for Personal Expression

Kylie A. Peppler Yasmin B. Kafai

University of California, Los Angeles University of California, Los Angeles
2148 Moore Hall 2331 Moore Hall
Los Angeles, CA 90095-1551 Los Angeles, CA 90095-1551
Phone: 001-310-497-8921 Phone: 001-310-206-8150
Email: [email protected] Email: [email protected]

even less commonly is there a call for them to learn programming

ABSTRACT skills.
Media Arts within primary and secondary education is a relatively
new avenue of research. Within the context of the arts classroom, Further complicating the matter, even when computer science is a
rarely is learning to program emphasized despite its importance part of the traditional curriculum, programming projects tend to
for creative expression in a digital medium. We present outcomes focus on mathematical and science content [21, 23]. As an
from an extensive field study at a digital studio where youth alternative, we emphasize programming projects that use graphic,
accessed programming environments emphasizing graphic, music music and video — media that have been found to be at the core
and video. Learning the language of creative coding is essential to of technology interests for youth and also making them more
expression in a digital medium — one with increasing importance amenable to an arts environment [24]. This approach situates
for youth and society at large. Here, we argue that it’s not just in programming within a more media-rich context, focusing less on
the viewing or playing of digital media but also in the constructive the manipulation and interaction with numeric symbols but more
— or coding — experience through which connections to art can on digital media [16, 26]. Media arts projects like these use
be established. programming as a means to understand the production and
manipulation of familiar media. These types of design activities
KEY WORDS allow kids to move from consumers of media, software and
Art, design, digital art, education, education design, media art. technologies to producers as they create new work. In an effort to
introduce the essentials of programming to young artists, we
INTRODUCTION argue that learning to code creatively is an important building
As John Maeda states in his book, Creative Code, computer block for creation and expression in digital media.
technology “is not a tool; it is a new material for expression” [14,
p.101]. Defining new work at the intersection of arts and It is also important to note that, as evidenced by the artistic
technology is problematic as the field is continually changing and contributions in the Prix Ars Electronica festival, where artists as
rapidly expanding. We have chosen, for the purposes of the paper, young as 8 years of age have received recognition in the “u19
to use the term “media art” to encompass all forms of creative freestyle computing” competition [13], youth are already more
practice involving or referring to art that makes use of electronic than consumers of new media, they are creators. In this
equipment, computation, and new communication technologies. competition, youths’ work is increasingly sophisticated producing
For the most part, this is the preferred term in the professional animation shorts, web design, and digital music. However,
field, however, the terms digital arts, media, or new media are prevalent these few young artists may be, there is dearth of
also used interchangeably [20, 25]. activity in formal and informal educational settings as well as
women and minorities are still underrepresented in the
Accordingly, students need to cultivate the specific skills and submissions for such competitions. Issues of equity and access are
competencies needed for expression in this new material. not absent when considering media arts. Our focus is to examine
Importantly for primary and secondary education, there has been the potential of creative coding, or programming, to open
little recognition of the need for programming skills especially in alternative venues into digital technologies. In this paper, we
the context of the arts classroom [2]. Recognition of digital media present outcomes from an extensive field study at a studio where
(i.e., computers) as a viable art form can help students achieve youth accessed programming environments emphasizing graphic,
literacy goals in both the arts and information technologies (IT), music and video. The young artists in this study use programming
expanding the scope and capabilities of both forms. This paper to alter or change media that they have accessed via the Web. The
argues that it is not just in the viewing or playing of digital media resulting product is presented here with a more detailed analysis
but also in the constructive—or coding—experience that of both the computational and artistic elements. These elements
connections to art can be established. connect the artist to the value of artistic production and a deeper
Previously, various forms of multimedia design, particularly that understanding of what they would otherwise only consume.
which uses Adobe Photoshop and Hyperstudio software, have
been taken as the main artistic expression of digital media in CONTEXTS FOR CREATIVE CODING
primary and secondary educational settings [1, 29, 30] whereas Our work can be situated within diverse efforts to introduce
professional artists are using advanced programming to programming in an artistic manner to students. Before presenting
manipulate and create digital expressions [14, 28]]. If there is any the outcomes of an extensive field study at a digital design studio
movement in education, it has not paralleled the developments in in Los Angeles, California, we will expand on a few examples of
professional art. Rarely in primary or secondary arts education is existing contexts for creative coding: videogame art;
the need for kids to learn about new technologies discussed, and computational crafts or robotics; and animations or computer
graphics. We will then provide an in depth example from our

1
work so that the reader has a better understanding of how programming [32]. Students from diverse educational
programming can become creative within these projects. Our backgrounds work over the course of a month to create robotic
efforts, as well as the other bodies of work presented here, give sculptures made out of LEGO© parts, sensors, motors, and small
youth opportunities to create while learning the foundations in embedded computers and were programmed using HandyLogo
computer science, media arts, and engineering, ultimately software. This approach allowed room for artistic expression and
preparing them for wider cultural participation. resulted in a wide array of projects such as Loom, which could
actually perform elementary weaving. Similar to our approach,
Videogame Art the Robotics Design Studio utilized a “Creative Engineering
For more than a decade, youth have been known to engage in Gallery” for displaying its artistic products at the end of the
playing videogames. The Minds in Play projects [11] provide an course. The gallery proved to be an important non-competitive
example of how students can engage in making video games learning tool, allowing students to discuss their work and gain
when creating instructional games to teach fractions to younger feedback from a larger audience.
students in their schools – a topic taught in primary mathematics.
Studies have found that the game design activity offered a Animation and Computer Graphics
microworld in which both girls and boys could situate their Perhaps the most common use of creative coding is the Flash
preferred ideas and fantasies [12]. Additionally, in student choices animation and Web design projects that youth are creating. In the
of game themes and the programming of animation and u19 competition, these types of projects tend to be the most
interactions, they offered a glimpse into what they found heavily represented. In 2003, Manuel Fallmann’s space adventure
appealing and unappealing in the games and stories they system interrupted won an Honorary Mention for his creation
experience through other media. Making a game and its rules using Flash animation [13]. Although this is an exemplary piece,
allowed the game designers to be in charge and to determine the it nevertheless, exemplifies what youth are capable of in this
player’s place and role in a virtual world, with all the medium. Within primary and secondary education, animation
consequences. Young designers use code to create a novel using code or programming is typically found in Adobe
videogame environment, which has many artistic elements in its Photoshop and Hyperstudio projects. One example is the work of
own right. Rebecca Sinker [30], which studies youth ages 4-7 from culturally
diverse communities, whom create multimedia memoirs and
There are a growing number of video gaming camps for young interactive digital journeys to record their family history using
designers: One example is the Urban Video Game Academy in Hyperstudio. Students interviewed family members, working on
Baltimore, Washington, and Atlanta that holds free video-game their interview/storytelling skills and allowing the students to
creation seminars for at-risk teens [19]. Mario Armstrong, a explore their own history and value one another’s. The author
technology correspondent for National Public Radio and an found that the project gave the children a sense of authorship as
academy co-founder, said that in addition to computer well as ownership. However, many of these projects do not
programming skills, the classes expose students to geometry, necessarily involve the students in programming—the skill that
algebra, physics, art and music. The program is designed to we argue is fundamental for expression in a digital medium.
educate teenagers about career opportunities in game creation, to
help change an industry in which minorities and women are often Building on this work, the remaining portion of this paper will
depicted in negative stereotypes and rarely as the heroes. delve more deeply into one design studio, providing an illustrative
However, no formal educational studies have actually investigated example of student work that creatively makes use of code—
these settings. allowing the artist to make connections to art that would
otherwise only be played or viewed. It is important to note that
Computational Craft and Robotics this is only one example of the diverse body of work that was
Although the context of videogames offers a two-dimensional created at this studio, as there are countless other works that
medium for exploring creative coding, there are other artists and typify videogame art, animation, and other art works made by
educators working to incorporate coding and computation in three students at this same site.
dimensions. One such example is the work of Michael Eisenberg,
who has explored the arena of computational crafts and more DIGITAL DESIGN STUDIO
specifically HyperGami [4]. The computational system, Despite a broad definition of media arts, very few formal
HyperGarmi, allows kids (and adults) to explore solid geometry programs exist in the educational context that attempt to engage
in the context of expressive construction of polyhedral models and youth in this type of work. One exception is the media arts studio
sculptures. Creating original paper sculptures with HyperGami found at a community technology center in South Central Los
entails the design and construction of novel polyhedral forms Angeles, California situated at a storefront location in one of the
derived from simpler shapes. Students create, alter, and compile city’s poorest areas. As you enter the design studio, students can
code using special software, sculpting a variety of three- be found at the clusters of desktop computers grouped along the
dimensional forms, and ultimately creating innovative origami- left wall. Young artists at this studio range in age from 8-18 years
like sculptures. of age but most are between the ages of 10-14. At the center of the
room sits a gigantic green table, serving as the common area for
Another way for students to get involved in creative coding is youth to work away from the computers with paper, pencils,
found in the field of robotics and the computational construction markers, or electronic parts. In the back, sits a separate music
kits created by the MIT Media Lab. One such example is a studio equipped with a real piano and recording software for
Robotics Design Studio, offered at Wellesley College, exposing youth to create, record, and edit original music. All of the
Liberal Arts majors to the “big ideas” of engineering and computers are networked to a central server, where youth have a

2
personal folder that serves as a digital sketchbook or image successful constructional design allows the creator to make both
archive, as well as a repository for finished work. Students work personal and epistemological connections as an integral part of the
individually and in small groups, moving fluidly between the web design process [26]. We argue that it’s through these two types of
and the unique software applications to create integrated projects. connections that users make a more personally meaningful bond
However, very few of these applications allow young designers to to art itself. Through these projects, students make connections to
use and learn essential programming skills. Scratch, a media-rich larger bodies of knowledge, better understanding artistic
programming environment, offers one strong exception [15]. production and expression in a digital medium. Here we will
examine how one young designer has appropriated the Scratch
environment, particularly through the making of personal and
epistemological connections. Over the past year, we have
documented design activities at the digital design studio through
extensive ethnographic field note taking and the collection of over
300 design projects [3, 18]. Young artists in this study worked on
creating personally meaningful Scratch projects such as animated
stories, Videogame art, and interactive or playable art using pop
culture images and sounds pulled from the web or created using
other software.

To better illustrate how programming can establish deeper

connections to art, we’ll more closely examine a single project
Figure 1: Student discussing his Scratch project during a
created by a 13-year-old African-American artist, called Kaylee.
gallery display at the digital design studio.
Although she has over four years of experience at the studio, this
SCRATCH PROGRAMMING ENVIRONMENT is her first project using Scratch as an expressive medium.
Scratch differs from other novice-friendly visual programming Choosing to create a “dance video” as her first design project,
environments [5] by using a more familiar building block called “k2b,” she spent six to seven hours in a period of a three
command structure [16, 27], eliminating thorny debugging weeks making design decisions and learning the basics of
processes and the risk of syntax errors (see Figure 2). Moreover, programming. To briefly summarize her project, when the user
designers don’t need to learn or memorize bits of code to program presses the start button, music begins to play and characters dance
when using Scratch. Instead, users have several pages of on screen. Intermittently, the background changes between eight
commands that they can drag to a central screen to control objects different images, positioning the characters in a new ways within
or characters they have created. Objects can be any imported the space as they dance (see Figure 3).
graphic image, uniquely created or drawn, or chosen from a
personal archive. Designers can create or incorporate existing
sound files, video, and other input/output devices can also be
integrated into new design projects — truly making them media-
rich. We found that designers used this software to create
videogames, art objects, and animated stories among other
projects. Here we present an animated music video created by one
artist.

Figure 2: Full screen shot of the networked, media-rich

programming environment, Scratch.
BEGINNING CREATIVE CODINGS
The studio, as well as Scratch, was purposely designed with a
constructionist theory of learning in mind, which poses that
people learn best when they are active participants in design
activities [10, 22]. The examples outlined here build on one of the
main contributions of constructionism, appropriation, which Figure 3: k2b (2005). Partial screen shot, including display
posits that learners construct knowledge by making it their own. window and character library.
Resnick et al. adds to this discussion by pointing out that

3
Personal Connections & Expressions
There were at least two ways in which Kaylee made a personal
connection to the project. At the start of the project, Kaylee had
an existing interest in pop music and chose to use Gwen Stefani’s
“Hollaback Girl” as the basis for her music video. As a result,
Kaylee chose media and music that reflected her perception of
pop culture and music videos, as well as known web resources.
Secondly, Kaylee chose to insert both a picture of herself and her
younger brother as two of the dancers in her music video,
augmenting the personal expressive quality of this piece (see
Figure 3). However, in the search for these images, Kaylee was
very particular about the “look” that she was trying to achieve,
stopping frequently to say things like, “no...I look too serious
there. Besides my clothes just aren’t right...it’s just not cool.” It
was less important to her to insert an image of herself, as it was to
find one that fitted her perception of how a music video should
appear. Ultimately, she found a photo of herself that she liked
and, standing up out of her seat, declared, “yeah, that’s it...Let’s
put it in.”

Epistemological Connections & Expressions

As we look more closely at the epistemological connections and
expressions that Kaylee made during the design process, we find
that there was an iterative cycle, starting with a design-oriented
goal (i.e., how the characters should look and dance) and achieved
by utilizing complex command structures. To illustrate this design Figure 4: k2b (2005). Partial screen shot, including scripts or
cycle, we will use the distinctive dance patterns that Kaylee codes controlling the ballerina.
created. Each of the characters had a unique set of commands,
creating a unique dance pattern, or “behavior.” Kaylee uses
programming and math concepts such as the x and y coordinate
axes, the unit circle, and a repeat loop to create her desired effect
(see Figure 4). For example, the ballerina moved as if she were
dancing in a pirouette on her toes by flipping the image
horizontally and moving it in small circular steps. This contrasts
with the bananas that appeared to be moving in a diagonal motion
across the screen (see figure 5).

In essence, Kaylee created a palate of movements and would

borrow or group them depending on how she felt the image
should behave. Kaylee programmed another character—a digital
photo of her brother in a toy car--by selecting the scripts that she
wanted from other characters and compositing them in order to
imitate driving. In the last figure (Figure 6), we see an example of
how Sprite15 was programmed by creating a unique composite of
two separate program codes. Within the repeat loop, the first
section of the code was pulled from the ballerina and the latter
half was pulled from the bananas. The field researcher reports,
“What was kind of neat about the commands that she
serendipitously chose was that the image flipped horizontally and
since the car was nearly symmetrical, it looked as if her brother
was turning the wheel on the inside of the car and turning his head
slightly.” When Kaylee discovered and was happy with this
effect, she finished programming this object and began working Figure 5: k2b (2005). Partial screen shot, including scripts or
on something else. Without any prior programming experience, codes controlling the bananas.
Kaylee was using looping constructs, repurposing scripts, and,
moreover, coding creatively.

4
 discuss this issue more specifically within the context of video
games. These papers point out the different directions into which
video games become art — from the viewing and the playability
of expressive adaptations of video games. Darshana Jayemanne,
in her paper titled “Spielraum: Games, art and cyperspace,”
wrestled with the issue of whether videogames can be considered
art [9]. Jayemanne situates video games as ready-made worlds
that invite interaction and participation between the viewer (i.e.,
player) and the object (i.e., the game). One tension is that game
worlds are both simultaneously hardscape and imagescape
(according to Peter Lunenfeld’s distinction) as they are embodied
in certain hardware architectures but also in the mind of the
player. In her mind, these connections provide the qualification to
consider videogames as art. In other words, despite the mass
production and wide availability of video games, in certain
respects video games can be considered artistic because of the
ways in which the viewer in engaged in the piece. In a similar
manner, creative coding projects like the ones mentioned here are
artistic objects for the viewer.

Accordingly, work like that of Tiffany Holmes explores

videogames as playable art [8]. She examines how some video
games adopt or incorporate the interface and interaction style of
first generation video games, like Pong, and are exhibited at
museum spaces. There are a range of video game adaptations for
feminist and cultural purposes, demonstrating the variability of
the genre and how it has been adopted for expressive means. Her
paper focuses entirely on the game playing experience and all of
the games discussed in the article were designed by others for the
Figure 6: k2b (2005). Partial screen shot, including scripts or player or viewer to engage in certain ideas. Together, these two
codes controlling the bananas. papers build an argument for valuing the artistic contribution in
the viewing and playing of digital media. Our work adds another,
DISCUSSION equally important perspective -- that of creating your own video
We feel that young designers involved in Scratch make specific game or related artistic project. We add that it is not just in the
personal and epistemological connections to their work. It is viewing or playing but also in the constructive – or coding –
through these connections that young designers, like Kaylee, experience that connections to art can be established. In other
establish a greater connection to the arts in general. In addition, to words, coding allows the creator to simultaneously appreciate and
the competency that Kaylee already had in viewing and playing of create art.
digital medium, she developed through this project a greater
understanding of how such mediums are created. This was evident
through her utilization of programming concepts like looping CONCLUSION
constructs, conditionals, and assembling programs out of base Undoubtedly, more work needs to be done in this area. Not only is
components — concepts that are difficult for novice computer there a limited amount of research in the field of primary and
science majors [5, 32]. Moreover, as found in the example here, secondary media arts programs, an even smaller amount of work
learning to creatively code does not necessarily involve an has been aimed at giving youth access and knowledge to
extensive and time-consuming introduction. It’s important to note programming skills. Without such competencies and skills, youth
that our efforts in introducing creative coding into community will not be able to manipulate digital mediums in an expressive
technology centers are not geared towards replacing traditional manner. The potential of getting youth interested in technology
arts or turning all youth into code-obsessed hackers. Rather, we has not been realized in computer science nor in arts classes,
argue that learning the language of creative coding is essential to representing a missed opportunity for arts education especially
expression in a digital medium—a medium that has an increasing since many involved in changing the absence of women and
importance for youth and society at large. In short, media arts minorities in information technologies have argued for alternative
expression requires a separate set of competencies and tools not approaches in computer classes to broaden participation [17].
usually cultivated in an educational context. Given this need to become fluent in both the arts and information
technologies, it makes sense to offer interdisciplinary experiences
Some may question whether these creative codings fall into media for young children, similar to those presented by Scratch.
arts. To answer this question, we turn to two recent papers, which

5
REFERENCES Creating, Connecting, and Collaborating through Computing,
[1] Abbott, C. (1999). Web publishing by young people. In J. Kyoto, Japan.
Sefton-Green (Ed.), Young People, Creativity and New
Technologies. London: Routledge. [17] Margolis, J., Fisher, A., & Miller, F. (2000). The Anatomy of
Interest: Women in Undergraduate Computer Science.
[2] AEP. (2004). The Arts and Education: New Opportunities Women's Studies Quarterly, Special Issue on Women in
for Research. Washington, DC: Arts Education Partnership Science, 104-126.
(AEP).
[18] Maxwell, J. A. (2005). Qualitative Research Design: An
[3] Creswell, J. W. (2003). Research Design: Qualitative, Interactive Approach (Vol. 41). Thousand Oaks, CA: Sage
Quantitative, and Mixed Methods. Thousand Oaks, CA: Sage Publications, Inc.
Publications, Inc.
[19] Mehta, S. (2005, July 28). Summer Camp for Kids, Ninjas.
[4] Eisenberg, M., & Nishioka, A. (1996, April). Polyhedral Los Angeles Times.
Sculpture: the Path from Computational Artifact to Real-
World Mathematical Object. Paper presented at the [20] Muchnic, S. (2005, April 24, 2005). Art on the move. Los
American Educational Research Association (AERA), New Angeles Times, pp. E1, E34-36.
York, NY.
[21] Palumbo, D. J., & Calista, D. J. (1990). Opening up the
[5] Guzdial, M. (2003). Programming Environments for Black Box: Implementation and the Policy Process. In D. J.
Novices.Unpublished manuscript, Atlanta, GA. Palumbo & D. J. Calista (Eds.), Implementation and the
Policy Process (pp. 1-17). New York: Groenwood Press.
[6] Harel, I. (1990). Children designers. Norwood, NJ: Ablex. [22] Papert, S. (1980). Mindstorms: Children, Computers, and
Powerful Ideas. New York: Basic Books.
[7] Harel, I. & Papert, S. (1991). Software design as a learning
environment. Interactive Learning Environments, 1(1), 1-30. [23] Papert, S., & Resnick, M. (1993). Technological Fluency and
the Representation of Knowledge, Proposal to the National
[8] Holmes, T. (2003). Arcade Classics Spawn Art? Current Science Foundation: MIT Media Laboratory.
Trends in the Art Game Genre. Paper presented at the
MelbourneDAC2003, Melbourne, Australia. [24] Pinkett, R. D. (2000, April 24-28). Bridging the Digital
Divide: Sociocultural Constructionism and an Asset-Based
[9] Jayemanne, D. (2003). Spielraum: Games, Art, and Approach to Community Technology and Community
Cyberspace. Paper presented at the MelbourneDAC2003, Building. Paper presented at the 81st Annual Meeting of the
Melbourne, Australia. American Educational Research Association (AERA), New
Orleans, LA.
[10] Kafai, Y. B. (in press). Constructionism. In K. Sawyer (Ed.),
Cambridge Handbook of the Learning Sciences. Cambridge, [25] Poissant, L. (2005). New Media Dictionary [Website].
MA: Cambridge University Press. Groupe de Recherche en arts mediatiques (GRAM).
Retrieved July 17, 2005, from the World Wide Web:
[11] Kafai, Y. B. (1995). Minds in play: Computer game design http://mitpress.mit.edu/e-journals/LEA/NMD/nmdhome.html
as a context for children's learning. Hillsdale, NJ: Lawrence
Erlbaum Associates. [26] Resnick, M., Bruckman, A., & Martin, F. (1996). Pianos Not
Stereos: Creating Computational Construction Kits.
[12] Kafai, Y. B. (1998). Video game designs by children: Interactions, 3(6).
Consistency and variability of gender differences. In J.
Cassell & H. Jenkins (Eds.), From Barbie to Mortal Kombat: [27] Resnick, M., Kafai, Y., & Maeda, J. (2003). ITR: A
Gender and Computer Games (pp. 90–114). Boston, MA: Networked, Media-Rich Programming Environment to
MIT Press. Enhance Technological Fluency at After-School Centers in
Economically Disadvantaged Communities: Proposal
[13] Leopoldseder, H., & Schopf, C. (2003). Prix Ars submitted to National Science Foundation.
Electronica: CyberArts 2003. Linz, Austria: Ars Electronica.
[28] Ryokai, K., Marti, S., & Ishii, H. (2005). Designing the
[14] Maeda, J. (1999). Design By Numbers. Cambridge: The MIT World as your Palette. Paper presented at the CHI 2005,
Press. Portland, Oregon.

[15] Maeda, J. (2004). Creative Code. New York: Thames & [29] Sefton-Green, J., & Buckingham, D. (1998). Digital Visions:
Hudson Inc. Children's 'Creative' Uses of Multimedia Technologies. In J.
Sefton-Green (Ed.), Digital Diversions: Youth Culture in the
[16] Maloney, J., Burd, L., Kafai, Y., Rusk, N., Silverman, B., & Age of Multimedia (pp. 62-83). London: UCL Press.
Resnick, M. (2004, January). Scratch: A Sneak Preview.
Paper presented at the Second International Conference on

6
[30] Sinker, R. (1999). The Rosendale Odyssey: multimedia
memoirs and digital journeys. In J. Sefton-Green (Ed.),
Young People, Creativity and New Technologies. London:
Routledge.

[31] Spohrer, J. C., & Soloway, E. (1985). Putting it all together

is hard for novice programmers. Paper presented at the IEEE
International Conference on Systems, Man, and Cybernetics,
Tucson, AZ.

[32] Turbak, F., & Berg, R. (2002). Robotic Design Studio:

Exploring the Big Ideas of Engineering In a Liberal Arts
Environment. Journal of Science Education and Technology,
11(3), 237-253.

[33] Williams, S. (1999). Roath Village Web: the Marlborough

Road Online School Scrapbook. In J. Sefton-Green (Ed.),
Young People, Creativity, and New Technologies (pp. 70-
82). London: Routledge.