Programming Course

Chapter 10

Programming and Architecture

You have now gained insight into many programming concepts and two programming languages. Important at this point is that you realize what the steps are to make further progress in programming and how programming and architecture relate to each other. In this chapter two aspects are presented. First some currently important programming languages are listed and then some examples of "New Spaces" are introduced.

10.1 Programming Languages

The following table shows the characteristics of a number of currently (Fall 1997) important programming languages.
LANGUAGEIS GOOD FOR SPECIAL CHARACTERISTICS
LISPArtificial intelligence.
Manipulation of symbolic content
interpreted language,
variables are treated like symbols, they can change their type.
C++Standard language for graphics and most bigger applications. object-oriented,
needs compiling,
many libraries for different applications are available.
VRML 2.03D Models for the WWW script-like, does not support many powerful programming concepts
JAVASCRIPTenhance WWW-pages Integrated into HTML.
Netscape Navigator specific, Explorer supports a variant called JScript.
JAVAApplications that should run on different platforms needs compiling but nonetheless runs on most platforms
PHPConnect databases and WWW-pages Integrated into HTML. Executed once, when the page gets loaded.
PHP can connect to many known databases and generate html pages on the fly.
PERLText analysisexcellent language to analyze input from WWW-pages,
the code may be hard to read because of the special form of the expressions and the special characters.

Here are examples of code of each language. Try to read and understand them. If you do not succeed you may want to look up reference pages for that language on the internet. Once you understand the code, you will be able to manipulate it and teach yourself the new language by looking up more information on the internet.

All the examples are also on-line, where you can try out their effects. The next step would be to understand the concepts that are supported by each language. This will help you to chose the right one for any task you are trying to fulfill.

VRML

DEF myscene Transform
{
 children [
  DEF toucher TouchSensor {},
  DEF timer TimeSensor { cycleInterval 5 }
  DEF mover PositionInterpolator { key [0, 1]
                                   keyValue [0 2 0, 0 -2 0]
                                 }
  Shape {
   appearance Appearance {
    material Material {
     diffuseColor      0.95 0.0 0.3
    }
   }
   geometry Cone {}
  }
 ]
}

JAVASCRIPT

var now = new Date( )
minutes = now.getMinutes( )
if (minutes%5>=5){
 document.write("<BODY BGCOLOR =#2101d3>")
} else if (minutes%5>=4) {
 document.write("<BODY BGCOLOR =#e6d163>")
} else if (minutes%5>=3){
 document.write("<BODY BGCOLOR =#6ccd4b>")
} else if (minutes%5>=2){
 document.write("<BODY BGCOLOR =#47d280>")
} else if (minutes%5>=1) {
 document.write("<BODY BGCOLOR =#19d424>")
} else {
 document.write("<BODY BGCOLOR =#88f4cf>")
}

JAVA

AudioClip rain = null;

String    clipname = "rain.au";

public void load()
{
   rain = getAudioClip(getCodeBase(), clipname);
}

void doAction(String action)
{
    if (action == null) return;
    String a = action.toLowerCase();
    if (a.indexOf("loop") >= 0) rain.loop();
    if (a.indexOf("stop") >= 0) rain.stop();
}

PHP

<HTML>
<HEAD><TITLE>php_example</TITLE></HEAD>
<? if (!$red); $red="00"; endif;>
<? if (!$green); $green="22"; endif;>
<? if (!$blue); $blue="44"; endif;>
<BODY bgcolor=<? echo ($red); echo($green); echo($blue);>text=ffffff>
Hallo, please define a new background-color with rgb values:<p>
<FORM ACTION="php_example.phtml" METHOD=POST>red:<br>
<INPUT TYPE=TEXT NAME="red" value= <?
echo ($red)> SIZE=+0 MAXLENGTH=2><p>green:<br>
<INPUT TYPE=TEXT NAME="green" value=
<? echo ($green)> SIZE=+0 MAXLENGTH=2><p>blue:<br>
<INPUT TYPE=TEXT NAME="blue" value=
<? echo ($blue)> SIZE=+0 MAXLENGTH=2><p>
<INPUT TYPE=SUBMIT NAME="run" VALUE="recolor page">
</FORM>
</BODY>
</HTML>

PERL

