Issuu on Google+

Hard Boiled World Wide Web and the End of the Distance Stanislava Predojevic

Chair for Computer Aided Architectural Design, Faculty of Architecture, ETH Z端rich


Hard Boiled World Wide Web and the End of the Distance Stanislava Predojevic

MAS Thesis Institute for Technology in Architecture Chair for Computer Aided Architectural Design Prof. Dr. Ludger Hovestadt ETH Z端rich December 2012.


content. preface 006- 019 expose yourself to a range of possibilities 020- 029 recognition an image 030-033 ostension geocoding 034-043 replica redrawing 044-063 invention [SOM] self organising maps 064-111 codes geocoding 112-117 [SOM] som engine 118-123 som node 124-125 som applet 126-131 literature 132-133


On Reading the City- Meta-Form “The city is not a closed determined system of signs. Nevertheless, the urban has the ability to appropriate signs, to produce them. Reading space, then, is interpretative work that understands experience as a learning process. In this way, the city itself becomes a learning organisation.� Upcycling of the mind feat. Henry Lefevbre


Starting from the postulate “the environment as we perceive it is our invention” (H. v Förster), the project departs from one’s personal experience, which is, as a collection of our memories, stored in symbols, personal maps of existing places, gathered, fragmented, rearranged and re-puzzled by different sets of rules. This triggered reflection on the world’s unity produce a vivid sketch of momentary spaces, real and unreal in the same time; countless diversification of concepts, contexts and desires. Mapping different moments of possibilities, playing with specific location and its density, complexity, topology, and on the other side with our perception and memories, we are able to create new arrangements depending on the direction we are facing.

“Situationists use of maps. Want to map the experience of the city ”fragmented, subjective, temporal and cultural” They recognised that the city was dynamic and changing that these maps would need to be updated and changed. These mappings also explored the “memory” of the city, they disagreed with the modernist “tabula rasa” approach.” Situationist International

How do we understand and navigate the space? How to locate yourself? Do we need an artefact to orient according to? Regarding the scale, what is the smallest and what is the biggest unit we deal with? And, what would be an appropriate reference for the comparison? It can be an artefact that embodies our aesthetic and ethic criteria and our way of thinking about the [city]space. It can be a building; any building we have passed by, been in, seen or used in any way. For instance: tag - building is our “interpretant” (C. S. Peirce) that contains within itself, names, places, situations and all the contradictoriness and complexity. And what is the function, shape or role of this building? What are the actions related to it? We can symbolise this real, physical environment which surrounds us and affects our senses, and use it to construct new possible scenarios, new ways to interpret different layers of the city. Merging of these symbols should be the result of intensive social “conflicts”, negotiations, solutions, choices and it can be more or less obvious but it always eschew from actions which have various meanings assigned. 008 |


towards producing new “multiplicity” Self organising maps [SOM] algorithm offers a new tool for rendering complexity, taking in consideration large amount of multidimensional data and transforming them in easily graspable one-dimensional field, composed of multiple boundaries, constraints and thresholds. To connect everything and be connected everywhere, is what makes that boundaries and distances to disappear and us to be aware of the coexistence of all this places in the same time. There are many ways how to combine these fragmentary orders and to organise them locally.

“The object of perception is immanently tied to its background; to the link of meaningful relations among objects within the world; each object reflects the other /much in the style of Leibniz’s monads/. Through involvement in the world- being in the world- the perceiver tacitly experiences all the perspectives upon that object coming from all the surrounding things of its environment, as well as the potential perspectives that object has upon the beings around it. Each object is a mirror of all others. Our bodily involvement with things is always provisional and indeterminate, we encounter meaningful things in a unified though ever open-ended world.” Maurice Merleau-Ponty, On Consciousness; The Primacy of Perception

