Page 1


The Glasgow School of Art Digital Culture 2013-14 student: Georgios Karampelas tutor: P. Maguire

INTRODUCTION The visualization of things has been one of the vital elements in Arts and Architecture. Since ancient times, human tries to capture the environment in which he lives or seeks to create new territories through his imagination. The tools that he uses to do so have radically changed during the last century. Humanity saw the shift from pen and paper to digital design tools. Computers may have not managed to expand our imagination but have definitely managed to illustrate even the phenomenically undepictable. The last decade, computation has become part of the digital toolbox of the artist/designer and has created a new “scripting culture”1. Designers are now setting relationships between different elements, defining hierarchies and parameters . They are striving to map controversies and integrate contradictions under the same design solution. A new design language has emerged as terms such as recursion, loop, iteration, aggregation are part of the architect’s vocabulary. This essay investigates the data visualization possibilities that scripting -and more specifically Processing software- offers to the designer. A connection is established between imagesourced data and point-cloud morphologies as a means of “image-scape” visualization.

below: “Et in Arcadia Ego”, N.C.Poussin, painting, 1638



The idea of scape has been evolved through the centuries. From the classical perception of the static landscape, the one bounded with nature, we shifted to the perception of surface as landscape. The globalized phenomenon of urban densification has expanded our consideration on the definition of landscape. The contemporary, post-modern citizen reconsiders the borders between natural and artificial, between analogue and digital. Thus, the urban territory, the building’s form, the squares and pavements of a city became the landscape of the past century. The last decades, the rise of computer networks, the surveillance monitors and the virtual reality have shifted the point of interest from the real to the virtual. It was a matter of time until the first digital landscapes would appear. Amazon is the contemporary equivalent of the ancient Market, while Facebook can be considered as a digital translation of Agora, ancient Athen’s social meeting place. LANDSCAPE Landscape has been a reference point both in Art and Architecture since the very begining of history. Architects and designers have always struggled to confront with landscape, establish a relationship between their creations and the natural, the existing, the eternal. It is often related to Utopia, the ideal of the imagined place or state of things in which everything is perfect. As stated by Cesare De Seta: “landscape, even before becoming an actual representation in the figurative sense, is a place in the mind, a way of thinking the real”2. So landscape can be seen as a field of relations and interractions never firmly definable and comprehensible but in a constant negotiation with the human world and the natural. This unstable and dynamic relation between matter and force, has found its utmost expression on Waddington’s Epigenetic Landcape, a metaphor of how gene regulation modulates development.3 Epigenetic Landscape is a landscape that conditions the evolution of forms set upon it and forms that condition the evolution of the landscape.

above: Waddington’s “epigenetic landscape” sketch, 1957

Matter, according to Herni Bergson, is made up of “modifications, perturbations, changes of tension or of energy and nothing else”4.The forms of life differ from this only in their greater complexity of organization and their capacity to overcome torpor, for both are immersed within the same universal stream of duration and constitute not different entities, but rather different modalities, of a single elan vital... The epigenetic landscape is far from deterministic: on the contrary, it actually absorbs and renders creative all contingency5. This idea of non-linearity and unstability, theoretically supported by the writings of Deleuze and Derrida, will make architects of the last decades to experiment with topology and compexity. SURFACE Probably surface is the most direct analogy/ metaphor of landscape within architecture. In its very nature, a surface is in an unstable condition. For where are its boundaries? What is its status? Is it structure or ornament?6 below: Yokohama Port Terminal, Foreign Office Architects, Japan, 2007

In contemporary architecture there is a shift from object to field, in order to integrate in the design process terms such as complexity, chaos, fluidity and discontinuity. This has led to the redefinition of the ground as a site of continuous flux and transformation from figure to ground. Architects now conceive of any change of the landscape as a manipulation of the surface. (FOA, Reiser+Uwemoto etc). Thus, nowadays we are living a topological approach towards design, an emphasis on the geometry of the form and the complexity that it can express. The theory of Catastrophes of Rene Thom freely interpreted to show how progressively more rapid application of effort, especially in the expansion phase, may lead to a transition from ‘near equilibrium’ conditions to successive population crashes. Catastrophe theories have thus constituted the idea of the surface as something much more fragmented and discontinuous.