%in = &read_input;
$in{'last_name'} =~ tr/abcdefghij/1234567890/; $in{'last_name'} =~ tr/klmnopqrst/abcdefghij/; $in{'last_name'} =~ s/(.)/ $1 /gi; $in{'last_name'} =~ s/([a-z])/<sup>$1<\/sup>/gi; $in{'last_name'} =~ s/([1,3,7,9])/<sub>$1<\/sub>/gi; $in{'last_name'} =~ s/([2,4])/<font color=ff0044>$1<\/font>/gi; $in{'last_name'} =~ s/([6,8])/<font color=ff0044>$1<\/font>/gi; print "<B><H2><BLINK>hallo </BLINK>", $in{'first_name'}; print "<P>\n"; print "oops - Dein Nachname ... <P><CENTER><FONT SIZE=7>\n"; print $in{'last_name'}; print "</FONT></CENTER>", print "<P>... ist etwas durcheinandergeraten\n";

10.2 New Spaces

The so-called "virtual reality" (VR) is one aspect of new spaces that we are able to create nowadays, and it widens the field of architectural tasks tremendously.

The viewing and interacting with Virtual reality (VR) depends on computers. Therefore virtual worlds and the possible interactions always need to be described to a machine through some kind of machine understandable language. Because VR is a new and complex field, many ideas cannot yet be realized with simple VR tools, but need to be programmed with languages like C++ and libraries like Inventor.

There are other kinds of spaces, beyond the virtual 3D-Spaces, that are becoming interesting. These are abstract spaces with a conceptual content, e.g. social space and economic space, such spaces are wrapped by the force field of special interests. Space can be formed with any media. Space, if viewed more generally, is information and information is space. Because the design of information is very complex, needs to be well structured without getting too banal, and has some spatial components to it, the notion "Information Architecture" got coined.

The following examples show some "new spaces" starting with VR examples and ending with pure information architecture.

10.2.1 Time and Space

In virtual reality not only objects are virtual, but also time. Time is not linear anymore, one can move into the past or the future, speed up time or make it slower, and map time to form, or vice versa.

SCULPTOR: Form as a function of time (David Kurmann)

10.2.2 Show the Non-Real

In virtual reality things that could not exist in reality can still be shown. Non-realistic features can be used to display additional information about realistic features. For example: Walls can become transparent to display the plumbing, parts can start to blink to draw the user's attention, foreign elements can show up to illustrate something.

VR is famous for evoking new sensations through displaying the unrealistic, which is as important a part of a virtual design as the realistic. Design in VR is architectural design, it is spatial and much more. Think of the extreme possibilities of VR: Walls can morph into landscapes, one can fly through solid parts, or the size of objects does not match with one's experience. Such ideas may sound scary, but if they are designed well, they allow new and interesting experiences.

A Jenny Holzer interpretation by Florian Wenz and students

10.2.3 New Environments

The exhibition "Archaeology of the Future City" at the Museum of Modern Art in Tokyo, Japan collected ideas from all over the world. TRACE was the contribution from the chair of Architecture and CAAD by Florian Wenz and Fabio Gramazio.

Explanations and Information can be found at: http://caad.arch.ethz.ch/trace .

TRACE: programmed in C++ with Inventor. (Florian Wenz and Fabio Gramazio)

The interactions between natural systems (City) and virtual systems (Internet) are not very well understood, because there is not yet a common descriptive language. An important function of virtual worlds is thus, to act as a mediator between these coexisting worlds. In this direction we propose a new concept for the city. The name of the installation is TRACE. TRACE generates spaces by registering activities by local and networked visitors and by interpreting and representing them. The substance and the gene code of the space is therefore formed by the history of the visitors' activities.

The energy that creates TRACE is the motivation for the individual visitor or client to represent her or himself by leaving TRACEs and to read and interpret TRACEs of other visitors. The space that can be experienced represents the state of the system at the time of the login. It emerges through a constant information exchange between a database, which stores and indexes the TRACEs through an event agent, and a geometry generator which displays them.

TRACE only shows isolated segments or sections of the entire system in very much simplified iconographic representations. Those icons depict the activities of the visitors and the resulting matrix of perception. The most important modes are always immersive (interior spaces, private) and transparent (external space, public). TRACE is therefore not a typical simulation, although it utilizes many simulation techniques. (Florian Wenz)

10.2.4 Information Architecture

The courses territorium, phase(x) and fake.space are good examples of information architecture. They all provide a common networked environment for the students. Every individual piece of work becomes part of the whole.

Territorium is a second semester mandatory course, where the students first documented a geographical situation with the computer in HTML and then designed a special room, a VRML model, for the digital environment.

