RE GENERATE setup() & draw()
Of Infinite Possibilities
AKSHAN ISH / S1101106
Computer Science Engineer turned Graphic Designer trying to find long lost love and meaning in code.
This is a document of an exploration into Generative Art by Akshan Ish, a second year post-graduate student of Graphic Design from the National Institute of Design.
February 21st, 2013.
Heart designed by Henrik Lund Mikkelsen from The Noun Project
projectDetails() An Exploration into Generative Art Skill-Based Project Semester Four
projectObjective() To begin experimenting with generative art as an intersection of creative thinking and code; explore tools, algorithms, approaches, and look at ways to give conceptual theories and sociological frameworks a visual form through automated processes.
timeline() Four weeks, including contextual study, experimentation, conceptualization, execution and documentation.
projectGuide() Mr. Rupesh Vyas
science
code
art
computational aesthetics
curiosity
skill
interest
Following are the contents of the document. The first two chapters deal with the background context of generative art and introduce my entry point into the field. Chapters three to eight contain categorized explorations. Chapter nine
08 chapterOne()
22 chapterTwo()
Introduction
64 chapterFive()
Behind The Scenes
72 chapterSix()
Progression
Phooljhadi
94 chapterNine()
102 chapterTen()
Making People Scream
Learning & Resources
is dedicated to a sound-sensitive installation that was set up during the convocation exhibition at NID, and the last chapter has a list of resources for those interested in dabbling with code.
36 chapterThree()
Epicalypse
80 chapterSeven()
A Distant View
106 The Way Forward
Acknowledgements Colophon Contact
50 chapterFour()
Time and Space
86 chapterEight()
Image Processing
8 \
RE-GENERATE
Chapter One Introduction_
10 \
RE-GENERATE
setup() The setup() function is called once when the program starts. It is used to define initial enviroment properties such as screen size and background colour and to load media such as images and fonts as the program starts. There can only be one setup() function for each program and it should not be called again after its initial execution. Clean up your workspace. Set your canvas size. Get your tools in place. Create an image of your artwork in your mind. Make sure you have everything you need to get started.
draw() Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. draw() is called automatically and should never be called explicitly. There can only be one draw() function for each sketch, and draw() must exist if you want the code to run continuously. Make your tools speak and watch your artwork come to life. Iterate and keep at it till you achieve what you wanted, or let the system surprise you.
w www.processing.org
12 \
RE-GENERATE
theStory() Computers were magical objects. I would consider the computer as a gear of my childhood. I was first introduced to a Pentium II system with 64MB RAM when I was five years old. Dangerous Dave and Prince of Persia which came on 1.44MB Floppy Drives were my favorite games. My mother put me in a computer center thinking they would let me play games. Instead, they taught me to use MS-DOS and the LOGO Programming Environment. I grew extremely fond of the command prompt and the turtle that would move around screen obeying the commands that I wrote in the console.
Then, design happened. Inquiry was encouraged, and the spirit of exploration was drilled into my system. An exposure to art made me curious as to what it is about complexity that we value. The intersection of art, code and design was an area I wanted to delve into, partly to make some sense of the otherwise very unproductive four years of what ideally should have contributed to a learning curve with a ninety degree incline.
I picked up Computer Science because I wanted to be a game developer. None of that happened. I got caught in the mega IT boom and the rat race, which rendered me absolutely mediocre. Four years of studying computer science did not inspire me to code. I never quite understood the potential, or the objectives of programming. What it could do, and why we were being taught to code were things that nobody spoke about. As far as they were concerned, it was about material existence–a means to provide for yourself and lead a perfectly secure life.
As a skill-based project, this module allows students to notch up on an existing skill or pick a new skill up from scratch. I can’t quite decide in which category to place this proejct in. I knew the basics of programming but was not exposed to the open-source Processing environment, which enables people to create images, animations and interactions. Neither do I have programming skills that qualify me to call myself a programmer. What I did have is a sound understanding of basic mathematics, a love for geometry, the urge to experiment and find connections between what is possible to do with code and what we aspire to achieve as design students.
I lost hope. There was no point in any of this. We had learned about 26 different programming languages over the course of four years enabling us to change the face of the globe if we wished to; but nothing like that ever happened. My love for all things computers was completely shattered. My fascination with writing a few lines of code (input) and watching these magical things happen on screen (output) completely vanished. It all seemed extremely mundane and mechanical, with no desirable outcome. Formal training had taken the joy out of computing for me. It was something far removed from reality, like something happening in a parallel universe that I could not relate to.
As with most other assignments, this project also started out with a particular inquiry in my mind, and has left me with a whole new set of questions. The timing is also such that I am forced to go back and forth constantly between what I am doing and to what end. I hope to be able to illustrate generative art as a process rather than an end product–the role of the designer being to create the framework for a particular system with agents, forms and behaviours to function within. All of this is derived from the work and process of various artists who have worked extensively in this field; and more importantly, the open-source community that supports free knowledge for all.
E
N
T
E
R
14 \
RE-GENERATE
complexism() Complexism is a worldview that addresses the subject matter of the arts and humanities in a way inspired by a scientific understanding of complex systems. In doing so complexism provides a higher synthesis that subsumes both modern and postmodern concerns, attitudes, and activities. Complexism provides an intellectual meeting ground where the 20th century conflicts between science and the humanities can be reconciled. The whole is greater than the sum of its parts. Emergent behaviour is noticed in complex systems which may form patterns over time but is unpredictable in nature.
Complex systems typically have a large number of small parts or components that interact with similar nearby parts and components. These local interactions often lead to the system organizing itself without any master control or external agent being “in charge.” Such systems are often referred to as being self-organizing. These self-organized systems are also dynamic systems under constant change, and, short of death or destruction, they do not settle into a final stable “equilibrium” state. To the extent these systems react to changes in their environment so as to maintain their integrity, they are known as complex adaptive systems. The human body, weather and stock markets are examples of complex systems. Where modernism posits hierarchies, postmodernism seeks to collapse them. Complexism doesn’t erase relationships, but nor does it mandate hierarchies. Complexism emphasizes connectionist models and networks, creating systems of peer agents rather than leaders and followers. Where modernism aspired to absolute truth, and postmodernism denied any possibility of truth, complexism acknowledges known limits to human knowledge, but takes seriously the incomplete and statistical scientific truths that are achievable. – Philip Galanter, Complexism and the role of evolutionary art w http://philipgalanter.com/resources/
generativeArt() Generative art refers to any art practice where the artist uses a system that operates with some degree of autonomy, and contributes to or results in a completed work of art. Systems may include natural language instructions, biological or chemical processes, computer programs, machines, self-organizing materials, mathematical operations, and other procedural inventions. – Philip Galanter, on generative art Generative art is neither programming nor art, in their conventional sense It’s both and neither of these things. Programming is an interface between man and machine; it’s a clean, logical discipline, with clearly defined aims. Art is an emotional subject, highly subjective and defying definition. Generative art is the meeting place between the two; it’s the discipline of taking strict, cold, logical processes and subverting them into creating illogical, unpredictable, and expressive results. I owe much of my learning of generative art to Matt Pearson and his book, Generative Art: A Practical Guide Using Processing
Generative art isn’t something we build, with plans, materials, and tools. It’s grown, much like a flower or a tree is grown; but its seeds are logic and electronics rather than soil and water. It’s an emergent property of the simplest of processes: logical decisions and mathematics. Generative art is about creating the organic using the mechanical. – Matt Pearson, Generative Art: A Practical Guide Using Processing
16 \
RE-GENERATE
Below are excerpts from an interview of Golan Levin taken by John Maeda for his book Creative Code w http://www.flong.com/texts/essays/ essay_creative_code/
abstraction() Abstraction, I believe, is the act of ignoring or suppressing certain details, in order to bring certain basic concepts or structures (gestalts) into relief. And the fundamental subject of abstract art, I therefore claim, is pattern. The logic of abstraction, according to this definition, works something like this: by omitting whole categories of information from a communication, the abstract artist forces the mind of the observer to attend to what remains, and fill in the details on its own. When the observer’s mind fills in these details, it commits an act of what Scott McCloud calls closure — the completion of some visual or conceptual structure. By completing this structure, the viewer’s mind becomes freshly aware of this structure’s presence and force in a way that would ordinarily be obscured by the details of everyday experience. And so, in this way, the abstract artist communicates a general truth (or perception) about the way in which the world (or some part of it) is structured. – Golan Levin, responding to John Maeda’s question, “What makes something abstract versus concrete?”
computerAs.aTool() I believe that mind and computer are co-extensive. If writing is a medium of thought, then software is yet additionally an agent of will. When it executes my will, my software and I form a single, coextensive unit of both thought and purpose. Our intellects grow together with our tools. Eventually, they become inseparable. Although it may be hard to see how this could happen with a clunky item like a desktop PC, consider a much older tool like language: after a quarter-million years of using language, our brains have actually evolved to accommodate it, and now have several substantial regions which are solely dedicated to processing it. Radical augmentations of human intellect like writing and computation, though much newer than spoken language, stand no less a chance of becoming integrated into who we are, if our race can survive long enough. – Golan Levin, responding to John Maeda’s question, “In your mind, is the computer just a tool? How is it a tool? How is it not?”
“While engaged in the deepest trance of coding, all one needs to wish for is any kind of numerical or symbolic resource, and in a flash of lightning it is suddenly there, at your disposal.�
- John Maeda
18 \
RE-GENERATE
001 002 003 004 005 006 007 008 009 010 011 0
024 025 026 027 028 029 030 031 032 033 034 03 047 048 049 050 051 052 053 054 055 056 057
069 070 071 072 073 074 075 076 077 078 079 080
092 093 094 095 096 097 098 099 100 101 102 1 115 116 117 118 119 120 121 122 123 124 125 126 Generative design is so avant-garde that
139 140 141 142 143 144 145 146 147 148 149 15 162 163 164 165 166 167 168 169 170 171 172 173
186 187 188 189 190 191 192 193 194 195 196 197
209 210 211 212 213 214 215 216 217 218 219 220
232 233 234 235 236 237 238 239 240 241 242 24
255 256 257 258 259 260 261 262 263 264 265 26
278 279 280 281 282 283 284 285 286 287 288 28
012 013 014 015 016 017 018 019 020 021 022 023
35 036 037 038 039 040 041 042 043 044 045 046 058 059 060 061 062 063 064 065 066 067 068
0 081 082 083 084 085 086 087 088 089 090 091
103 104 105 106 107 108 109 110 111 112 113 114 127 128 129 130 131 132 133 134 135 136 137 138 Wikipedia barely has 300 words devoted to it.
50 151 152 153 154 155 156 157 158 159 160 161 174 175 176 177 178 179 180 181 182 183 184 185
7 198 199 200 201 202 203 204 205 206 207 208
0 221 222 223 224 225 226 227 228 229 230 231
43 244 245 246 247 248 249 250 251 252 253 254
66 267 268 269 270 271 272 273 274 275 276 277
89 290 291 292 293 294 295 296 297 298 299 300 But in fact, visual generative art started appearing in the 1960’s, and generative music can be traced back to Mozart, and his musical dice game.
- Belinda Lanks, Co.Design
w http://www.fastcodesign.com/1670547/9-groundbreaking-examples-of-generative-design
20 \
RE-GENERATE
whyGenerative.art() One of the key concerns with generative art is its utility in the realm of design. How can one make use of this skill set to enhance one’s practice, or perhaps, add another dimension to it? Generative design itself is an emerging field which is described by Onformative’s Cedric Keifer as a new approach to design. Simply said, it’s about how images can be generated by using code instead of the traditional design tools. An image is no longer created “by hand,” but instead a visual idea is translated into a set of rules and implemented in a programming language in the form of source code. One of the great advantages is that, by changing simple parameters, whole imagery arises rather than producing only a single image. Depending on the interaction and special input and output, this often results in various different kinds of projects that can be used in different ways independent of the media. As described, the generative design process is not set to a medium, and the output can vary greatly depending on the application; therefore, it can also work in a completely different context. Personally, one of the greatest advantages of being able to write code is the ability to create compositions and imagery that are otherwise extremely time-consuming or backbreaking with any of the traditional tools (even digital). Writing code allows you to create your own tools, as and when required to serve a particular purpose.
The ability to ‘read’ a medium means you can access materials and tools created by others. The ability to ‘write’ in a medium means you can generate materials and tools for others. You must have both to be literate. In print writing, the tools you generate are rhetorical; they demonstrate and convince. In computer writing, the tools you generate are processes; they simulate and decide. - Alan Kay The focus of the designer can also then shift from visual aspects such as colour and form, to the context at hand. The imagery can be created such that after the framework has been set by the designer, decisions of colour and form can be customized as per the users who are interacting with the system. A similar exercise has been put into practice with MIT Media Lab’s logo, wherein each student, faculty and staff member of the lab can generate their own unique algorithmically created rendition of the logo. w http://thegreeneyl.com/mit-media-lab-identity-1
22 \
RE-GENERATE
Chapter Two Behind The Scenes_
24 \
RE-GENERATE
The process of drawing eleven squares, each half the size of the previous square. (using a drawing tool like Illustrator) Draw a square. Define size. Duplicate the square. Move the second square to new position. Reduce size to half of first square. Align the two squares to their vertical centers. Duplicate the second square. Move the third square to new position. Reduce size to half of second square. Align the second and third squares to their vertical centers. Duplicate the third square. Move the fourth square to new position. Reduce size to half of third square. Align the third and fourth squares to their vertical centers. Duplicate the fourth square. Move the fifth square to new position. Reduce size to half of fourth square. Align the fourth and fifth squares to their vertical centers. Duplicate the fifth square. Move the sixth square to new position. Reduce size to half of fifth square. Align the fifth and sixth squares to their vertical centers. Duplicate the sixth square. Move the seventh square to new position. Reduce size to half of sixth square. Align the sixth and seventh squares to their vertical centers. Duplicate the seventh square. Zoom in. Move the eighth square to new position. Reduce size to half of seventh square. Align the seventh and eighth squares to their vertical centers. Duplicate the eighth square. Move the ninth square to new position. Reduce size to half of eigth square. Align the eigth and ninth squares to their vertical centers. Duplicate the ninth square. Zoom in. Move the tenth square to new position. Reduce size to half of ninth square. Align the ninth and tenth squares to their vertical centers. Duplicate the tenth square. Zoom in. Move the eleventh square to new position. Reduce size to half of tenth square. Align the tenth and eleventh squares to their vertical centers. Group all squares. Align the group to the center of the page.
The process of drawing eleven squares, each half the size of the previous square. (with algorithmic logic) Draw a square. Define size. Duplicate the square. Move the new square to new position. Reduce size to half of parent square. Align the child square to the parent square’s vertical center. Repeat the above steps 11 times, each time taking the child as the parent for the next iteration.
26 \
RE-GENERATE
processing() Processing is a programming language, development environment, and online community that since 2001 has promoted software literacy within the visual arts. Initially created to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing quickly developed into a tool for creating finished professional work as well. It was developed by Ben Fry and Casey Reas at MIT. Its open source status encourages the community participation and collaboration that is vital to Processing’s growth. Contributors share programs, contribute code, answer questions in the discussion forum, and build libraries to extend the possibilities of the software. The Processing community has written over seventy libraries to facilitate computer vision, data visualization, music, networking, and electronics. Although there are other softwares and tools that allow for the creation of generative artwork such as Adobe Flash, Nodebox, VVVV and Structure Synth, I chose to mainly work with Processing because it is free and has a large community that supports learning. It is also essentially a text-based development environment which runs on Java that let me write code, as opposed to using a WYSIWYG (what you see is what you get) interface that simply would not give me the same joy. This was also an opportunity to brush up on basic programming and try to understand the many concepts that earlier made no sense to me, with a fresh perspective.
learningFrom() The work of many artists, designers, mathematicians and computational scientists inspired me. It was almost like a network of learning that formed, with the work of one individual/studio leading to another and so on.
Joshua Davis
Ben Fry
Casey Reas
Matt Pearson
John Maeda
Marius Watz
Marcin Ignac
Daniel Shiffman
Memo Akten
Jared Tarbell
Golan Levin
Luke DuBois
Philip Galanter
Onformative
28 \
RE-GENERATE
input()
Circle drawn using ellipse command that defines position and size
After getting a grip of the basics of Processing, I used Matt Pearson’s book as my entry point into generative art. This dictated my overall approach and technique. He lays emphasis on breaking things apart in general, trigonometry , and illustrates this process in his segment on the wrong way of drawing a circle. Here, instead of drawing an ellipse directly with a given radius, he uses trigonometry to take control of every point on the circumfrence of the circle. This allows for further iteration and experimentation with the circular form. This formed the basis of most of my explorations, as I realized later. The generative art process, for me, always began with wanting to simulate a particular mathematical equation or a physical phenomenon. In a few cases, I had an existing visual in my mind that I wanted to translate into code, or wanted to experiment with. It was necessary to understand the individual components of the equation to be simulated, break it down to its basic units and then write a code that allowed control of all the units of the equation. This way, by simply changing the parameters for the same equation, one could generate an extensive number of visuals. Further, adding some randomness and noise into the equations resulted in unexpected outcomes.
Circle drawn using polar equations r = xcos(t), r = ysin(t)
What I was essentially doing was using the screen as a graph paper to map equations or certain behaviours on, and then play around with the variables. By giving the control of these parameters to the user, the system could be made interactive as well.
Breaking down the equation to simulate a Lemniscate/Figure 8 Curve/Infiinite Loop
mathematica() As I started developing an interest in forms created out of pure mathematical equations, my guide pointed me towards Wolfram’s Mathematica which hosts a plethora of illustrated equations and examples. This was a goldmine for me from which I borrowed many equations to simulate in my programs. Although many of these were illustrated on the website, I could use different representation techniques to depict them. This allowed me to create a whole new range of animations. w http://www.mathworld.wolfram.com
30 \
RE-GENERATE
iteration() Iteration is the act of repeating a process with the aim of reaching a desired goal, target or result. In programming-speak, it is also the act of running a loop certain number of times, each time with an incremented or decremented value of a particular variable. This variable can be used to index through arrays of data, define different positions on the screen or used for any purpose that requires change. Hence, this becomes essential to any kind of motion and variance on screen. Iteration in the context of generative art also becomes a core part of the creation process, wherein the parameters and values are being changed after every iteration, till something desirable is achieved or to create multiple variations using the same logic. Explorations based on the n-leaf rose, with different values for the constants a, b and k for every iteration in the equation, r = a+b*cos(k*t)
32 \
RE-GENERATE
mechanics.ofBeauty() I’ve always wondered what it is about beautiful things that we love. What makes certain forms and shapes beautiful? Why are we attracted to beauty? With regard to this project in particular, I constantly kept asking myself why forms generated with the precision of computational aesthetics appeal to me. What concerned me more is the apparent lack of meaning in such abstract, but beautiful forms. Krome Barrat, in the book Logic and Design talks about beauty as the coming together of individual units and forming a whole–and further makes an argument that a scientist is much more likely to use the word beautiful than an artist would. Studies show that the sight of an attractive object trigger the part of the motor cerebellum that controls hand movement. Instinctively, we reach out for attractive things; beauty literally moves us. In 2009, it was found that objects that have the golden ratio proportions are scanned the fastest by our eyes, so we prefer images that adhere to the golden ratio. Certain patterns such as fractals–self-repeating structures found in nature also have universal appeal. A specific fractal density is preferred by people which is neither too thick nor too thin. It is what feels just right. A similar mathematical density can be found in the paintings of Jackson Pollock. These patterns, just by virtue of being in our field of vision are capable of reducing stress levels by 60%. Hence, there is inherent mathematics to attraction–a scientific phenomenon that makes certain objects, shapes, forms universally beautiful. w http://www.nytimes.com/2013/02/17/opinion/sunday/why-we-love-beautiful-
things.html?pagewanted=all&_r=2&
34 \
RE-GENERATE
Epicalyptic Lines x = a*sin(t/k)+cos(t/k-1) y = a*cos(t/k)-sin(t/k-1)
equations.asBuildingBlocks() The mapping of an equation creates a path made by individual points. The same equation and methodology can result in multiple forms, which are essentially stills from an animation being drawn out by following the path created by the equation. This is achieved by varying the points on the path between which lines and shapes are drawn. The manner in which they are connected and manipulated is up to the artist. The choice of the basic element of representation and the starting point also can vary the result drastically.
36 \
RE-GENERATE
Chapter Three Epicalypse_
38 \
RE-GENERATE
epicalypse() Epicalypse comes from the combination of the words epi and calypse; epi is derived from a Greek preposition which means ‘toward’, and calypse from calypso which means ‘to conceal’ or ‘to hide’. These visuals were born out of wanting to simulate trails–or what is left behind. Motion is usually depicted with uneven fading straight lines behind the object that is moving. I wanted to extend this to see what would happen if the trails did not erase themselves. Like footsteps, if everything that ever moved left behind its imprint, it would get quite chaotic but always would give us an opportunity to understand the movement of objects. Celestial bodies, in particular have always fascinated me. Comets are said to be bringers of both life and death. They fly in space with their magnificient tails at great speeds. Sometimes, you wish you could bottle a comet up to see it fly around all the time.
Epicalypse x = a*sin(t/k)+cos(t/k-1) y = a*cos(t/k)-sin(t/k-1)
40 \
RE-GENERATE
42 \
RE-GENERATE
joy.ofCreation() My favorite part of the entire process was to watch as these forms took shape from nothing, based on written code. The order of perfect geometry, contrasted with the chaos of the controlled randomness; to see forms that followed physical phenomenon and mathematical logic was extremely fascinating for me.
44 \
RE-GENERATE
46 \
RE-GENERATE
48 \
RE-GENERATE
Epicalypse code run for about three minutes, with four lines of symmetrical rotating squares.
The same code run with four lines of asymmetric rotating squares.
50 \
RE-GENERATE
Chapter Four Time and Space_
52 \
RE-GENERATE
time.andSpace() The space–time continuum is any mathematical model that combines space and time into a single continuum. Spacetime is usually interpreted with space as existing in three dimensions and time playing the role of a fourth dimension that is of a different sort from the spatial dimensions. In relativistic contexts, time cannot be separated from the three dimensions of space, because the observed rate at which time passes for an object depends on the object’s velocity relative to the observer and also on the strength of gravitational fields, which can slow the passage of time. Taking from the same concept that combines the dimensions of space and time, the following have been generated by including the variable of time to generate the paths that the representational elements follow. The paths change with time, hence creating something unique everytime the code is run. The artworks also try to replicate the feeling of travelling through space and time.
54 \
RE-GENERATE
Astroid Curve x = acos3t y = asin3t
56 \
RE-GENERATE
58 \
RE-GENERATE
60 \
RE-GENERATE
62 \
RE-GENERATE
64 \
RE-GENERATE
Chapter Five Progression_
66 \
RE-GENERATE
progression() A progression is a sequence of numbers in which each term is related to its predecessor by a uniform law, or is a continued and connected series, or a succession of related chords in terms of music. Sound has been a major influencing factor for many generative artists. The popularity of abstract imagery in visual jockeying has strengthened the bridge between the two fields. The visuals in this chapter are an attempt to give form to sound. Just as there is a spectrum in the realm of sound that ranges between noise and harmony, these visuals also move through the same spectrum trying to give shape to the varying kinds of sounds.
68 \
RE-GENERATE
Progression y = sin((angle+=5))*ampcos(radians(angle+=4))*amp
70 \
RE-GENERATE
72 \
RE-GENERATE
Chapter Six Phooljhadi_
74 \
RE-GENERATE
phooljhadi() Phooljhadi is the Hindi word for a sparkle firecracker that burns slowly to emit coloured flames and sparks. I was writing custom trigonometric functions combining formulae together and ended up with a similar effect. The code draws lines from the center of the canvas to the paths created by mapping the input functions. When run over time, it creates a radial mesh of lines that begins to resemble the behaviour of a sparkler.
Evolutionary process of generating visuals–building one form on the basis of its predecessor
76 \
RE-GENERATE
Phooljhadi x = c*i*(cos(a*angle)*sin(b*angle))*k y = i*(sin(c*angle)+cos(d*angle))*k
78 \
RE-GENERATE
80 \
RE-GENERATE
Chapter Seven A Distant View_
82 \
RE-GENERATE
aDistant.view() This series was also created out of an accident. I was trying to simulate the form of a seashell, but in 2D using individual particles. Instead, I ended up with what looked like spaceways, and cosmic bodies seen from afar. This is a typical case where the creation of a particular image from autonomous particles is not predetermined, but evolves because of the behaviour of individual particles and their interaction with each other.
84 \
RE-GENERATE
Seashell x = [(1-v/2π)(1+cos(u))+c]cos(nv) y = [(1-v/2π)(1+cos(u))+c]sin(nv)
86 \
RE-GENERATE
Chapter Eight Image Processing_
88 \
RE-GENERATE
imageProcessing() Image processing is a form of signal processing where the input is an image. Signal processing deals with operations on, or analysis of time or spatially varying physical quantities, such as sound, image, sensor data, etc. In the case of image processing, signal processing techniques are applied to the input image, generally to derive new images as output. Photoshop and Instagram filters are applications of image processing. Since an image is a two dimensional array of pixels, any kind of operation on pixels transforms the original image.
90 \
RE-GENERATE
Images recreated by replacing pixels at equal intervals with basic shapes and colours picked from the original image.
92 \
RE-GENERATE
Compositions created by replacing pixels of existing images with vector icons (SVG format)
94 \
RE-GENERATE
Chapter Nine Making People Scream_
96 \
RE-GENERATE
makingPeople.scream() I always wondered how people created experiences that were felt, cherished, enjoyed and responded to. How does one captivate a crowd? How does art in public spaces work? The 33rd Convocation at NID gave me an opportunity to conduct a little experiment of my own that allowed me to see how people are brought together in a space, to perform a certain task–to undergo a certain experience that is designed for them. With the help of Pratheek Iravathur and Aaditi Rokade, and an extremely amateur knowledge of code, or any sort of interactive art, we set out to create a little experience for the visitors, as part of the exhibition.
CH AT T E R
Using Matt Pearson’s Sutcliffe Pentagons from his book Generative Art: A Practical Guide Using Processing, we designed a visualization which revolved around the concept of dispersion, which was the theme for the Convocation. Initially, we planned for it to be a conceptual visualization which would be projected in the assigned space, either on the walls, the floor, water fountains or shrubs. We wanted to experiment with the substrate on which the visualization would be projected. When we projected on the walkway, people started interacting with the visualization. The projected shapes interacted with people’s clothes, their movement, and their interaction amongst themselves.
V I S UA L I Z AT I O N
PR OJ E C T E D O N FLO O R
This made us want to figure out a way to make the projection dependent on the user’s actions. Giving people a little bit of control, and a responsive system captivates them. Our generative system gave users an opportunity to create unlimited visuals in real time using their voice inputs. All they needed to do was to interact amongst each other, shout, dance, or tell us how much they love this little installation of ours; and the system would generate visuals in accordance with the loudness of the voice input. So we basically ended up creating a sound visualizer using the Minim library that you find on your mp3 players, and projected it on a walkway. The only difference being that instead of the visualization being based on a song, it was based on real time audio input from the users.
I N PU T
I N PU T
O U T PU T
V I SUA L IZ AT I O N
PR OJ E C TO R
98 \
RE-GENERATE
100 \
RE-GENERATE
102 \
RE-GENERATE
Chapter Ten Learning & Resources_
104 \
RE-GENERATE
communityBased.learning() Open source softwares are relatively easier to pick up than any other skills mainly because of the extensive documentation that is bundled with them and the massive online community that comprises of professionals, students, and amateurs alike. There has recently been an emphasis on online learning and dissemination of knowledge through online platforms. Separating quality from quantity can be daunting but the answers are usually there, and well catalogued. I also found that the developer community is extremely open about their methods and processes. Platforms such as OpenProcessing allow for people to build upon code written by someone else and expect them to upload it
back onto the website for others to see and learn from what they have done. Learning itself brings people together–when they share a common goal, and find themselves in the same boat.
beginProcessing()
generativeArt.tools()
Online tutorials and basic concepts of Processing www.processing.org/learning
Philip Galanter’s list of resources www.philipgalanter.com/resources
List of books that deal with Processing and interactive graphics in great detail www.processing.org/learning/books
A list of Generative Art tools www.roshanratnayake.wordpress.com/ generative-art-tools
A platform to collaborate with the community and share Processing sketches www.openprocessing.org
Collation of links related to generative art, fractals and computation www.blog.hvidtfeldts.net/index.php/generativeart-links
Video tutorials covering the fundamentals and advanced topics www.plethora-project.com/2011/09/12/ processing-tutorials Amnon Owed’s blog dedicated to his experiments with Processing www.amnonp5.wordpress.com Daniel Shiffman’s online supplement of his book Learning Processing www.learningprocessing.com
Coding is not necessarily about building everything from scratch, but more like an assemblage put together to perform a certain task by modifying and putting in context bits and pieces (classes/functions/libraries) picked up from here and there. Most tasks that need to be performed commonly are usually already available in the form of libraries and patches. However, in order to be able to do this effectively, one needs to understand basic syntax and concepts of writing code.
An application for generating 3D structures www.structuresynth.sourceforge.net Visual framework built on top of ActionScript and Flash www.hypeframework.org A node based (users do not have to code) software for generative design www.nodebox.net
computationalAesthetics()
generativeArt.projects()
Showcase of artworks created with code www.artandcode.tumblr.com
A collection of generative art projects organized chronologically from 1999 to 2010 www.generative.net/links.cgi
Marius Watz’s blog on computational aesthetics www.workshop.evolutionzone.com MIT’s Aesthetics & Computation group www.acg.media.mit.edu Repository of various kinds of software art www.lab404.com/ghost Showcase of the usage of software in design, art and architecture www.formandcode.com A blog about computational systems and procedural art practices www.dataisnature.com
A PBS documentary on Generative Art www.youtube.com/watch?v=x0OK1GiI83s Matt Pearson’s 100 artworks with source code www.abandonedart.org Catalogue of art and technology based projects www.creativeapplications.net Curated collection of software based projects created with processing www.processing.org/exhibition Type+Code: Processing for Designers www.issuu.com/jpagecorrigan/docs/type-code_ yeohyun-ahn
mathAnd.geometry()
theoryAnd.conferences()
Extensive resource for all things mathematics www.mathworld.wolfram.com
Philip Galanter’s blog on Complexism www.complexism.blogspot.in
Beyond Geometry: experimentation in forms from 1940 to 1970 www.lacma.org/beyondgeometry
A digital magazine that concentrates on the impact of digital technologies on culture www.digicult.it
Notes on geometry with examples www.paulbourke.net/geometry
Golan Levin asks three questions to generative artists about meaning and abstraction www.flong.com/texts/essays/essay_generatorx
University of Georgia’s mathematics class page taken by Laura Singletary www.jwilson.coe.uga.edu/EMAT6680Fa09/ Singletary/Laura.html Geometry Inspiration www.geometrydaily.tumblr.com Logic and Design, Krome Barrat www.amazon.com/Logic-Design-RevisedScience-Mathematics/dp/1592288499
Design By Numbers deals with the philosophy and practicality of computational design www.amazon.com/Design-Numbers-JohnMaeda/dp/0262632446 A conference with emphasis on an academic and theoretical framework of generative art www.generativeart.com
106 \
RE-GENERATE
theWay.forward() Most of my time during the project was spent on working out the basics and conceptual frameworks of writing code. The output was merely a translation of basic mathematics into computer generated imagery. My main objective was to equip myself with programming knowledge so as to be able to integrate code into my workflow, as and when required. Ideally, the next step would be to apply this knowledge to give my curiosity a tangible form–explore its potential in simulating social, cultural and political phenomenon in order to develop a better understanding of human behaviour and the complexity of the world that we live in.
acknowledgements() Thanks to my guide and mentor, Mr. Rupesh Vyas, for letting me delve into an unconventional and unresolved off-shoot of graphic design and helping me in organizing my thought process. I would not have the courage to attempt to code if it was not for my four years of trying to pursue a computer science engineering degree, and the friends I made during that time who did not lose patience with my constant questioning and numerous attemtps to run away from all-things-code. Working with Pratheek Irvathur and Aaditi Rokade on the convocation installation proved to be a lot of fun. A special thanks to Deepak bhai and the kakas at the workshop who helped us set up the projector within a day’s time.
colophon()
contact()
Type set in Warnock Pro Captions and chapter headers in Myriad Pro Printed on 100 gsm buff paper Printed at Siddhi Printech
Akshan Ish +91 846 901 7051 akshan.i@nid.edu Project Blog www.generativeartproject.tumblr.com OpenProcessing www.openprocessing.org/user/23842
SKILL BASED PROJECT
RE-GENERATE An Exploration into Generative Art www.generativeartproject.tumblr.com AKSHAN ISH S1101106 PGDPD ‘11 Graphic Design National Institute of Design