Through the self-organising algorithm, buildings are reconstituted into a new entity, that now consist not only of objects, but also of events, ideas, activities; re-used to design new system of networks, boundaries, borders, constrains. Playing with different levels of dependence, exploring relationships between physical objects and the flows around them, we are able to construct new system of relations, a kind of new infrastructure. One building thus, can be considered as the smallest city unit, but on the other side, this city fragment can contain in its small scale a network of streets, roads, paths, squares, patterns of movements, usage of space and all the information city brings with itself, what implies “new” heterogeneity in scale, role, connections and the character, expression of the certain intensity. Departing from this specific part of the city we can always repeatedly ask ourselves what kind of atmosphere, mood and identity is to be achieved? | 009


This proposal implies work with references, images, google maps and open street maps morphing them further in grasshopper, rhino, processing, eclipse. It is a “manipulation” of the information with the freedom to interpret these inputs in any direction, without permanent and stable configuration. The process interweaves the rules, ambiguities, perception and choices by extracting social and spatial relations from the experience. Input data are based on statistical, written and visual sources, as well as on personal impressions and memory. Information is always related to the given state, and to what we assume could be important; clustered by activities and physical properties. Partly it is a documentary and a method to extract many indices for the invention of new concepts of organisation in a manner of self-referential space. As an initial variable, there is an image as a symbol of our perception, as a result of exposing oneself to a range of possibilities. Then the process is run by several following steps, referring to Umberto Eco’s modes of sign production: recognition- ostension- replica- invention; what leads us to the “invention”, emphasising the state of the impermanence.

010 |


physical labour required to produce expressions ratio difficilis

recognition

ostension

continuum to be shaped modes of articulation

invention

vectors

imprints examples samples

ratio facilis

replica

clues

fictive samples

symptoms motivated heteromaterial

congruences

stylisation

projections

combinational units

graphs

pseudo_ combinational units programmed stimuli

homomaterial

pre-established, coded and overcoded grammatical units according to different modes of pertinence

transformations

arbitrary heteromaterial proposed undercoded text

*

* Umberto Eco, A Theory of Semiotics; A typology of modes of sign production | 011


“Social relations result from experience. Experience includes reflection and learning. The urban as sublated, absolute form develops from actions, decisions, surface, volume.” Heinz von Förster, On constructing a Reality

012 |


experience- cognition- computation ( to reflect. to contemplate)

| 013


what are the consequences of all this in ethics and aesthetics?*

014 |

* Heinz von FÜrster, On constucting a Reality


| 015


the Ethical Imperative:*

016 |

*Heinz von Fรถrster, On constucting a Reality


act always so as to increase the number of choices.

| 017


the Aesthetical Imperative:*

018 |

*Heinz von Fรถrster, On constucting a Reality


if you desire to see, learn how to act.

| 019


expose yourself to a range of possibilities

020 |


| 021


viewed::: thought of

022 |


intrigued by::: rhythm, complexity, connections, relations, activities

| 023


an action to be taken.

024 |


an experience to be articulated.

| 025


to develop new theory of composition

026 |


composition::: improvised “choreography�

| 027


imagine no gravity

028 |


to produce multiplicities out of formal arrangements, of existing places and common perception

| 029


recognition. motivated heteromaterial imprints symptoms clues

030 |


an image. memory perception set of informations activities interests

| 031


z端rich- london- tokyo

032 |


*Random Flicker Photographies

| 033


ostension. homomaterial examples samples fictive samples

034 |


geocoding. processing. google maps. open street maps. orientation perception choice making relation to the environment

| 035


geocoding

036 |


pick any location--- convert the address--- define longitude and latitude

| 037


z端rich- london- tokyo

038 |


38.963048 85.693359

-0.100386 51.507538

35.667366 139.70786

| 039


35.667366 139.70786

35.667366 139.70786

35.667366 139.70721

35.667366 139.70775

35.667366 139.7071

35.667366 139.70764

35.667366 139.707

35.667366 139.70753

35.667366 139.707

35.667366 139.70743

35.667366 139.70732

35.667465 139.707

35.667564 139.707


35.667664 139.707

35.66806 139.70679

35.667763 139.707

35.66806 139.70668

35.667862 139.707

35.66806 139.70657