In phase(x) principles of CAAD are taught in ten phases. After each phase a model is handed in. For the next phase every student has to continue with the model of someone else. In this way memes (ideas) get promoted throughout the participants.

Fake.space is a growing system, the name refers to the fact that the rooms represented digitally are not the physical rooms. The students add nodes in an associative way so that the resulting formation can be experienced as a narrative, associative sequence.

The core of each system is a database, were information gets collected. Special functions and interfaces allow the user to access this information in different ways. We like to distinguish between "inworld" views and "outworld" views. Inworld views allow the user to navigate from one node in the system to the next. Outworld views give different kinds of overviews, like a 2D map corresponding to a geographical situation in territorium, or a graph of the growth of the system in fake.space.

Functions can interpret the information stored in the database and generate new information, like counting the memes in phase(x) or the total time spent for the exercises by one student.

Graphical interfaces can go even further, they can display information in a way that a person can make further, more creative, interpretations, which the machine could hardly do on its own. For example the "new terr" interface in territorium, which clusters the items according to a graphical query. Or the sequences in phase(x), where the user could search for the memes that get transported from the first to the last exercise.

For the implementation of these systems a lot had to be programmed. Thereby the technical possibilities were less important than the concepts that could be realized. The novelties these environments bring into our courses are a higher motivation of the students, more visibility about the courseware done, and collaboration among the participants.

10.3 Exercise 10 - Add some Action

The next task is to add some action to your object.

In the previous exercise you have programmed an object and inserted it in the scenegraph, when the object was selected it was lifted up into the air. This time you will add a selection function.

You have to decide what changes the object should go through. In order to program this you will change the "selectionAction"-function in "student.c++". If you want the object to be returned to its old state on deselection, all nodes that you insert have to be grouped under a separator or group node by the name of "_CHOSEN". If you want the change to be permanent you can insert a node anywhere under the top node of your object. The _CHOSEN node has to be inserted under all circumstances, whether it has an effect or not. Here are some ideas that could be explored:

- scale your model

- insert text nodes for additional information

- add spotlights and motion

- add a counter variable that keeps track of how many times the object has been selected, which then influences the way the object reacts

There are a lot of possibilities. If you produce a node, which you would like to find again later, give it a special name. It is possible to create very complex object behaviour. As mentioned before the strength of Inventor is not only the modelling of objects but also the visualisation of concepts or ideas.

Copy parts from exercise 9 to exercise 10:

These are the necessary steps to copy the object from your previous exercise to this one:

- Copy the lines of code you have written or changed in the file student.c++ in exercise9 to the file student.c++ in exercise10. Don't copy the whole file, because some other functions are different now.

- If you have added other functions, you need to copy those too, from both files student.c++ and student.h.

- Copy the SGI Image.

- Run addOne.pl, in order to make the necessary changes in student.h and exercise10.c++

Now everything you had in exercise9 should be working, make the test by compiling and running it.

Program the action to be taken when clicking on your object

- the code has to be added to student::selectAction(SoSelection *selected). Make it a child of action, i.e. action->addChild(yournode) if it should not be permanent.

- Remember to include the .h-file for any new kind of node.

- Start with something small, like a translation or adding text. Test the modification by compiling and running exercise10. And then take the next step.

- Use the online books to see examples of program code.

Hand in:

Please upload three files:

student.h the header file with the declaration of the new objects
student.c++ the c++ programming code

and a GIF image with a snapshot of your object.

Examples:

example1: ADDING TEXT non-permanently

    // Choose a font
SoFont *myFont = new SoFont;
myFont->name.setValue("Times-Roman");
myFont->size.setValue(24.0);
action->addChild(myFont);

 // add a Seperator so that the translation is not applied to the object

SoSeparator *infoSep = new SoSeparator;

 // Translation so that the string is in front of the object

SoTranslation *infoTrans = new SoTranslation;

 // TEXT2 = screen alligned text, no change in size, no rotation

SoText2 *infoText = new SoText2;
infoTrans->translation.setValue(.25,.0,1.25);
infoText->string = "I'm a not chair";
infoSep->addChild(infoTrans);
infoSep->addChild(infoText);
action->addChild(infoSep);
example2: MOVE THE OBJECT permanently

SoTranslation *move = new SoTranslation;
move->translation.setValue(1.0,.0,.0);
selected->insertChild(move, 1);