above: diagrammatic illustration on R.Thom’s catastrophe theory right: Lorenz system, illustrating chaotic conndition

FLATNESS Flatness and surface could seem to be equivalent terms in an architectural context. But flatness actually refers to the paper or screen upon architectural design is projected while surface relates to issues that develop as architecture is being built, to the three-dimensional space.7 If depth is but another surface, nothing is profound. This does not mean that everything is simply superficial; to the contrary, in the absence of depth, everything becomes endlessly complex.8 Marcos Novak describes the computer screen as an “interactive, intelligent surface-a hyper-

surface”9. Although seeming two-dimensional, in reality screen has spatial and temporal dimensions into which someone has the ability to interract with in a virtual space. This space is depicted through the series of continuously changing “matrix of physical pixels”. The recent emergence of interractive spaces, responsive screens etc. has increased our experience in relation to two-dimensional elements and proved that flatness has little to do with superficiality.

IMAGE AS SWARM Image constitutes the basic way of communication, possibly even before language. Visual communication is direct and worldwide. The rise of the society of Information, with the domination of newspaper, television radically changed the way we communicate. The addition of personal computer and Web in our everyday life constituted this communication even more direct, fast and dynamic. Analogue technologies of reproduction work through imprints, traces or transfers. Although the image may be scaled or changed( negative etc.), its iconic form remains the same10. On the contrary, when an image is converted to digital information “digital technology atomizes and abstractly schematizes the analogic quality of the photographic and cinematic into discrete pixels and bits of information that are transmitted serially, each bit discontinuous, discontiguous, and absolute- each bit “being in itself ” even as it is part of a system”11. The fragmentation of an image into its smallest components-pixels- makes easier the manipulation of a series of characteristics such as hue, saturation, color, brightness etc. Moreover, in a computational environment these data can be handled in an holistic way in order to achieve an increased level of complexity at the outup of the editing process.

Today, architects are formulating different responses to image and its (re)production in the information age. From the iconism of post-modern culture we are moving towards a more pattern-oriented approach towards image and the reproductions of it.

above: Screenshot from Minecraft game, originally created by Markus Persson, 2009. next: swarm formation