35.66796 139.707

35.66806 139.70647

35.66806 139.707

35.66806 139.7069

35.66806 139.70636

35.66806 139.70626


replica. relation-layers vectors stylisation combinational units pseudo-combinational units

044 |


redrawing. open street maps. osm xml files. rhino. grasshopper. elk plug-in. existing cities memories input. layers

| 045


<?xml version=”1.0” encoding=”UTF-8”?> <osm version=”0.6” generator=”CGImap 0.0.2” copyright=”OpenStreetMap and contributors” attribution=”http:// www.openstreetmap.org/copyright” license=”http://opendatacommons.org/licenses/odbl/1-0/”> <bounds minlat=”47.3657300” minlon=”8.5376200” maxlat=”47.3729300” maxlon=”8.5483500”/> <node id=”2114250” lat=”47.3623884” lon=”8.5473083” user=”t-i” uid=”52921” visible=”true” version=”68” changeset=”11502122” timestamp=”2012-05-04T20:45:14Z”> <tag k=”highway” v=”traffic_signals”/> </node> <node id=”2114251” lat=”47.3629541” lon=”8.5469795” user=”zwis” uid=”177149” visible=”true” version=”67” changeset=”9842876” timestamp=”2011-11-16T10:11:25Z”/> <node id=”2114253” lat=”47.3642810” lon=”8.5461739” user=”t-i” uid=”52921” visible=”true” version=”12” changeset=”10725843” timestamp=”2012-02-19T00:35:03Z”> <tag k=”highway” v=”traffic_signals”/> </node> <node id=”2114258” lat=”47.3663449” lon=”8.5449710” user=”zwis” uid=”177149” visible=”true” version=”6” changeset=”9753528” timestamp=”2011-11-06T09:22:55Z”> map of zürich open street maps: osm.xml file

046 |

elk plug-in rhino. grasshopper


plan of z端rich extracted layers

| 047


048 |

grasshopper definition for reading the osm.xml file


| 049


050 |

grasshopper definition for translating the osm.xml file into the text file


| 051


z端rich- london- tokyo

052 |


| 053


tag. buildings.

054 |


| 055


z端rich::: catalogue of buildings

056 |


| 057


london::: catalogue of buildings

058 |


| 059


tokyo::: catalogue of buildings

060 |


| 061


space city

062 |

area

paths

nodes

networks


constraints

extract data

define environment

| 063


invention. congruences projections graphs transformations

064 |


invention. som. eclipse. actors. places. actions. relations. time. any with any. production of multiplicities. formal arrangements. existing places. eigen perception. a scene behind the scene.

| 065


areas.

066 |


| 067


ratios.

068 |


| 069


rearranging london.

070 |


| 071


rearranging london.

072 |


| 073


rearranging z端rich.

074 |


| 075


rearranging tokyo.

076 |


| 077


rearranging tokyo.

078 |


| 079


z端rich- london- tokyo

080 |


| 081


082 |


| 083


to educate. to learn. to live. to work.

zĂźrich::: ETH hĂśnggerberg + ETH center

084 |


+

| 085


086 |


| 087


tag. buildings.

*HIF

*ETHZ

*HIR

*HIK

*ETH HDB

*HEZ

*HPF

*HPM *HPK

*HIP

*HIL

*HPL

*HPT *HPI *HCI

*HPR

*HPZ

*HPW *HPP

*HPH *HPV

*HPS

088 |

+


*ETH Z端rich Main Building

| 089


090 |


| 091


to educate. to learn. to live. to work.

092 |


| 093


to educate. to learn. to live. to work.


to pray. to search. to choose. to believe. to rule.

*Grossm端nster

*Fraum端nster *Wasserkirche

z端rich::: stadthausquai + limmatquai

096 |


| 097


to pray. to search. to choose. to believe. to rule.

*The Guild Church of St. Martin Within Ludgate

*St. Paul’s Church

*The Church of St. Ann Blackfriars *The Grange St. Paul’s

london::: st. paul’s

