PERFORMATIVE ARCHITECTURE STUDIO AMEER HAMZA KHAN 397418
UNIVERSITY OF MELBOURNE
1
CONTENTS INTRODUCTION PROCESSING MAX/MSP/JITTER FINAL INSTALLATION PROPOSALS - INITIAL CONCEPT - FINAL DESIGN CONCEPT VLS COMPETITION REFLECTIONS
2
3 -4 4-14 15-18 19-24 25-26 27-32
SOFTWARES LEARNED
INTRODUCTION_
Processing A coding software based on Java language intended to teach visual designers basic computer programming. It is a program from which digital sketches are produced and can be further developed into sculptural forms. Cycling 74’s Max 5 Visual language software developed in 1987 to get input from different hardwares which in turn can be used to get a number of outputs from other equipment. It is the main interface which controls hardware and makes the sketches produced interactive. Autodesk Maya Offers a range of functions, but in the context of this studio it was used to produce blob like forms for the inflatable structure.
Autodesk 3Ds Max It was used for rendering of images, animations, and mapping and to unwrap geometry to make models for the inflatable structure. Adobe After Affects and Premium These softwares were used for the final editing of videos produced from Max 5 during tutorial sessions. Minor editing of animations was also carried out for high quality outputs. 3
Studio began with a basic introduction of generative forms and understanding of digital design. For a greater grasp on these theoretical ideas some introductory exercises in processing were given. This task introduced us to basic programming knowledge and interaction between user and the processing sketch using computer mouse. In the meanwhile, a workshop was conducted on Max 5 by Roger Alsop followed by some tasks. These tasks help us in realizing the potential of Max 5 and to distinguish between the 2 different types of computer programming languages. Unlike Processing, Max 5 is a visual programming language based interface. This makes it easier to use for beginners but is difficult to use when it comes to producing sketches from it. It is good to use when it comes to getting live feed from cameras, microphone and controlling other external hardwares. The same tasks can be done using processing but a lot of libraries are to be downloaded which makes the code complex and difficult to control. Processing is good at producing computer sketches but the programming concepts are a bit difficult to grasp for beginners. After basic understanding of both softwares more complex tasks were assigned to build on the initially developed concepts. To support these ideas and uses of these softwares in developing form in architecture some websites, forums, books and AD journals were recommended for reading. Processing sketches which initially didn’t seem to be related to architecture at all started to make sense and seemed like a useful tool to be used in future for designing. While learning these softwares we were also encouraged to learn basic modeling techniques in Maya, mapping techniques in 3Ds Max and to learn to use video editing softwares for better outputs of the animations produced. All this work was then uploaded to various websites so that we can get instant feedback from our peers, tutors and other professionals on those websites. Since all studio work was available online so it provided an opportunity for a self-check. The outcome of the studio was to produce an installation while exploring all the concepts that were developed using different digital media. After discussing some initial ideas with the tutor final proposal for installation was developed. To support these ideas some models were made using plastic bags to present inflatable structures. These discussions helped in realizing the limits when carrying out a project practically and also the problems which has to be overcome while working on final installation in the coming weeks. From week 7 to week 8 we worked on VLS mapping competition. This exercise was useful in exploring the softwares learned to a greater extent. This introduced the idea that how Processing sketches can be used directly in architecture rather than using them as a form deriving software. After week 8 group work started which focused on in-depth exploration of ideas developed in the starting weeks. They are discussed in the group section of the journal.
4
_CHRONOLOGICAL DEVELOPEMENT_
PROCESSING_ TASK 01 TASK 02
AGENTS FOLLOWING LIGHT AUDIO VISUALISATION INTERACTION USING CAMERA
Generates circles on x-axis Generates circles on y-axis
Algorithm used to effect circle sizes
5
Steps were followed from a pseudo code to make the following sketches, provided to us by our tutors. The sketch consists of a grid of overlapping circles next to eachother. Where ever the cursor goes on the sketch the size of circles overthere reduces. More the distance from the cursor of a circle, bigger the size of the circle.
C u r s o r Positions
C e n t r e
L e f t
R i g h t
C e n t r e
L e f t
R i g h t
Original sketch from pseudo code
C u r s o r Positions
By changing the number of ellipse in the x and y-axis another sketch is generated with a very different output.
C u r s o r Positions
C e n t r e
L e f t
R i g h t
C e n t r e
L e f t
R i g h t
Replacing the circles by cubes, a different effect is achieved.
C u r s o r Positions
Using else and if to the original code to change the color of the boxes after every 100 pixels on x-axis.
C u r s o r Positions
6
C e n t r e
L e f t
Removed the outline of cubes and reduced transparency to improve colors.
R i g h t
_TASK_01_
This task is a continuation of Task 1, aimed at a deeper understanding of complex functions in processing. This task consist of making agents with different behaviours in Processing using the pseudo code provided to us on www.crida.net website. These agents produced were to have different behaviours relative to eachother, such as collision with eachother, attraction, velocity and movement.
Used Toxiclib library to make classes and assign different behaviour to ellipse to get a complex
Used ArrayList to make multiple number of ellipse, whose behaviour can then be controlled.
Velocity changes randomly between 1 and -1 on x and y axis.
Original sketch from pseudo code
7
Inreased the velocities on x-axis to have more random movemnt.
Made 2 ellipses of different sizes and colors to have a complex behaviour.
This task was very useful. It revealed the true powers of the processing software. By loading libraries into the processing more functions can be added to it according to our requirements. By using agent system as simple as this one revealed how it can be used in architecture. These agents can be used to simulate humans in an urban design scheme, can be used to inject different moods or can be as simple as just producing interesting graphics. 8
_TASK_02_
In an attempt to make processing sketches interactive an in-depth research in the Processing software was required. To give input to Processing software hardware like camera or microphone was used. This input was then manipulated and used to effect sketches.
Sketch downloaded from http://www.generative-gestaltung.de/
Original code with changes to make it interactive. FrameRate set is 30. By keeping this 900, it means screen clears after every 30 seconds. Used the library processing.video to activate camera from processing. The original code used mose for interaction. It was replaced by position of light in front of camera. This part of code first changes the screen to grey scale and then finds out the brightest point.
11
_Final Outcome_
Camera detecting light.
Light source.
Due to the new additions to the code it now follows the direction of light as captured from the camera. Since, in a room camera captures light from all the directions so the movement of the sketch is very random . Thus, different patterns can be generated by using thesame code. This code was developed while working on the proposals for final installation. The intention was to use this code for the final installation may be not this particular sketch. 12
_AGENTS_FOLLOWING_LIGHT_
This sketch was developed while working for VLS mapping competition. The purpose was to make a sketch which would respond to direct music input, such as songs. Then the track which was to be used for VLS competition can be loaded into the sketch and mapped directly onto the provided geometry.
Library loaded to load the song into the sketch.
Original sketch downloaded from www.processing.org
Name of the track inside the code.
Screenshots of the sketch taken after every 20 seconds while it was playing a song by the singer Pink.
13
_AUDIO_VISUALISATION_
Move gallery; People start to interact with eachother after they are linked together with a strip of band for 1 minute. The artwork is as simple as just a static band. Precedent
The part of the code which is calculating the difference in saved image and the current one.
The sketch from scratch based on the precedents as mentioned. This sketch was to be used for the final installation proposal This sketch saves an iamge when clicked for the first time, then shows the saved image when clicked again and on third left mouse click the sketch activates. As from original saved image whatever will be the change in the final image that will be calculated by the sketch and replaced by a black circle. Technical issues were resolved but due to limitation of time aesthetics were not addressed properly. 14
_INTERACTION_USING_CAMERA_
This was a basic introduction given to us by Roger Alsop on the interface of MAX/MSP. It helped in understanding the basic functions of this software. It is a good software for audio and video editing as well as for tracking different objects.
MAX 5_ TASK 01 TASK 02 TASK 03
A basic introduction to MAX/MSP by Roger Alsop for video capturing.
The above patch captures the video from the camera of the laptop and shows it on the screen . The button escape can be used to make it fullscreen or back to normal size.
15
_TASK_01_
Turns the video on as the toggle is turned on.
Slider used to mix the 2 videos.
Fades both of the movies into eachother to get a final result.
Used to record videos in .mov format.
Final result using the above patch.
Slider in middle.
Slider fading 1st video.
Slider fading 2nd video.
Slider in middle.
The above patch can also be used to take feed from 2 cameras which can then be overlapped. It can be a form of interaction which has potential to engage users.
16
_TASK_02_
A complex patch in which previously done excercises are used to produce this final patch. It is a very basic way to effect the output from the camera by taking the input from a microphone.
Divides the video feed into 3 columns and 3 rows.
Is used to change brightness, contrast and saturation of a video.
It is used to encapsulate a portion of a patch to reduce the amount of commands in a particular window
Zooms in a particular window of the video feed.
17
Microphone takes sound input from the speakers which in turn effects the saturation in the patch of the video.
This tutorial patch is made in a workshop conducted by Roger Alsop. It shows the basic ways for interaction in an easy approach. The patched can then be mixed with other patches or encapsulated into one another to get more complex and desired results.
18
_TASK_03_
Following are some precedents for inflatable structure which lead the way to the intial design.
FINAL INSTALLATION PROPOSAL_
Dynamic Inflatables
Static Inflatables
-INITIAL DESIGN CONCEPT -FINAL DESIGN CONCEPT
Air Forest by Mass Studies Form
Project done by UTS students Patterning
WhiteOut by Space Opera Form Movement of people make static sheets dynamic.
Precedents from other fields
As can be seen from the picture, smoke disperses light. Agents from processing sketch can be projected into the smoke. This will project agents into a 3D field. People can then experience them in space , touch them and walkthrough them.
19
Lighting
Duchamps non-retinal art. Produced by overlaying pictures over eachother.
_Design Proposal_ This execercise was useful in making us realise of our limitations while designing inflatable structures. Also, to put things to practical use which were learned uptil now.
As a person enters inside the room he will pass through a cloud of smoke with agents projected in it.
Then there are layers of curtains with projection on it.
There is maze of inflatables. If a person is in certain area the cylinders there will deflate informing others of someone’s presence. The colors of lights will change accordingly which will be reflecting people’s mood in the labyrinth.
20
_INITIAL_DESIGN_CONCEPT_
Following are some precedents for interactivity between people and structure which lead the way to the final design.
Paradise Under Surveillance There’s a spotlight on ceiling which randomly selects a spectator who enters the space and follows them within the space. This allowas spectators to move randomly in attempt that light stops following them. The interesting thing about this installation is that it is very simple yet makes people to interact with the artwork. D-Tower This tower changes its colors based on the responses of people to a questionnareon internet. Daily emotions of the people of the city are then represented through colors. Another simple example of how a building interacts with its inhabitants.
Studying working of human body for interaction
As human body has different parts but functions as one unit. In the same way the ideas was to make an inflatble functioning like a human body. 21
_Final Design_ Processing sketches to be used
This vein pattern projected on floor gets more intense as people get closer to it. The sound of heartbeat also gets more intense. As a person enters lines are created on floor from the corner of the room to the person, which follows them.
As more people enter lines are created between people and to the boundaries of the room. People can move around and change the geometry formed on floor. For one person
For more than one
3D renders fo the final proposal
heart
As more people enter heart glows stronger with sketch on floor spreading
over the room.. 100 wordmoredescription of how installation will function for a concrete participant/visitor..
1. Participant enters the space; a dot is created which starts to follow them. 2. As more participants enter a lines are created between them. Also, a set of 4 dim lines is created between the participants and the room. 3. There is an inflatable blob in the center of the room shaped like a heart. As more people move closer to it, heart beat speed increases and veins on floor their length increases. The light inside the heart also starts to go on and off more rapidly, connected with the sound. 4. From here people can move into another space through a series of random strips. People can crawl under it, jump over or just walk in. 5. There will be 4 inflatable walls behind with projections on it and people can walk through them. 22
_FINAL_DESIGN_CONCEPT_
_RECIPE_ HOW TO MAKE AN INFLATABLE USING PLASTIC BAGS MATERIALS_ _ Plastic bags _ Balloons _ Double sided tape _ Masking tape _ Glue _ Sellotape _ Scissors _ Paper Cutter _ Hair dryer _ Iron PROCESS_ _ Rough sketches _ 3D Models
23
First attempt at making inflatable model. It is too big, not to scale and out of proportion.
In this second attempt, 2 tunnels were made and connected to one big blob at the end. This was done to study the connections between 2 or more inflatables at one junction.
Inflatable wall made out of plastic bag as proposed in the design. It was tested with projections, but they didn,t look as good as they do on opaque ones.
Finalised shape for inflatable structure which consists of a more controlled and to the scale size. First part is a long tunnel with a big inflatable area for inflatable walls at the end.
24
_FINAL_DESIGN_CONCEPT_
VLS MAPPING COMPETITION_ People are forced to have a look around the geometry by agents moving around and then the artists creates the city out of it.
http://www.youtube.com/watch?v=Lx8MRsEVRmU
In another installation, artist again starts to make people aware of the complex geometry present and then continues with his concept.
25
http://www.youtube.com/watch?v=Ka-bXxax3Yc
1. I began my video with making people aware of the present geometry by highlighting different boxes all over the composition.
2. Then a sketch appears and fades out whose movement is synchronized with the music to make viewers aware of the music that is being played.
3. After 30 seconds another sketch appears with random agents which arrange themselves to form a cityscape.
4. The final sketch with cityscape comes up. Light glows up one by one on all the horizontal surfaces. Ambient light gets dimmer to give impression of nighttime.
26
_VLS_MAPPING_COMPITETION_
In this semester a lot was learned in a very short period of time. I learned about 9 different softwares while working individually and more while working in a group for Interactive Narrative Team. In the start it seemed like we were jumping from one thing to anther but now I think it was the most efficient way to learn what was required in the time that was there.
REFLECTIONS_
Processing:
Studio began with learning processing. It’s a computer programming software which provides use with the opportunity of doing whatever they desire. More and more libraries can be loaded and its range of functions can be extended. Unlike other architecture softwares Processing is like an empty canvas which can do whatever the artist desires. It can make generative forms for the user like the following sketch, or just one which is required. It has this ability to translate any form of data into visual images. This makes it very strong software with limitless options and interesting area to explore. Processing and its capabilities have always inspired me. As the idea of making architecture interactive with its inhabitant’s interests me so I always tried to use processing to make interactive sketches rather than using it as a form deriving software. This is why most of my achievements with processing were technical rather than visual. Within the time provided even technical issues were difficult to overcome. But being architecture student aesthetics cannot be ignored. I should have gone after one good idea and developed that more instead of running after all the random ideas which were coming to mind and were merely out of the excitement of exploring this new area. I now feel that approach might have been more productive.
Different forms can be generated by using the code as provided for the sketch aboe by just pressing spacebar. The “random” command in Processing allows to generate various forms which might not even have been anticipated by the code writer himself. 27 http://www.openprocessing.org/visuals/?visualID=16833#
www.biothing.org
er
The form on left as shown by images above is derived from Processing software. The final model made using a 3D cutter. For fututre I would like to continue exploring the idea of interaction in architecture with interesting form derivation using generative softwares like Processing itself.
Max/MSP/Jitter: Most of the Max 5 which can actually be put to practical use for interaction was learnt during group work while working with Interactive Narrative Team. My interest to explore the idea of interaction in architecture more lead me to choose this team to work in for final installation. Max is easy to use software which can be used to control hardware, manipulate that data input to get controlled or unpredictable output from other hardware equipment. There was a range of equipment provided to us for our final installation. We used light sensors and cameras to take input from the people involved, manipulated and connected this input as data for lights, sound and processing sketch.
I see the skills learned while doing this installation as a first step towards my interest in interactive architecture. Instead of just changing colors of light and sound I would like to explore the idea of changing forms as people interact with the architecture. In exploring the idea of interactivity more I took building sustainability as an elective because in sustainable buildings some of these interactive ideas are already being applied e.g. computers taking in weather input and moving facades accordingly and HVAC systems changing temperatures after measuring room temperatures. 28
_REFLECTIONS_
3D Softwares: A lot of Maya was used to make the geometry for inflatable structures. Maya is software used for character modeling. So this makes it good for blobby forms as for inflatable structure. 3Ds max unwrapping and mapping materials was used while working on VLS mapping competition. Both of these softwares have their own cons and pros. They are good for presenting final work but are not as useful in a design process. I came across using Rhino and Grasshopper while working on lantern for Interactive Narrative Team. Grasshopper provides much more flexibility and opportunity to help designers out in their design phase. Like for this project a basic code was written in Grasshopper after which points were moved on a curve to get various other forms. Also final output from Grasshopper is parametric i.e. various options can be generated by just changing some parameters. One of many reasons I joined this studio was to see how an architectural design process proceeds when you work in a group. The outcome when working in a group is much more polished as expected but what I was not expecting was the inability to come to a final design decision. There were always too many ideas and too many contradictions to settle on one thing. This is one of the reasons our Geometry Team was not able to finalize the design within the time period decided. Lantern for final installation was designed with the help of Geometry and Fabrication teams. This small project gave me a taste of working in both these teams and trying to come to a final design decision. It was always difficult to convince everyone so finally we decided not to show our design to anyone and just make something. This approach turned out is very helpful and much more productive. Another interesting thing for me in this lantern project was to see how a design evolves from something basic and develops into something complex and much more sophisticated. PRECEDENTS FOR LANTERN
LED gloves, would give people control on the tip of their fingers.
29
Acrylic boxes looks like fire, goes with our theme and are elegant.
Burble, Singapore by Usman Haque. Ballons with LEDs.
Wooden lamps with lights in them. Instead of wood a basic structure can be formed using acrylic and cloth used to make inflatable can be wrapped around that structure.
INITIAL EXPERIMENTATION L E D B a l l o o n s
INTERNAL STRUCTURE DRAWINGS
Getting inspired from Jas Johnston’s paper model in CRIDA this form was derived. The idea was to take it further and use inflatable structure cloth to use as a skin. INFLATABLE CLOTH WITH LIGHTS
After this experimentation we realsied that acrylic has an elegance of its own and have good light reflecting properties. So it was decided to make a lantern in perspex only.
30
_REFLECTIONS_
CONSTRUCTION DRAWING
Holes to put in thread to hold the lantern.
Ribs curving inwards to hide the inner core and for the desired lighting effects
Central core containing battery pack, LEDs and switch.
Discs holding holding the ribs and the central core together
Removable disc so that batteries can be changed when required.
3D COMPUTER MODEL 31
_FINAL_OUTCOME_
32
_REFLECTIONS_