TRANSCODED LANDSCAPE void setup() { size(1024, 768, OPENGL); noFill(); values = new int[width][height]; img = loadImage("nasa-iceberg.jpg"); //Extract the brightness of each pixel in the image //and store in the "values" array img.loadPixels(); for (int i = 0; i < img.height; i++) { for (int j = 0; j < img.width; j++) { color pixel = img.pixels[i*img.width + j]; values[j][i] = int(brightness(pixel)); } } } void draw() { background(0); translate(width/2, height/2, 0); scale(4.0);

// Set black background // Move to the center // Scale to 400%

// Update the angle angle += 0.005; rotateY(angle);


// Display the image mass for (int i = 0; i < img.height; i += 2) { for (int j = 0; j < img.width; j += 2) { stroke(values[j][i], 153); float x1 = j-img.width/2; float y1 = i-img.height/2; float z1 = -values[j][i]/2; float x2 = j-img.width/2; float y2 = i-img.height/2; float z2 = -values[j][i]/2-4; line(x1, y1, z1, x2, y2, z2); } }


The idea was drawn by a piece of code as bublished in the Form+Code book/website under the title Tranform Landscape. The script loads a topographic image from which it extracts the brightness value for each pixel. Then, for each pixel of the initial image a vertical line is designed, the length of which corresponds to the brightness value of the pixel.

MY CODE import peasy.*; PeasyCam cam; PImage img; int[][] values; float angle; void setup() { size(850, 943, P3D); cam = new PeasyCam(this, 1000); values = new int[width][height];


// Extract the brightness of each pixel in the image // and store in the “values” array img = loadImage(“moon.png”); img.loadPixels(); for (int i = 0; i < img.height; i++) { for (int j = 0; j < img.width; j++) { color pixel = img.pixels[i*img.width + j]; values[j][i] = int(brightness(pixel)); } }

void draw() {


background(255); // Set background //Update the angle strokeWeight(3); // Display the image mass for (int i = 0; i < img.height; i += 2) { for (int j = 0; j < img.width; j += 2) { float x1 = j-img.width/2; float y1 = i-img.height/2; float z1 = values[j][i]/4; float c = map(z1, 0, 255, 0, 255); stroke(0); if (z1 != 0) { point(x1, y1, z1); } } }

void mousePressed() { saveFrame(“frame-######.png”); }


heightmap image

processing image




EPILOGUE Scripting opens a whole new world both for art and architecture. Designers are no longer restricted by the capabilities of software programs. They are writing code in order to solve problems and push their expression to the limits. Although at the very beginning scripting requires a shift in the mentality of the user that seems quite demanding, the more time spent in front of the code the more clearer and understandable become both the design task and the solution. DISCUSSION / FURTHER WORK In this essay, the idea of “imagescape” is investigated as a contemporary, digital analogy of the classical notion of landscape. Nowadays, pixels are formulating digital imagery, are transfering messages to the worldwide users and are the basic element that consists everything from digital painting, electronic advertisements and architectural drawings and 3D modelling. Each pixel has a single value, a specific colour that has no meaning by itself. A thousand of pixels combined together constitute something much more important, an image, a sketch, a plan or a message. Moreover, if these same pixels,through the use of programming are extruded according to their value, they reveal a different aspect for the image they depict. This way of visualization, an in-between phase, neither two-dimensional but not three-dimensional also, has an important impact as it is transfering the idea of depth without becoming representative but with mantaining its graphical character. The series of digital sketches that accompany this essay are trying to explore different possibilities for the very same concept of what I call “imagescape”. In the Heightfield, Mooon and Alaska sketches, I investigate my belief that this idea can be used by architects in order to relevantly quickly visualize topographical maps and designs. Not that there are not

numerous software programs that can do this already, but when this task is made by the use of a user-friendly scripting environment such as Processing, the designer has the ability to intervene into the code quickly, make alterations and enhance the final outcome. The Hello Steve sketch uses a portrait photo of Steve Jobs in order to explore a scenario where two-dimensional photos could create a hologram-like effect. This idea could have a much more interesting application if as input could be used a camera instead of a static image. Let imagine a Skype conversation where the user’s face starts to become three-dimensional! There are many more things that could be further explored and are not included here, what is important is that writing code is a stepped process where someone can built more and more on his own knowledge while simultaneously incorporating pieces of code from others in order to achieve the final outcome.

REFERENCES 1. Burry M. (2011) Scripting Cultures, AD Magazine (August), Wiley 2. De Seta C. (1982) Il paessaggio, Einaudi, Torino 3. Goldberg, A. D., Allis, C. D., & Bernstein, E. (2007). Epigenetics: A landscape takes shape, Cell 4. BergsonH. (1911) Matter and Memory, Swan Sonnenschein, London 5. Kwinter S. (1992) Landscapes of Change, MIT Press 6. Gregory P. (2003) New Scapes: territories of complexity, Birkhauser 7. Imperiale A. (2000) New Flatness: surface tension in digital architecture, Birkhauser 8. Taylor, I. (1997) “Crime and Social Insecurity in Europe”, Criminal Justice Matters, 27 (Spring) 9. Novak M.(2004) “CV Essay,” at CENTRIFUGE website: 10. Allen S. (1997) From Object to Field, AD Magazine, May-June, Wiley 11. Sobchak V. (1990) The Scene of the Screen: Towards a phenomenology of Cinematic and Electronic presence’, Post-Script 10


Glasgow School of Art | Digital Culture 2013-14 | Processing


Glasgow School of Art | Digital Culture 2013-14 | Processing