098 |


| 099


to pray. to search. to choose. to believe. to rule.

*Imperial Garden

*Imperial Household

*Imperial Palace

tokyo::: imperial garden

100 |


| 101


102 |


| 103


to pray. to search. to choose. to believe. to rule.


z端rich- london- tokyo


110 |


| 111


geocoding.

112 |


String intro = “http://maps.googleapis.com/maps/api/”; String loadPath=”/Users/Stasa/Documents/ETH MAS/Thesis/codes/zurich/codes/london”; int wid = 1200; int hei = 600; int counterX = 0; int counterY = 0; float coord1 = 51.507637; float coord2 = -0.100486; String location; int zoomVal = 18; String zoom; int sizeValSTAT = 800; String imgSizeSTAT; String imgSizeSTREET; int fovVal = 90; String fov; int headingVal = 10; String heading; int pitchVal = 10; String pitch; String sensor = “&sensor=false”; String mapType = “&maptype=satellite”; String staticMap = “staticmap?center=”; String streetView = “streetview?location=”; int divideX = 4; int divideY =6; float step = 0.0001; int sizeValSTREETX = (int)(wid/2)/divideX; int sizeValSTREETY = (int)hei/divideY; PImage STAT; PImage STREET; PImage[][] slideShow = new PImage[divideX][divideY];

| 113


void setup() {

}

println(sizeValSTREETX); println(sizeValSTREETY); size(wid, hei); background(0); initialize();

void draw() { image(STAT, 0, 0); for (int y=0;y<height;y+=(int)height/divideY) { for (int x=width/2;x<width;x+=(int)(width/2)/divideX) { if (slideShow[(x-(width/2))/sizeValSTREETX][y/sizeValSTREETY]!=null) { image(slideShow[(x-(width/2))/sizeValSTREETX][y/sizeValSTREETY], x, y, sizeValSTREETX,sizeValSTREETY); } else { stroke(200,200,random(255)); rect(x,y,(width/2)/divideX,height/divideY); } } } } void keyPressed() { } }

}

}

114 |

