ESSE PORTFOLIO OF HUOPU ZHANG
INDEX AR
01
UKIYO-E AR/ An AR App on iOS
01
VIRTUAL LANDSCAPE
02
IMMERSIVE LANDSCAPE/ ‘Ex-Memoria, Doctrinia’
07
ARCHITECTURE
03
FRAMING DIALOG/ The Cultural Center
15
ARCHITECTURE
04
FORMAL SYNCHRONIZATION/ The Hotel
25
PARAMETRIC
05
DEFORMATION DISTRIBUTION/ The Pillow
33
ARCHITECTURE
06
ARMATURE RE-CONFIGURATION/ The Rare Book Library
39
ARCHITECTURE
07
THICK-THIN RECIPROCITY/ El Taller y el Parque
45
OTHER WORKS
+
MAPPING AND DRAWING/ ‘Mappa Mundi’
53
01 UKIYO-E AR/ An AR App on iOS Harvard CS 50 Final Project, 2018 Fall Collaborator: Minzi Long, MAUD 19, GSD
Ukiyo-e is a traditional Japanese art that vividly depicts the life and scenery of the Edo period. The name ‘Ukiyo-e’ originally means ‘Floating World’ in Japanese. This makes us wonder if we can bring these static pictures into life and make them really ‘floating’ with the help of AR technology. To achieve this, we developed this iOS app with an AR Camera that allows the user to see modern interpretations of the original art pieces. With the success of the implementation of our app, we also look to extend its usage to other kinds of exhibtions under a museum setting. In this project, I was in charge of the development of the iOS interface, view controllers and the integration of the Unity contents into the app in Xcode. I also worked on some of the AR contents in Unity. Note that some of the art pieces that we overlaid on the original works are done by the Japanese artist Segawa Thirty-seven and the Singaporean artist Sokkuan Tye.
Unity/Vuforia Image Recognition and AR Overlays
iOS UI/UX - Instructions on the AR Camera and Information of the Developers are Shown on the Intro Pages and the About Page respectively
The AR contents are first developed in Unity. We used the Vuforia library to achieve image recognition of 9 target images. Then we overlaid new contents on these images, for instance, 3D models we made in Blender, videos done by the Japanese artist Segawa Thirty-Seven and images done by the Singaporean artist Sokkuan Tye. When these works are done, we exported the contents as an iOS component so that we can integrate them into our iOS app.
Our own 3D Interpretation of the Hokusai’s work done in Blender overlaid on the original piece. It includes a virtual button that, once clicked, will trigger motions of the elements.
Motion pictures done by Segawa Thirty-Seven Overlaid on the original piece done by Katsushika Hokusai
3
4
iOS UI/UX - Potential Application of the App on Future Exhibitions Are Published on the Calendar Views
5
The AR Camera View - Integration of the Unity/Vuforia AR Contents into the iOS App
6
02 IMMERSIVE LANDSCAPE/ ‘Ex Memoria, Doctrinia’ GSD 2016 Spring. VIS-2449 Representation through Gaming Technology. Instructor: Eric de Broche des Combes.
13
‘Ex-Memoria’ is my first attempt in developing a video game. It aims at creating a dystopic land named ‘Doctrinia’ for the player to navigate through and incorporates a world setting that can be expanded into a full storyline in the future. It involves a strong imagery pattern that sets up the main tone of the landscape. At the same time, it uses other minor elements to build up visual and textual information for the player, who is set to be deprived of all his memories and relies on all these messages to rebuild his understanding of this society. The messages, along with the media that carry them, the televisions and graffiti, further enhance the dystopic mood of the environment.
14
Design Drafts - Concepts and Settings The Basic setting of the game consists of three elements: I. The ‘Totem of Totalitarianism’, which is the image pattern that makes up the tone of the surroundings and keeps reminding the player of the fact that there is an authority known as ‘the Instructors’ that is manifesting its superiority and highness to the land. II. The Television, which are the main vehicle with which the authority uses as its propaganda machine. At the same time, they are, as the word ‘tele-vision’ literally means, stealthily also remote monitors installed by the authority for the purpose fo surveillance.
[2016 Spring]
[Huopu Zhang]
[ Ex-Memoria ]
[2016 Spring]
[Huopu Zhang]
[ Ex-Memoria ]
It is a world of words, especially in their written form. The society seems to be highly orderly and well-organized, as is depicted through its ubiquitous propaganda machine, the televisions. However, in the underbelly of the metropolis, there exists a large body of graffiti that speaks of a different story and gives out information in a different tone.
World Setting and the Main Character The main character has, for some reason yet unknown, been deprived of his memories. Upon awakening in the game, he gets exposed to the information that is given through the ubiquitous television broadcasts while he will also start to find written messages left by some other people. His understanding of the society and perhaps his own identity relies on these messages he collects.
The Land of Doctrinia and its Society
The Instructors
INSTITUTIO
III. The Texts, often realized in the form of graffiti, are the marks left by people from the underbelly of the society and provide the player with information from another perspective.
INQVISITIO
MENS
The Televisions COR
The Totems of Totalitarianism
The Texts Hesperia
915
10
The Landscape Overview - A Sample of the Land of ‘Doctrinia’
Top View - The River and the ‘Paths’. 11
Front View - The Mountains with the ‘Totems of Totalitarianism’. 12
13
14
03 FRAMING DIALOG/ The Cultural Center GSD Architecture Option Studio. Instructor: Wonne Ickx
This is a cultural center located at Plaza de Zarco, Mexico City. The main interest in this project is, by using the arch, an architectural language that has had strong presence in Mexico City since the colonial times, to build up frames for a dialog between the rapidly growing central business area along la Reforma and the laid back neighborhoods that is directly adjacent to Plaza de Zarco to its northwest.
The site is located right next to Plaza de Zarco, Mexico City, at the conjunction of Avenida Hidalgo and Paseo de la Reforma. It is a complex site not only because of its irregular shape but also in that it is at the crossroad of the rapidly expanding Central Business Area all along la Reforma and the more laid back neighborhoods to the northwest, where the narrow streets are more accustomed to the pace of footsteps rather than carwheels. The radically different characters of the two are instantly visible from the footprints of the existing urban fabrics, in which la Reforma has embraced a rather formal and well-defined urban edge whereas the local neighborhoods of the northwest has had high degrees of casualness. The project’s main interest is to address such a conflict between the two. It utilizes the arch, which is a familiar element in Mexico City from the colonial time to modern days, as an architectural language that frames the structure for a dialogue and in using a combination of arches in different scales and spatial arrangements, builds up a ‘container’ with formal façades that accommodates the expansion of la Reforma and at the same time samples and exhibits the vividness of the local neighborhoods.
17
18
A
B
C
D
E
F
G
H
I
A
1
1
3
3
5
5
D
E
F
G
H
I
G
H
I
4
4
2nd Floor
C
2
2
Ground Floor
B
The Southwest Faรงade 6
6
7
7
8
8
2nd Floor Plan 0.00+6.00m
2nd Floor Plan 0.00+6.00m
A
B
C
D
E
F
1 2 3 4 5
6 7 8
Ground Floor Plan 0.00m Ground Floor Plan
3rd Floor
19
The Main Stair
0
5
10
20
3rd Floor Plan 0.00+12.00m
3rd Floor Plan 0.00+12.00m
0
5
10
20
The Southeast Faรงade
20
0 0
Long Section
21
5 5
10 10
Long Section
20 20
0 0
Long Elevation
5 5
10 10
Long Elevation
0
20 20
Short Section
5
10
0
20
0
5
5
10
10
20
20
Short Elevation
22
I Treatrini Teatrino - A Study on the theatrical representation effects inspired by Aldo Rossi’s Little Scientific Theater. As regards this specific study, two theatrical boxes are made: The white box as a representation of the exterior of the building, in relation to the adjacent urban setting as the backdrop; the black box as a representation of the interior quality of the project.
23
24
04 Formal SYNCHRONIZATION/ The Hotel GSD 3rd Architecture Core Studio. Instructor: Jeffry Burchurd
13 9
This is a high-rise hotel project that incorporates a series of programs such as thermal spa, swimming pools, gallery, theatre and a green house. It is set in the arid urban context of Las Vegas. The main interest in this project is to reconcile a podium with several public programs that is more respectful to its adjacent street front and a hotel tower that is increasingly aloof as it gets to its higher levels, which eventually turn to face the downtown strip of Las Vegas for its pleasing view, regardless of what is happening on the street level.
Programs and Circulation Massing/Primary Programs
Structural Studies Wrapping/The Triangulated Skin
The Lifted Podium
The Tower
Hotel Rooms
Belt Truss
Green House Hotel Rooms Theatre
Individual Terraces and Shells
Pools and Spa Lobby Desert Park Conference
Truss Cantilever Public Terrace
Structure Core Columns
11 15 27
28
Formal Progression and the Triangulated Skin
17 13 29
30
608 ft
Podium Level 1
Podium Level 4
Hotel Tower - 4 Rooms
Podium Level 2
Podium Level 5
Hotel Tower - 4 Rooms
Podium Level 3
Hotel Tower Level 3
378 ft
126 ft
Hotel Tower - 2 Rooms
19 15 31
32
05 DEFORMATION - DISTRIBUTION/ The Pillow GSD SCI 6425. 2016 Spring Instructor: Panagiotis Michalatos Collaborators: Esther Bang, Hyojin Kwon
This project starts as an investigation of the formal represenation and material distribution of ancient Chinese pillows, which are usually made with solid materials such as bamboo, jade, porcelain, wood, or even bronze. We took inspiration from the fourier series and used a series of sinusoidal and cosinusoidal waves to analogize the formal logic and the variation in density and depth of material along the cross-section of the pillow. By using different parameters for the functions, we observed the difference in deformation of our prototypes and eventually chose a form that we thought to be ideal among the prototypes to make our final 3D-printed product.
Approximation of Pillow Form with Sinusoidal Curves
A Secondary Sinusoidal Undulation Along the Main Curve - A Representation of Material Distribution
Our methodology of formal invention takes inspiration from the Fourier Series but differs from it as we do not combine series of sinusoidal/cosinusoidal waves in the same coordination system at once.
Instead, we directly vary the amplitude and frequency of the wave function in different regions to approximate the form of our object. Then, we apply a secondary wave along the length of our first wave as a simulation of the material distribution, the frequency here being related to the material density while the amplitude represents the depth or thickness of the material.
f = 2000 A very high frequency leads to a very short period of oscillation along the main curve.
A 0.025 0 Variation of amplitude along the section
f = 800 A constant amplitude of corresponds to an unvaried depth of material throughout the section.
A 0.025 0 Variation of amplitude along the section
We are interested in traditional Chinese pillows as they largely contradicts our perceived image of the pillow. Unlike the pillows that we are used to, traditional Chinese pillows are made from solid materials. Our project looks into the formal logic of these unusual pillows and tries to combine these forms with a more elastic material distribution of solid materials to achieve our own design.
f = 800 An inverted distribution of amplitude gives the legs of the pillow more elasticity and material density.
35
A 0.025 0 Variation of amplitude along the section
f = 600 The final form we used has a central part that has enough strength as a whole and also considerable elasticity in the micro scale.
A 0.025 0 Variation of amplitude along the section
36
Test cases Line-up and prototype for our final product. Laser cut basswood stacked
Final Product. 3D Printed. L × W× H = 9”× 2.2”×2.5”. Maximal amplitude in the middle. Minimal amplitude on the legs.
37
38
06 Armature RE-CONFIGURATION/ The Rare Book Library GSD 2nd Architecture Core Studio. Instructor: Elizabeth Whittaker
13
This project is a rare book library that is located on the waterfront of Emerald Necklace, Boston, facing the Museum of Fine Art. The Concept of this project is derived from a series of walls that are broken down into a flexible origami-based armature. With its capability of making various space by folding itself in different levels, it can react to both the site and the programs it is to accommodate.
12
Study Models
Final Model
1/8” = 1’-0”. 1/4 plywood, 1/8 basswood and quadrupled 4-ply museum board
The conceptual models are a series of study on making an armature that can deform from a plane into volumes. The fragment model is made of 1/8 chipboards (the floor plates and the base) and doubled 4 ply museum boards (the walls).
15 41
42
Floor Plans
2nd Floor
43
3rd Floor
4th Floor
Roof Garden
44
07 Thick-Thin RECIPROCITY/ El Taller y el Parque GSD Option Studio. Instructor: Frano Violich
This project, while trying to build up a maker’s space consisting of several workshops, artists’ accommodations, offices and event spaces of its own right, faces a complex site condition in the dynamic urban core of Bogota, Colombia. On one hand, it is situated between two well developed public spaces - a park to the south and the national museum to the north and is thus expected to be able to provide the public a direct connection between the two. On the other hand, the rapid and sometimes chaotic urban development in its local areas has left it vulnerable to future road extension or other transportation development plans, which have in the past already comprised a significant part of the public spaces in the surrounding areas. This project then derives its architectural languages in response to these different aspects of considerations and interrogates the possibility of reconciling the two architectural languages it carries and having them, in combination with one another, build up a pedestrian-friendly public space governed by a series of permanent programs.
25 21 41
26 42
This project originates in the critique on how the undefined, or unprotected open space for the public was eventually taken over by traffic development due to urban expansion in Santa Fe, Bogota. It is in contrast with the Bolivar Square and other minor open plazas in old town Bogota where the open space is governed and defined by permanent programs and is able to be in continuous use for more than one and half century. The project also looks into another local architectural condition that is present in immediate adjacency to the site in the areas around the Independence Park. It is an architectural language that is rather hospitable to the public as it manages to build up a network of circulation that largely accommodates the radical change in topography in the area, easing people’s movements. As the two architectural languages meet each other. The former intends to accommodate the permanent, private program and uses the heaviness of the material of brick to maintain the pre-existing urban edges so that it forms a ‘fortress-like’ structure to govern the lot. Meanwhile, the soft language carefully carves into the site and the fortress. It gradually moves down in accordance with the topography and ties the public programs, the exhibition space, the auditorium, the open offices along itself, eventually making a continuous experience for the public through the site under the protection of the ‘fortress’.
The Site footprint is around 7,000 square meters and is located between the National Museum and the Independence Park.
I. The adjacaent Park of Independence, along with the landscape that surrounds Rogelio Salmona’s Residencia El Parque and the Bullring, provide a well-organized and pedestrian friendly area for the public and would ideally extend such kind of public space across the site to connect with the National Museum right to the north. II. A comparison between the Carrera10/ Avenida El Dorado juntion, which is close to the site, in the 1960s and its present conditions implies how an undefined public space in the Santa Fe area of Bogota could easily be overtaken by constructions mainly driven by the dynamics of the rapid urban expansion in Colombia’s capital region. The idea of emphasizing the urban edge of the site arises in order to cope with such a potential threat to the public space the project maintains.
43 47
Carrera 10/ Avenida El Dorado Juntion. 1960s.
Carrera 10/ Avenida El Dorado Juntion. Present.
28 44 48
Plans - 1st and 2nd Floors
1:2000
Long Section
49
1:2000
1:750
South Elevation
1:750
50
The language of the permanent programs, ‘the thick’, holds on to the urban edges the site reaches and thus defines a territory that resists future penestration of traffic developments. The ‘solid’, or permanent programs - the workshops, the artists residence, the offices and the event spaces are, accordingly, located along the building volumes, which is a bar-like building, despite appearing to be tremendous from outside. Behind this ‘fortification’, the taller is then able to maintain a public space inside that is both bridging the two preexisting public spaces and beneficial to its own interest, as a maker’s space always needs to have strong connections to the public.
51
52
OTHER WORKS - Mapping Study of Urban Dynamics and Statics in Williamsburg, Brooklyn and South Boston
CONTINGENT CITY:
New York Neighborhood - Static
45 53
CONTINGENT CITY:
COLLECTIVE INTERIORS:
INTERSECTION AS PERCEPTION
INTERSECTION AS PERCEPTION
FORM AS AN ISLAND
New York Neighborhood Dynamic
Boston Neighborhood Static
Boston Neighborhood Dynamic
46 54
‘Mappa Mundi’ - Mapping Study Refashioned
New York Neighborhood - Static
55
New York Neighborhood Dynamic
Boston Neighborhood Static
Boston Neighborhood Dynamic
56
Huopu Zhang 33 W Huangpu Ave. 6-B. Guangzhou, China. hzhang@gsd.harvard.edu