|
|
| (129 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| − | __TOC__
| + | __NOTOC__ |
| − | | + | |
| | <div style="float: left; width: 1200px; margin-right:20px; text-align:left"> | | <div style="float: left; width: 1200px; margin-right:20px; text-align:left"> |
| | | | |
| − | [[File:header2.jpg|1200px]] | + | __NOTOC__[[File:gesamt3.gif| frameless | 1200px | ]] |
| | | | |
| | | | |
| Line 10: |
Line 9: |
| | <br> | | <br> |
| | | | |
| − | <div style="float:left; width: 280px; margin-right:20px; text-align:justify"> | + | <div style="float:left; width: 220px; margin-right:20px; text-align:justify"> |
| − | =<span style="color:orange">INTERFACE</span>= | + | =<span style="color:orange">Interface</span>= |
| | | | |
| − | [[File:flow.gif|280px|left|casual-user interface]] | + | [[File:page03.jpg|220px|left|casual-user interface]] |
| − | | + | |
| − | <br>
| + | |
| | | | |
| | + | <div style="float:left; width: 220px; margin-right:20px; text-align:justify"> |
| | The interface design has three steps of functionality which relates to three user-types: the casual user, the advanced user and the administrator. Through this design decision Spacebook provides for the needs of different characters. | | The interface design has three steps of functionality which relates to three user-types: the casual user, the advanced user and the administrator. Through this design decision Spacebook provides for the needs of different characters. |
| | | | |
| − | [[project C:Home#USER_INTERFACE_2|read more >>]] | + | [[project C:ALL#INTERFACE|read more >>]] |
| | | | |
| | + | </div> |
| | </div> | | </div> |
| | | | |
| − | <div style="float:left; width: 280px; margin-right:20px; text-align:justify"> | + | <div style="float:left; width: 220px; margin-right:20px; text-align:justify"> |
| | | | |
| − | =<span style="color:orange">STRUCTURE</span>= | + | =<span style="color:orange">Structure</span>= |
| | | | |
| − | <youtube width="280" height="220" right >2WsdfWw3IoE</youtube> | + | <youtube width="220" height="145" right >awMrVLLNx2g</youtube> |
| | | | |
| | + | <div style="float:left; width: 220px; margin-right:20px; text-align:justify"> |
| | The architectural implementation uses a system of inflatables which have the advantage of being lightweight ultimately reducing the dead-loads while at the same time providing adequate stiffness and flexibility. | | The architectural implementation uses a system of inflatables which have the advantage of being lightweight ultimately reducing the dead-loads while at the same time providing adequate stiffness and flexibility. |
| | | | |
| − | [[Project C:Home#STRUCTURE_2|read more >>]] | + | [[Project C:STRUCTURE|read more >>]] |
| − | | + | |
| | </div> | | </div> |
| − | | + | </div> |
| − | <div style="float:left; width: 280px; margin-right:20px; text-align:justify"> | + | <div style="float:left; width: 220px; margin-right:20px; text-align:justify"> |
| − | =<span style="color:orange">ARCHITECTURE</span>= | + | =<span style="color:orange">Architecture</span>= |
| − | | + | [[File:Birdie.jpg|220px|left]] |
| − | [[File:Sketch03.jpg|280px|left]] | + | <div style="float:left; width: 220px; margin-right:20px; text-align:justify"> |
| − | | + | |
| | The user, the interface and the structure are connected by means of the architecture, the complete system. This is the link that unites all the parts involved. | | The user, the interface and the structure are connected by means of the architecture, the complete system. This is the link that unites all the parts involved. |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | [[project C:ARCHITECTURE|read more >>]] |
| | | | |
| − | [[project C:Home#ARCHITECTURE|read more >>]]
| + | </div> |
| − | | + | |
| | </div> | | </div> |
| | | | |
| − | <div style="float:left; width: 280px; margin-right:20px; text-align:justify"> | + | <div style="float:left; width: 220px; margin-right:20px; text-align:justify"> |
| | | | |
| − | =<span style="color:orange">PLAN</span>= | + | =<span style="color:orange">Realization Plan</span>= |
| | | | |
| − | [[File:Blank.jpg|280px|left]] | + | [[File:timeline2.jpg|220px|left]] |
| | | | |
| | + | <div style="float:left; width: 220px; margin-right:20px; text-align:justify"> |
| | A realization plan has been drafted. It will provide the support for the project materialization and links with other projects and developments on site. | | A realization plan has been drafted. It will provide the support for the project materialization and links with other projects and developments on site. |
| − | | + | <br> |
| − | [[project C:Home#REALIZATION PLAN_2|read more >>]] | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | [[project C:REALIZATION_PLAN|read more >>]] |
| | | | |
| | </div> | | </div> |
| − |
| |
| | </div> | | </div> |
| | | | |
| | + | <div style="float:left; width: 220px; margin-right:20px; text-align:justify"> |
| | | | |
| | + | =<span style="color:orange">Prototype</span>= |
| | | | |
| | + | [[File:P1160827.JPG|220px|left|casual-user interface]] |
| | | | |
| | + | <div style="float:left; width: 220px; margin-right:20px; text-align:justify"> |
| | | | |
| | + | 1:1 prototype page. |
| | | | |
| − | | + | <br> |
| − | <div style="float: left; width: 1200px; margin-right:40px; text-align:justify"> | + | <br> |
| − | | + | <br> |
| − | =<span style="color:orange">INTERFACE</span>=
| + | <br> |
| − | | + | [[project C:PROTOTYPE|read more >>]] |
| − | <div style="float: left; width: 380px; margin-right:20px; text-align:justify"> | + | |
| − | ===Concept===
| + | |
| − | | + | |
| − | [[File:interface Dia copy.jpg|380px]] | + | |
| − | | + | |
| − | The interface of Spacebook will be the medium used by the social community to meet new people and organise activities in the real world.
| + | |
| − | | + | |
| − | The interface will be a tool that can be used by all people (it is not too hard to understand) but also gives a lot of freedom.
| + | |
| − | | + | |
| − | ===Research===
| + | |
| − | | + | |
| − | [[File:Interface_conclusions.jpg|200px]]
| + | |
| − | | + | |
| − | The research done between several computer programs showed the different possibilities and chances the interface gives to the user and program. It clearly
| + | |
| − | | + | |
| − | showed that an an easy and understandable interface is linked to limited possibilities in the program. When the computer program offers full control of the
| + | |
| − | | + | |
| − | content, the interface usually requires a lot of experience of the user.
| + | |
| − | | + | |
| − | Every interface had some parts that seemed very valuable to the concept of Spacebook: rotation (0-360) in 1 plane by the use of a button, zooming in and out
| + | |
| − | | + | |
| − | by use of the scroll wheel, given pre-defined possibilities, opportunity to personalize given possibilities and a simple layout.
| + | |
| − | These parts will be integrated with the Spacebook interface
| + | |
| − | | + | |
| − | ===Validators===
| + | |
| − | [[Project C:interfaces_walter_aprile| Walter Aprile]]
| + | |
| − | | + | |
| − | ===References===
| + | |
| − | | + | |
| − | [http://en.wikipedia.org/wiki/E-Booking_%28UK_government_project%29 E-booking]
| + | |
| − | | + | |
| − | [http://en.wikipedia.org/wiki/Interface_%28computing%29 interface]
| + | |
| − | | + | |
| − | [http://www.adobe.com/products/creativesuite.html?promoid=ITXQM Adobe Creative Suite]
| + | |
| − | | + | |
| − | [http://en.wikipedia.org/wiki/StarCraft StarCraft]
| + | |
| − | | + | |
| − | Atom XX / Project XX
| + | |
| − | | + | |
| | | | |
| | </div> | | </div> |
| − | <div style="float: left; width: 780px; margin-right:20px; text-align:justify">
| |
| − |
| |
| − | ===Design Proposal===
| |
| − |
| |
| − | Research into different interfaces led to the main criteria of Spacebook interface: able to zoom in on the 3D of the location by using the scroll wheel AND a
| |
| − |
| |
| − | zoom button; able to rotate around the 3D of the location by using the given buttons; only a limited amount of possibilities are possible; BUT the user has
| |
| − |
| |
| − | the opportunity to personalize the possibilities; the easy layout make the interface easy to understand for anybody.
| |
| − |
| |
| − |
| |
| − | The user of Spacebook can be anybody: students or business men, but also people less experienced with computers, such as housewives or elderly people.
| |
| − |
| |
| − | Therefor there will only be an online interface, and it will be a simple one: a clear overview of what is happening on the site, and a direct relation
| |
| − |
| |
| − | between the input of the user and the (on the website) visible output. Research into interfaces showed that having a simple interface means less
| |
| − |
| |
| − | personalization of the result. It also means that '''anybody is able to use Spacebook'''.
| |
| − |
| |
| − | Three interface types of Spacebook are created: the standard user interface, the advanced user interface and the administrator interface.
| |
| − |
| |
| − |
| |
| − | <gallery widths="151" heights="98" perrow="4" >
| |
| − | File:page01.jpg|Standard interface
| |
| − | File:page02.jpg|Standard interface
| |
| − | File:page03.jpg|Standard interface
| |
| − | File:page04-libary.jpg|Standard interface;user library
| |
| − | </gallery>
| |
| − | '''To book a space via the <span style="color:orange">standard Spacebook interface</span> is done with only a few easy steps:'''
| |
| − |
| |
| − | '''<span style="color:orange">1)</span>''' After the user selected his preferred day and time an updated 3D layout of the location appears on the right side
| |
| − |
| |
| − | of the screen.<br>
| |
| − | '''<span style="color:orange">2)</span>''' The user fills out only two criteria: the activity type and the amount of people participating. Then on the left
| |
| − |
| |
| − | side of the screen the standard solution appears.<br>
| |
| − | '''<span style="color:orange">3a)</span>''' Three options to personalize the space are given: completely flat (open), a flat roof, or a dome structure. The
| |
| − |
| |
| − | output is always directly visualized on the left side of the screen.<br>
| |
| − | '''<span style="color:orange">3b)</span>''' Working in library mode gives the user the possibility to select space setups made and saved by other users. This
| |
| − |
| |
| − | principle works via a popularity poll (most popular spaces at the top).<br>
| |
| − | '''<span style="color:orange">4a)</span>''' The user has the possibility to link his activity to another activity by sending a link request. <br>
| |
| − | '''<span style="color:orange">4b)</span>''' When the user is content with the setup he presses the save button.
| |
| − |
| |
| − |
| |
| − | <gallery widths="151" heights="98" perrow="4" >
| |
| − | File:page05-advanced.jpg|Advanced interface
| |
| − | File:page06-advanced.jpg|Advanced interface
| |
| − | File:page07-admin.jpg|Administrator interface
| |
| − | File:page08-admin.jpg|Administrator interface
| |
| − | </gallery>
| |
| − | '''The <span style="color:orange">advanced Spacebook interface</span> gives the user more options to create his ideal space and works as follows:'''
| |
| − |
| |
| − | '''<span style="color:orange">1)</span>''' After the user selected his preferred day and time an updated 3D layout of the location appears on the left side
| |
| − |
| |
| − | of the screen. <br>
| |
| − | '''<span style="color:orange">2)</span>''' By dragging his mouse over the grid, the user selects the preferred area for his activity. The output
| |
| − |
| |
| − | automatically updates on the right side of the screen.<br>
| |
| − | '''<span style="color:orange">3)</span>''' The user has the possibility to personalize his entire space. The standard setting for the curve that defines the
| |
| − |
| |
| − | space is 'medium', but the user has the possibility to change the curve to 'flat', 'small' or 'large'.<br>
| |
| − | '''<span style="color:orange">4a)</span>''' The user can also select more grid cells, directly next to his already defined space. This also appears on the
| |
| − |
| |
| − | right sight of the screen. Together with his earlier defined space it starts creating an ensemble.<br>
| |
| − | '''<span style="color:orange">4b)</span>''' The user can then rotate around his created ensemble, and change the curve of each space individually.<br>
| |
| − | '''<span style="color:orange">5)</span>''' When a user would like to have a space made out of several curves in one row, he uses the 'division' button the
| |
| − |
| |
| − | determine the beginning and ends of each curve. Each curve can be individually changed to the preffered setting (flat, small, medium or large).<br>
| |
| − | '''<span style="color:orange">6)</span>''' The created space will be saved when the user is done and added to the library.
| |
| − |
| |
| − |
| |
| − | The '''<span style="color:orange">administrator Spacebook interface</span>''' is created for the management of the physical Spacebook site (TU Delft?). The
| |
| − |
| |
| − | administrator has the right to overrule any activity at any time for maintenance work or other jobs. He can overrule the system by selecting the cells that
| |
| − |
| |
| − | will be inoperable at a certain time frame. There is also a administrator library where settings for maintenance jobs and spatial criteria are stored.
| |
| − |
| |
| | </div> | | </div> |
| | </div> | | </div> |
| − | <div style="float: left; width: 1200px; margin-right:40px; text-align:left">
| |
| − |
| |
| − | =<span style="color:orange">STRUCTURE</span>=
| |
| − |
| |
| − | <div style="float: left; width: 380px; margin-right:20px; text-align:justify">
| |
| − |
| |
| − | ===Concept===
| |
| − |
| |
| − | <youtube width="380" height="145" right >2WsdfWw3IoE</youtube>
| |
| − |
| |
| − | In order to make a fully adaptable construction, the structure has to be able to curve both up and down in one direction. A system of inflatable units is
| |
| − |
| |
| − | perfect for this purpose: when the air pressure is increased in the top layer the component will curve downwards, and when the pressure is increased in the
| |
| − |
| |
| − | bottom layer, the component will curve upwards.
| |
| − | Also, the combination of light materials and the proposed structure will give the construction enough stiffness while being extremely light.
| |
| − |
| |
| − | ===Research===
| |
| − |
| |
| − | Over the duration of the course several structural possibilities have been researched, such as a muscle / pulley system, a cube system, and a system with a
| |
| − |
| |
| − | surface that is either hanging or supported by columns. The most promising possibility turned out to be inflatables: both strong and light. Two main roads of
| |
| − |
| |
| − | research were followed, which are explained here.
| |
| − |
| |
| − | '''<span style="color:orange">Linear component</span>'''
| |
| − |
| |
| − | [[File:Linear_component.jpg|380px]]
| |
| − |
| |
| − | [[Project C:linear component | read more >>]]
| |
| − |
| |
| − | '''<span style="color:orange">Bubble component</span>'''
| |
| − |
| |
| − | [[File:Bubble_component.jpg|380px]]
| |
| − |
| |
| − | [[Project C:bubble component | read more >>]]
| |
| − |
| |
| − | After an extensive research of both possibilities it turned out that the linear component was more potent for this project. The main reasons for choosing the
| |
| − |
| |
| − | linear component are:
| |
| − |
| |
| − | '''<span style="color:orange">1)</span>''' the component is stiffer,
| |
| − | '''<span style="color:orange">2)</span>''' there is a better knowledge of how to control this system,
| |
| − | '''<span style="color:orange">3)</span>''' better architectural and structural proportions,
| |
| − | '''<span style="color:orange">4)</span>''' the same spatial results are possible,
| |
| − | '''<span style="color:orange">5)</span>''' use of less material.
| |
| − |
| |
| − | ===Validators===
| |
| − | [[Project C:structures_michela_turrin| Michela Turrin]]
| |
| − |
| |
| − | [[Project C:structures_gerrie_hobbelman | Gerrie Hobbelman]]
| |
| − |
| |
| − | ===References===
| |
| − |
| |
| − | [[Project C:Inflatables | Inflatables]]
| |
| − |
| |
| − | [http://www.publicartinla.com/sculptures/desert_cloud.html Bernhard Sommer, Desert Cloud]
| |
| − |
| |
| − | [http://en.wikipedia.org/wiki/Frei_Otto Frei Otto]
| |
| − |
| |
| − | [http://meweb.larc.nasa.gov/meweb/vgt.html Variable Geometry Truss]
| |
| − |
| |
| − | Atom XX / Project XX
| |
| − |
| |
| − | </div>
| |
| − | <div style="float: left; width: 780px; margin-right:20px; text-align:left">
| |
| − |
| |
| − | ===Design Proposal===
| |
| − |
| |
| − | '''<span style="color:orange">Balloon connection System</span>'''
| |
| − |
| |
| − | [[File:Frame.jpg|380px]]
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div style="float: left; width: 1200px; margin-right:40px; text-align:left">
| |
| − |
| |
| − | =<span style="color:orange">LINK</span>=
| |
| − | <div style="float: left; width: 380px; margin-right:20px; text-align:justify">
| |
| − | ===Concept===
| |
| − |
| |
| − | [[file:Userscenario.jpg|380px]]
| |
| − |
| |
| − | The system connecting the Spacebook interface and the structure at the site should be easy to understand but with tremendous result and inspiring outcomes.
| |
| − |
| |
| − | Just like Spacebook itself.
| |
| − |
| |
| − | ===Research===
| |
| − |
| |
| − | [[File:Mod_5_2.jpg|380px]]
| |
| − |
| |
| − | After extensive in the architectural composition of the site it was concluded that the structure would curve in only one direction (instead of two) and that
| |
| − |
| |
| − | the floor would stay static (instead of adaptable as well). It turned out that a double curved structure ánd/ór moving floors are not understandable for the
| |
| − |
| |
| − | future users. Furthermore a single curved structure and a static floor has a very rich architectural output, while easy to understand
| |
| − |
| |
| − | ===Validators===
| |
| − | [[Project C:computer_science_a_stoiculescu| Andrei Stoiculescu]]
| |
| − |
| |
| − | [[Project C:computer_science_S_Hagemann| S. Hagemann]]
| |
| − |
| |
| − | ===References===
| |
| − |
| |
| − | park
| |
| − |
| |
| − | Atom XX / Project XX
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div style="float: left; width: 780px; margin-right:20px; text-align:justify">
| |
| − |
| |
| − | ===Design Proposal===
| |
| − |
| |
| − | <div style="float: left; width: 780px; margin-right:20px; text-align:justify">
| |
| − |
| |
| − | '''<span style="color:orange">Architectural proposal</span>'''
| |
| − |
| |
| − | [[File:site00.gif|380px|left]]
| |
| − |
| |
| − | The architectural implementation of the structure follows a set of rules, they can be found in the pictures below.
| |
| − |
| |
| − | Part of the original '''<span style="color:orange">vegetation</span>''' of the site is maintained. Not only to create a border between the heavy traffic
| |
| − |
| |
| − | surrounding the site, but also to create a transition zone between the activities and structure and the direct environment. The lower bushes and the high
| |
| − |
| |
| − | trees are kept to create this transition border. The lower bushes make sure the structure is visible from the outside and the site looks accessible. The high
| |
| − |
| |
| − | trees give the the border more body and ultimately define the shape of the plan of the structure.
| |
| − |
| |
| − | The structure system itself creates '''<span style="color:orange">pathways</span>''' next to spaces, see technical implementation. Even without these
| |
| − |
| |
| − | automatically created pathways the site is still accessible. Four entrances/exits are created in the border: two leading to the faculty of architecture, one
| |
| − |
| |
| − | leading to the Science Centre and one leading to the Botanical Gardens of TU Delft. Situated between the green border and the structure is a small pathway
| |
| − |
| |
| − | that can be followed all around the site. This ensures the site is always accessible in the best way possible.
| |
| − |
| |
| − | The '''<span style="color:orange">strips</span>''' of the construction are continued in the green border. This creates an interesting transition zone and the
| |
| − |
| |
| − | entire site (structure, vegetation and pathways) work as one organism. To strengthen the idea of one organism the architectonic detailing of the strips (the
| |
| − |
| |
| − | structural strips, the footpath and the vegetation) is crucial. This architectonic detailing is for example LED lighting in the upper and under surface of
| |
| − |
| |
| − | the construction, to give the structure its linear shape, also when it's dark. The used materials in the vegetation, pathways and construction surface are
| |
| − |
| |
| − | chosen to enlarge the feeling of linearity, continuity and one organism.
| |
| − | <gallery widths="151" heights="98" perrow="4" >
| |
| − |
| |
| − | File:site-new.jpg
| |
| − |
| |
| − | File:sketch02.jpg
| |
| − |
| |
| − | File:sketch01.jpg
| |
| − |
| |
| − | File:sketch03.jpg
| |
| − |
| |
| − |
| |
| − | </gallery>
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div style="float: left; width: 780px; margin-right:20px; text-align:justify">
| |
| − |
| |
| − | '''<span style="color:orange">Technical implementation</span>'''
| |
| − |
| |
| − | [[File:Pathsystem.jpg|380px|left]]
| |
| − |
| |
| − | [[File:curves2.jpg|380px|left]]
| |
| − |
| |
| − | The '''<span style="color:orange">path system</span>''' is based on an algorithmic system connecting the user output to the structure input. When a user adds
| |
| − |
| |
| − | a new space the algorithm will check if the space is connected to a pathway. When this is not the case the algorithm will then create a new path directly on
| |
| − |
| |
| − | the right side of the space. Other users can then add their own spaces to this created path.
| |
| − |
| |
| − | In the case when two activities/spaces would like to link, but there is a pathway in between the two, the following will happen: the two spaces will merge
| |
| − |
| |
| − | together and become one space. The pathway then moves his way around the newly formed space. This is also demonstrated in the drawing on the left.
| |
| − |
| |
| − | When there are no more activities linked to a pathway, the path will disappear and make place for new spaces.
| |
| − |
| |
| − |
| |
| − |
| |
| − | The possible '''<span style="color:orange">curves</span>''' a
| |