if (key==’s’) { save(loadPath+”save”+millis()+”.png”); println(“Image Saved!”); if (key==’x’) { System.exit(0);

else if (key == CODED) { incrementCounters(); if (keyCode == UP) { coord1+=step; println(coord1); initialize();

else if (keyCode == DOWN) { coord1-=step; println(coord1); initialize();


}

}

}

}

else if (keyCode == LEFT) { coord2-=step; println(coord2); initialize(); else if (keyCode == RIGHT) { coord2+=step; println(coord2); initialize();

void initialize() {

location = coord1+”,”+coord2; zoom = “&zoom=”+zoomVal; imgSizeSTAT = “&size=”+sizeValSTAT+”x”+sizeValSTAT; imgSizeSTREET = “&size=”+sizeValSTREETX+”x”+sizeValSTREETY; fov = “&fov=”+fovVal; heading = “&heading=”+headingVal; pitch = “&pitch”+pitchVal;

String STAT_URL = intro+staticMap+location+zoom+mapType+imgSizeSTAT+sensor; String STREET_URL = intro+streetView+location+imgSizeSTREET+fov+heading+pitch+sensor; STAT = loadImage(STAT_URL, “png”); STREET = loadImage(STREET_URL, “png”); slideShow[counterX][counterY] = STREET; } void incrementCounters() { counterX+=1; if (counterX==divideX) { counterX=0; counterY+=1; } if (counterY==divideY) { counterY=0; } } void printValues() { println(“counter X = “+counterX); println(“counter Y = “+counterY); }

| 115


116 |


| 117


SOM engine.

118 |


package som; import java.util.Vector; public class SOMEngine { public SOMEngine(int nX,int nY,int nWeights){ this.nX = nX; this.nY = nY; this.nWeights=nWeights; } public SOMNode[][] neurons; public double START_LEARNING_RATE = 0.07;

private float LATTICE_RADIUS; private float TIME_CONSTANT; public int maxIterations = 500; public int iteration = 0; int nX; int nY; int nWeights;

public void setup() { neurons = new SOMNode[nX][nY]; for (int x = 0; x < nX; x++) { for (int y = 0; y < nY; y++) { SOMNode node = new SOMNode(x*1.3f, y*1.3f, nWeights); neurons[x][y] = node; } } LATTICE_RADIUS = Math.max(nX, nY) / 2f; //System.out.println(“LATTICE_RADIUS: “+LATTICE_RADIUS); TIME_CONSTANT = (float) (1f*maxIterations / Math.log(LATTICE_RADIUS)); } public void setupHex(float d,boolean yAlt) { neurons = new SOMNode[nX][nY]; float pX=0; float pY=0; for (int x = 0; x < nX; x++) { if (yAlt){ if (x%2==0)pY=-d; else pY=d; } for (int y = 0; y < nY; y++) { if (!yAlt){ if (y%2==0)pX=-d; else pX=d; } | 119


SOMNode node = new SOMNode(x+pX, y+pY, nWeights); neurons[x][y] = node; } } LATTICE_RADIUS = Math.max(nX, nY) /2f; System.out.println(“LATTICE_RADIUS: “+LATTICE_RADIUS); TIME_CONSTANT = (float) (1f*maxIterations / Math.log(LATTICE_RADIUS)); //System.out.println(“TIME_CONSTANT: “+TIME_CONSTANT); } public SOMNode getBMU(double[] input) { SOMNode bmu = null; double minD = 10000000; for (int x = 0; x < neurons.length; x++) { SOMNode[] colNeuron = neurons[x]; for (int y = 0; y < colNeuron.length; y++) { SOMNode n = colNeuron[y]; double cD = n.getDistWeightSqr(input); if (cD < minD) { minD = cD; bmu = n; } } } return bmu; } public SOMNode getBMU(double[] input,Vector<SOMNode>nodes) { SOMNode bmu = null; double minD = Double.MAX_VALUE; for (int x = 0; x < nodes.size(); x++) { SOMNode n = nodes.get(x); double cD = n.getDistWeightSqr(input); if (cD < minD) { minD = cD; bmu = n; } } return bmu; } public SOMNode getBMUNoObject(double[] input) { SOMNode bmu = null; double minD = Double.MAX_VALUE; for (int x = 0; x < neurons.length; x++) { SOMNode[] colNeuron = neurons[x]; for (int y = 0; y < colNeuron.length; y++) { SOMNode n = colNeuron[y]; if (n.object==null){ double cD = n.getDistWeightSqr(input); 120 |


if (cD < minD) { minD = cD; bmu = n; } } } } return bmu; } public void removeObjects() { for (int x = 0; x < neurons.length; x++) { SOMNode[] colNeuron = neurons[x]; for (int y = 0; y < colNeuron.length; y++) { SOMNode n = colNeuron[y]; n.object=null; } } } public Vector<SOMNode>getNodesAsList(){ Vector<SOMNode> nodeList=new Vector<SOMNode> (); for (int x = 0; x < neurons.length; x++) { SOMNode[] colNeuron = neurons[x]; for (int y = 0; y < colNeuron.length; y++) { SOMNode n = colNeuron[y]; nodeList.add(n); } } return nodeList; } public void train(double[] weights){ double learningRate = this.getLearningRate(); double nbRadius = getNeighborhoodRadius(); double maxD = nbRadius * nbRadius; SOMNode bmu = getBMU(weights); int xstart = Math.max((int) (bmu.getX() - nbRadius - 1),0); int ystart = Math.max((int) (bmu.getY() - nbRadius - 1),0); int xend = Math.min((int) (xstart + (nbRadius * 2f) + 2),nX); int yend = Math.min((int) (ystart + (nbRadius * 2f) + 2),nY); for (int x = xstart; x < xend; x++) { SOMNode[] col = neurons[x]; for (int y = ystart; y < yend; y++) { | 121


SOMNode cN = col[y]; double d = cN.getDist2DSqr(bmu); if (d < maxD) { double dFallOff=getDistanceFalloff(d, maxD); double facAdap = learningRate* dFallOff; cN.adapt(facAdap, weights); } } } } public void train(Vector<double[]> input) { for (int i = 0; i < input.size(); i++) { double[] weights = input.get(i); train(weights); } iteration++; } float maxC=0; float minC=Float.MAX_VALUE; public void calculateContrast(){ maxC=0; minC=Float.MAX_VALUE; for (int x = 0; x < neurons.length; x++) { SOMNode[] col = neurons[x]; for (int y = 0; y < col.length; y++) { SOMNode fp = col[y]; int nNb = 0; float sumD = 0; for (int nX = x - 1; nX < x + 2; nX++) { for (int nY = y - 1; nY < y + 2; nY++) { if (nX >= 0 && nX < neurons.length && nY >= 0 && nY < col.length && (nY != y || nX != x)) { SOMNode nb = neurons[nX][nY]; nNb++; sumD += fp.getDistWeight(nb.weights); } } } fp.contrast = sumD * 1f / nNb; if (fp.contrast > maxC) { maxC = fp.contrast; } if (fp.contrast < minC) { minC = fp.contrast; } } }

122 |


for (int x = 0; x < neurons.length; x++) { SOMNode[] col = neurons[x]; for (int y = 0; y < col.length; y++) { SOMNode fp = col[y]; fp.contrast=(fp.contrast-minC)/(maxC-minC); } } } private double getNeighborhoodRadius() { return LATTICE_RADIUS * Math.exp(-iteration/ TIME_CONSTANT); } private double getLearningRate() { return START_LEARNING_RATE * Math.exp(-(double) iteration / maxIterations); } private double getDistanceFalloff(double distSq, double maxD) { return (Math.exp(-(distSq) / ( 2f*maxD))-0.6f); //-0.6f //return Math.exp(-(distSq) / ( maxD)); } }

| 123


SOM node.

124 |


package som; public class SOMNode { public double[] weights; public float x; public float y; public float contrast; public Object object; public SOMNode(float x,float y,int nWeights){ this.x=x; this.y=y; weights=new double[nWeights]; for (int i=0;i<weights.length;i++){ weights[i]=Math.random(); } } public double getDist2DSqr(SOMNode s){ double dX=x-s.x; double dY=y-s.y; return dX*dX+dY*dY; } public double getDist2D(SOMNode s){ return Math.sqrt(getDist2DSqr(s)); } public double getDistWeightSqr(double[] cWeights){ double sumW=0; for (int i=0;i<weights.length;i++){ double dW=weights[i]-cWeights[i]; sumW+=(dW*dW); } return sumW; } public double getDistWeight(double[] cWeights){ return Math.sqrt(getDistWeightSqr(cWeights)); } public void adapt(double fac,double[] cWeights){ for (int i=0;i<weights.length;i++){ double dW=cWeights[i]-weights[i]; weights[i]+=(dW*fac); } } public float getX() { return x; } public void setX(float x) { this.x = x; } public float getY() { return y; } public void setY(float y) { this.y = y; } }

| 125


SOM Applet.

126 |


package som; import java.lang.reflect.Array; import java.text.DecimalFormat; import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.Vector; import processing.core.PApplet; import processing.core.PFont; import processing.core.PVector; public class SOMPApplet_japan3 extends PApplet { Vector<Building>buildings=new Vector<Building>(); String data[]; String loadPath=”/Users/Stasa/Documents/ETH MAS/Thesis/codes/renders/”; PFont f; float[] xx; float[] xval; //perimetar float[] ang; //angle float[] yval; //ratio boolean record = false; SOMEngine som; Vector<double[]> randomColors; int count = 0; public void loadBuildings(){ buildings=new Vector<Building>(); String[] data= loadStrings(“/Users/Stasa/Documents/ETH MAS/Thesis/ codes/eth_nodes.txt”); Building currentBuilding=null; for (int i=0; i<data.length; i++){ String line=data[i]; if (line.contains(“;”)){ currentBuilding=new Building(); buildings.add(currentBuilding); } else if (line.contains(“{“)){ line=line.replace(“{“,””); line=line.replace(“}”,””); String[] coords=line.split(“,”); float x=Float.valueOf(coords[0]); float y=Float.valueOf(coords[1]); float z=Float.valueOf(coords[2]); PVector pt=new PVector(x,y,z); currentBuilding.nodes.add(pt); } } } | 127


public void loadAngle(){ ang= new float[data.length]; String[] data= loadStrings(“/Users/Stasa/Documents/ETH MAS/Thesis/ codes/eth_angles.txt”); for (int i=0; i<data.length; i++){ String line=data[i]; float angle=Float.valueOf(line); float normAngle = norm(angle, 1,360); Building currentBuilding=buildings.get(i); currentBuilding.data[0]=angle; ang[i] = normAngle; } } public void loadYvalues(){ yval= new float[data.length]; String[] data= loadStrings(“/Users/Stasa/Documents/ETH MAS/Thesis/ codes/eth_y.txt”); for (int i=0; i<data.length; i++){ String line=data[i]; float yvalues=Float.valueOf(line); float normYvalues = norm(yvalues, 2,197); Building currentBuilding=buildings.get(i); currentBuilding.data[0]=yvalues; yval[i] = normYvalues; } } public void loadXvalues(){ xval= new float[data.length]; String[] data= loadStrings(“/Users/Stasa/Documents/ETH MAS/Thesis/ codes/eth_x.txt”); for (int i=0; i<data.length; i++){ String line=data[i]; float xvalues=Float.valueOf(line); float normXvalues = norm(xvalues, 2,192); Building currentBuilding=buildings.get(i); currentBuilding.data[0]=xvalues; xval[i] =normXvalues; } } public void setup() { size(500, 1000, P2D); f= createFont (“Helvetica-Light-11”, 1); data= loadStrings(“/Users/Stasa/Documents/ETH MAS/Thesis/codes/ eth_areas.txt”); xx= new float[data.length]; for (int i=0; i<data.length; i++){ xx[i]=Float.valueOf(data[i]).floatValue(); } 128 |


som = new SOMEngine(100, 200, 3); som.setup(); randomColors = new Vector<double[]>(); for (int i=0;i<data.length;i++){ randomColors.add(new double[]{xx[i],255,255}); } loadBuildings(); loadYvalues(); loadXvalues(); loadAngle(); for(int i = 0; i < buildings.size(); i++){ Building b = buildings.get(i); b.data[0] = yval[i]; b.data[1] = ang[i]; b.data[2] = xval[i]; } } public void draw() { background(255); if (record) { beginRaw(DXF, “output” +millis()+ “.dxf”); } if (count < som.maxIterations) { //Collections.shuffle(buildings); for (int i=0;i<300;i++){ int randomIndex=(int)random(buildings.size()); Building building=buildings.get(randomIndex); som.train(building.data); } for(int i = 0; i < buildings.size(); i++){ Building building=buildings.get(427); som.train(building.data); } for(int i = 0; i < buildings.size(); i++){ Building building=buildings.get(427); som.train(building.data); } count ++; } strokeWeight((float) 0.05); stroke(255,255,255); float scaleF=(float) 2; scale(scaleF); | 129


fill(0,0,0); textSize(5f); //DecimalFormat df = new DecimalFormat(â&#x20AC;&#x153;####.##â&#x20AC;?); for (int i=0;i<buildings.size();i++){ Building building=buildings.get(i); SOMNode node=som.getBMU(building.data); PVector center=building.getSimpleCenter(); pushMatrix(); translate(-center.x+20,-center.y+20); translate(node.x*scaleF,node.y*scaleF); //text(df.format(ang[i]),node.x,node.y); //translate(width*0.5f/scaleF,height*0.5f/scaleF); building.display2D(); popMatrix(); if (i==23){ fill(158,0,93); } else { fill(0,0,0); } } if (record) { endRaw(); record = false; } } class Building{ ArrayList<PVector>nodes=new ArrayList<PVector>(); String city; double[]data=new double[3]; public PVector getSimpleCenter(){ PVector center=new PVector(); for (int i=0;i<nodes.size();i++){ PVector n=nodes.get(i); center.add(n); } center.div(nodes.size()); return center; }

130 |


public void display2D(){

beginShape(); for (int i=0;i<nodes.size();i++){ PVector n=nodes.get(i); vertex(n.x,n.y); } endShape(); } } public void keyPressed(){ if(key==’s’){ save(loadPath+”save”+millis()+”.png”); } if(key==’x’){ System.exit(0); } if (key == ‘d’) { record = true; //println(“pdf exported”); } } }

| 131


132 |


literature. - Bachelard G. (1994) The Poetics of Space, Beacon Press, Boston - Diener R, Herzog J, Meili M, de Meuron P, Schmid C. (2006) Switzerland an Urban Portrait, Introduction, ETH Studio Basel, Contemporary City Institute, Birkha端ser- Publishers for Architecture, Basel-Boston-Berlin - Diener R, Herzog J, Meili M, de Meuron P, Schmid C. (2006) Switzerland an Urban Portrait, Borders, Communes, A Brief History of the Territory, ETH Studio Basel, Contemporary City Institute, Birkha端ser- Publishers for Architecture, Basel-Boston-Berlin - Diener R, Herzog J, Meili M, de Meuron P, Schmid C. (2006) Switzerland an Urban Portrait, Materials, ETH Studio Basel, Contemporary City Institute, Birkha端ser- Publishers for Architecture, Basel-Boston-Berlin - Eco U. (1978) A Theory of semiotics, Indiana University Press, Bloomington - Lefebvre H. (1996) Writings on Cities, Blackwell, Oxford - Merleau-Ponty M. (1964) The Primacy of Perception, And Other Essays on Phenomenological Psychology, the Philosophy of Art, History, and Politics, Northwestern University Press - Sanders Pierce C. (2006) Theory of signs, http://plato.stanford.edu/entries/peirce-semiotics/ (22. Jan 2013) - Sanders Pierce C. (2012) Semiotic elements and classes of signs, http://en.wikipedia.org/wiki/Charles_Sanders_Peirce (22. Jan 2013) - Situationist International, http://www.cddc.vt.edu/sionline/ (22. Jan 2013) - Sign, http://en.wikipedia.org/wiki/Sign (22. Jan 2013) - von F旦rster H. (1973) On Constructing a Reality, An Abbreviated version of a lecture given at the opening of the fourth International Conference on Environmental Design Research on April 15, 1973, at the Virginia Polytechnic Institute at Blacksburg, Virginia, http://cleamc11.vub.ac.be/Books/Foerster-constructingreality.pdf (22. Jan 2013)

| 133


ETH Z端rich Institute for Technology in Architecture Master of Advanced Studies Chair for Computer Aided Architectural Design Prof. Dr. Ludger Hovestadt Hard Boiled World Wide Web and the End of the Distance Stanislava Predojevic Research mentors Prof. Dr. Ludger Hovestadt Dr. Phil. Vera B端hlmann Programming guidance Benjamin Dillenburger Li Li Nikola Marincic MAS Thesis December 2012.


/////// ////////// //// // / // / / // // // / // // // //////// ////// ////// //// ///// Institute of Technology in Architecture Faculty of Architecture / ETH Zurich

Chair for Computer Aided Architectural Design [CAAD] / Prof. Ludger Hovestadt ETH Zurich / Building HPZ / Floor F

Schafmattstrasse 32 / CH-8093 Zurich/ www.caad.arch.ethz.ch


ETH Z端rich Institute for Technology in Architecture Chair for Computer Aided Architectural Design Hard Boiled World Wide Web and the End of the Distance Stanislava Predojevic 136 |


Hard Boiled World Wide Web and the End of the Distance