- {% assign imagePath = '/assets/plugin/thumbnail.png' %}
- {% assign color = 'rgba(114, 227, 210, 0.90)' %}
-
+ {% assign item = site.pages[8] %}
+ {% include tile.html span='is-one-third' collection='plugin' %}
{% assign everything = site.documentation | concat: site.techniques | concat: site.projects %}
{% assign sorted = everything | sort: 'date' | reverse | limit:10 %}
- {% assign span = 'is-one-third' %}
{% for item in sorted %}
{% if item.published != false or site.unpublished == true %}
- {% include tile.html %}
+ {% include tile.html span='is-one-third' %}
{% endif %}
{% endfor %}
diff --git a/site/_projects/aeolian-sand-odyssey.md b/site/_projects/aeolian-sand-odyssey.md
index 5b8686b4..a63eb403 100644
--- a/site/_projects/aeolian-sand-odyssey.md
+++ b/site/_projects/aeolian-sand-odyssey.md
@@ -12,15 +12,15 @@ files_text: model and definition that demonstrating a partial recreation of this
tags:
---
-
+{% include elements/figure.html image='aeolian-sand-odyssey/1.jpg' caption='Numerous test cases and iterations were performed to guage how dune movement took place under various different conditions.' credit='(image from thesis documents)' %}
*Aeolian Sand Odyssey* documents the thesis year of a pair of students in the Architecture Association's Landscape Urbanism programme. This iteration of that thesis year emphasised an analysis of European landscapes at the territorial scale and features many projects that used simulations of landscape processes as an instrument for investigation.
Here, that took the form of testing the aeolian — wind-driven — processes of dune formation in a sand peninsular, roughly 100km in length, that lies between the Blatic Sea and a freshwater lagoon.[@Kotenko:2014th 1] As a point of departure the project sought to challenge the European Union's landscape preservation policies that seemed to focus more on arresting the dune movement and preserving particular pictorial qualities.[@Kotenko:tw 11] Instead they sought to work within the existing sociocultural context of the site and integrate dune management into how existing programmes, such as tourism, were evolving.
-
+{% include elements/figure.html image='aeolian-sand-odyssey/4.png' caption='A cellular automata based model of dune movement was employed to model dune drift.' credit='(image from thesis documents)' %}
-
+{% include elements/figure.html image='aeolian-sand-odyssey/3.png' caption='Strategies for intervening into particular dune types were developed using vegetation and small structures.' credit='(image from thesis documents)' %}
A key part of approaching this as a design problem was in building the capacity to simulate the formation and evolution of dune systems. To do so a cellular-automota based model, originally developed by Brad Werner, was employed.[@Kotenko:2014th 5] The model's key components are establishing a wind direction, wind velocity, grain size, grain variety, and a framework for representing dune topographies as a 3D grid of cells.[@Kotenko:2014th 5] These cells — the automata — follow a series of rules to enact dunal drift, primarily by determining if they are in the winds 'shade' — ie opposite the prevailing direction and moving them according to the slope of the dune's edges[@Kotenko:2014th 58]. The rules can then be iterated upon to project existing or hypothetical conditions into future states.
@@ -28,4 +28,4 @@ This tool was then run using site data and identified two major strategies for a
It is interesting to consider how the models could have been more deeply integrated with the resulting design strategies. The simulation examples appear to work primarily at the level of morphology — as would be expected with the cells acting as terrain volumes — and primarily at the scale of small testing beds (3-4 isolated dunes) rather than necessarily being operative across the site itself. To the extent interventions were modelled, they also were depicted at a morphological level — as obstructing objects or as 'patches' of different material, which raises the possibility of how their performance characteristics could be evaluated on their own terms, or as a broader set of feedback to the initial model.
-
+{% include elements/figure.html image='aeolian-sand-odyssey/2.png' caption='Larger structures were used to obstruct and reform dune drift at key points.' credit='(image from thesis documents)' %}
\ No newline at end of file
diff --git a/site/_projects/barcelona-botanic-gardens.md b/site/_projects/barcelona-botanic-gardens.md
deleted file mode 100644
index 5e2db73a..00000000
--- a/site/_projects/barcelona-botanic-gardens.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Barcelona Botanical Garden
-date: 18-01-31
-published: false
-excerpt: lorum
-thumbnail: 1.jpg
-year: 1999 (constructed)
-location: Barcelona, Spain
-designers: Carlos Ferrater, Josep Lluís Canosa, Bet Figueras, Artur Bossy, Joan Pedrola
-files: true
-files_text: model and definition that demonstrating a partial recreation of this project
-tags:
----
\ No newline at end of file
diff --git a/site/_projects/botanical-gardens-of-barcelona.md b/site/_projects/botanical-gardens-of-barcelona.md
new file mode 100644
index 00000000..ba921d9f
--- /dev/null
+++ b/site/_projects/botanical-gardens-of-barcelona.md
@@ -0,0 +1,39 @@
+---
+title: Botanic Gardens of Barcelona
+date: 18-01-31
+published: true
+excerpt: Facets form a mosaic that stretches across a steep slope and structures a tailored planting plan.
+thumbnail: thumbnail.png
+year: 1999 (constructed)
+location: Barcelona, Spain
+designers: Carlos Ferrater, Josep Lluís Canosa, Bet Figueras, Artur Bossy, Joan Pedrola
+files: true
+files_text: model and definition that demonstrating a partial recreation of this project
+tags:
+---
+
+The *Botanic Gardens of Barcelona* evidence an early example a sophisticated model of natural systems can help generate, test, and provide feedback upon the complex design criteria, such as grading and planting, that define the key features of a landscape design.
+
+{% include elements/figure.html image='botanical-gardens-of-barcelona/2.jpg' %}
+{% include elements/figure.html image='botanical-gardens-of-barcelona/3.jpg' caption='An irregular triangular grid spreads across the garden, organising the planting typologies and path network.' credit='Image from Ferrater, Carlos, and Borja Ferrater. "Synchronizing Geometry". Actar, 2016.' %}
+
+Designed in 1989, the gardens were the product of a collaboration between Bet Figueras (landscape architect), Carles Ferrater and Josep Lluís Canosa (architects), Joan Pedrola (biologist) and Artur Bossy (horticulturist).[@Anonymous:vh] Located on a steep site in Barcelona the design proposed an irregular triangular grid that spread across the site. The grid structure was in part developed to avoid the need for major earthworks, as the triangular geometry could closely follow the existing topography by keeping two of each triangle's vertices at the same elevation but allowing the third to shift vertically to match the pre-existing slope.[@Preziosi:2004vf 116] The resulting grading, paths, and retaining walls create a highly expressive and architectonic landscape that render the circulation experience as that of a faceted network[@Ferrater:2016ta 19] as paths split and converge to as they connect the planar surfaces.
+
+{% include elements/figure.html image='botanical-gardens-of-barcelona/5.jpg' caption="The configuration of each of the facet's vertices creates a number of distinct planting conditions correspond to the conditions of various geographic areas represented in the garden's vegetation." credit='Image from Ferrater, Carlos, and Borja Ferrater. "Synchronizing Geometry". Actar, 2016.' %}
+
+While the formalism of the triangulation is striking, its design intent is directly tied to the project's key program: to showcase botanical collections drawn from a range of regions whose Mediterranean climates match that of Catalonia. To aid this goal the structure of the grid provides a further function as each facet creates a unique (but internally uniform) set of characteristics according to their differences in slope, solar orientation, and irrigation integration.[@Ferrater:2016ta 19] The diversity of conditions present across then grid then informs the planting design by allowing for the pairing of species from each geographic region to the corresponding conditions on each facet that best mimic the "ideal growing conditions in the plants' native setting."[@Hansen:2011tka] The tessellated mosaic thus allow for a locally-coherent but globally-diverse distribution of vegetation clusters across the landscape that would develop specific adjacencies to 'allow visitors to compare the various species and note the remarkable phenomena of convergence'[@Preziosi:2004vf 116] while presenting a diversity of planted form and texture that "mitigate the excessive virtuality"[@Preziosi:2004vf 117] of the facets.
+
+{% include elements/figure.html image='botanical-gardens-of-barcelona/4.jpg' caption="Images produced by the computer program developed to assign species typologies across each of the grid's facets." credit='Image from Ferrater, Carlos, and Borja Ferrater. "Synchronizing Geometry". Actar, 2016.' %}
+
+Software developed for a small personal computer guided the process of matching the vegetation of each region to the grid by calculating the environmental characteristics of each triangular plane and automatically selecting the region whose species best fit the identified profile.[@Ferrater:2016ta 19] Outsourcing this otherwise-tedious task of topographic analysis and species allocation to an automated process allowed the designers to "obtain what we believed to be the most important factor: control of the forms of the future landscape";[@Preziosi:2004vf 117] presumably because the tool allowed for faster and more precise feedback loops between different grid configurations that then defined the distributions of plant species. At the same time the software helped enable inter-disciplinary dialogue by making the relationship between key landscape features and the biological or horticultural implications of those features explicit — something that had been "impossible in the early days of the project."[@Ferrater:2016ta 19]
+
+{% include elements/figure.html image='botanical-gardens-of-barcelona/7.jpg' caption='The conscious clustering of facets with similar characteristics creates adjacencies within the plan that juxtapose the different geographic regions and vegetation types within each of those regions.' credit='Image from Ferrater, Carlos, and Borja Ferrater. "Synchronizing Geometry". Actar, 2016.' %}
+
+While the power of computer hardware has increased exponentially since 1989 the digital model developed for the Gardens illustrates that "the complex questions regarding the design of the garden"[@Ferrater:2016ta 117] don't necessitate large amounts of complexity in terms of computational rules or power. The natural systems that define the 'micro-ecology' of each of the planted facets are innumerably complex in their exactitude, but for the purposes of designing viable distributions of vegetation the model only needed to include a (relatively) small number of salient parameters, metrics, and rules. The software was able to provide clear feedback on how each design iteration performed because it had such a clear set of parameters (the spatial grid and planting palette) with clearly-defined relationships between the formal and ecological systems that would define the landscape.
+
+Recreating the model used to help design the *Barcelona Botanic Gardens* is relatively easy to do using modern computer-aided design platforms. Yet, the project is still a seemingly-rare example of how computational methods can directly generate distinctly landscape architectural design features. As the similarly-faceted forms of the *Flowing Gardens* project illustrate, the formal epiphenomenon of digital modelling are easily identified and are often stated as having been shaped (indirectly) by landscape conditions and logics.[@Hansen:2011tka] Yet direct computationally-enabled ties between landscape forms and landscape logics — that is to say a generative processes that mediates between the two — remain novel. Many techniques exist for analysing the different aspects of a landscape in isolation[^iso] but part of the ongoing novelty of the *Barcelona Botanic Gardens* is that it developed a more holistic model that could incorporate the otherwise-isolated aspects of landscape form, landscape analysis, and planting design into a cohesive set of procedures that could help to generate (rather than just validate) a design.
+
+{% include elements/figure.html image='botanical-gardens-of-barcelona/model.jpg' %}
+{% include elements/figure.html image='botanical-gardens-of-barcelona/definition.png' caption='Grasshopper definition recreating the basic analysis of the triangular grid and allocates plants accordingly.' credit='Philip Belesky, for http://groundhog.la' %}
+
+[^iso]: For instance determining surface water flows or solar gain over a given topographic surface.
diff --git a/site/_projects/busan-cinema-complex.md b/site/_projects/busan-cinema-complex.md
index 4491cb42..695bf4a0 100644
--- a/site/_projects/busan-cinema-complex.md
+++ b/site/_projects/busan-cinema-complex.md
@@ -12,14 +12,13 @@ files_text: model and definition that demonstrating a partial recreation of this
tags:
---
-
+{% include elements/figure.html image='busan-cinema-complex/1.jpeg' caption='TODO' credit="TODO" %}
The 2006 competition entry for the *Busan Cinema Complex* by James Corner Field Operations and TEN Arquitectos demonstrates more simple, but more explicit, link between surface development strategies and particular performance goals.
Here a rectangular grid distributes a series of tiles across a surface, with the size and rotation of each element controlled using parametric relationships. The result is a graduated field where the tiles are smallest and most offset from their original horizontal orientation where the surface is highest. Presumably a series of parametric rules control these relationships, with each point in the grid sampling the topography's current vertical height dynamically. The logic of this is that the larger mounds contain subterranean bladders for storing run-off and/or storm water[@Hansen:2011tka] although the increased permeability at the peaks seems unrelated to the task of collecting run-off for the bladders — only that the tiles "subtly reveal [their] position."[@Hansen:2011tka] To the extent the tiles are performative it is seemingly as a marker of infrastructure, or providing differentiated surface materials for programmatic use.
-
-
-
+{% include elements/figure.html image='busan-cinema-complex/2.jpeg' %}
+{% include elements/figure.html image='busan-cinema-complex/3.jpeg' caption='A parametric model showing how the surface topographic is used to scale and rotate the paving grid.' credit="TODO" %}
That said the tight tie between landform and tiling strategy suggests an approach that can establish a more direct and intuitive link between a primary design driver — the topography — and a secondary design feature that can begin to optimise according to a given landscape condition. In contrast to the two earlier examples where surface development proceeded by transposing a pattern or developing a freeform mesh, here the surface development precedes the application of the parametric geometries, which in turn can inform the underlying surface development. The field-like tiling strategy responds to iterations in the underlying landform, and takes local variations within the surface as its driver; creating a feedback loop that informs both the 'base' geometry and the tiling strategy itself.
\ No newline at end of file
diff --git a/site/_projects/diana-memorial.md b/site/_projects/diana-memorial.md
index 15b1c436..60104a6c 100644
--- a/site/_projects/diana-memorial.md
+++ b/site/_projects/diana-memorial.md
@@ -13,7 +13,7 @@ tags:
---
-
+{% include elements/figure.html image='diana-memorial/1.jpg' caption='CNC machined granite was used to create surface forms and control the movement of water.' credit="TODO" %}
The need for such precision at such scale in Max Lab IV in part stemmed from the demands of its unique brief. Similar stipulations are more often found in smaller scales with harder materials where fabrication challenges drive the adoption of digital modeling.
diff --git a/site/_projects/flowing-gardens.md b/site/_projects/flowing-gardens.md
index 1398537e..b2848e12 100644
--- a/site/_projects/flowing-gardens.md
+++ b/site/_projects/flowing-gardens.md
@@ -13,7 +13,7 @@ tags:
---
-
+{% include elements/figure.html image='flowing-gardens/1.jpg' caption='TODO' credit="TODO" %}
A number of projects use similar parametric geometries at greater scales to explore, if not answer, these questions. Often these parametric techniques take shape as tiling strategies or path configurations that feature branching, flowing, twisting, folding, or fracturing geometries. Such forms echo architectural applications of surface panelling and manipulation techniques, but apply them to the ground plane — façades turned into fields.
diff --git a/site/_projects/jade-eco-park.md b/site/_projects/jade-eco-park.md
index 9caf6a3a..135d97a2 100644
--- a/site/_projects/jade-eco-park.md
+++ b/site/_projects/jade-eco-park.md
@@ -13,11 +13,11 @@ tags:
---
-
+{% include elements/figure.html image='jade-eco-park/1.jpg' caption='Rendered persective showing the desired microclimatic conditions generated by various design elements.' credit="(From Rahm's website)" %}
Three times of the size of Parc de la Villette, the design of the Jade Eco Park deal with its scale through an ambitious field-driven strategy where programme is distributed across a series of discovered and designed disrupted microclimates.[@Rahm:2014ew 83-84] It aims to produce a series of 11 'Climatic Lands' where "temperature, humidity and air pollution were intensively modified" by the manipulation of natural features (vegetation, topography, water) and the introduction of devices for conductive cooling, misting, dehumidifiers, and air-filtration.[@Rahm:2014ew 83] Each Land is to create a climatic intervention that can support a particular programme (ie cool spaces for leisure or dry spaces for sports) while the site as whole offers a "continuous cross-mixings of factors, generating multiple field conditions punctuated by intensities and singularities of difference, variety and variation in the distributions of factors."[@Rahm:2014ew 83]
-
+{% include elements/figure.html image='jade-eco-park/2.jpg' caption="The park's plan organises these microclimates across the site in relation to adjacent urban areas and the desired programmes." credit="(From Rahm's website)" %}
diff --git a/site/_projects/keio-university-roof-garden.md b/site/_projects/keio-university-roof-garden.md
index deac5316..716b1fbd 100644
--- a/site/_projects/keio-university-roof-garden.md
+++ b/site/_projects/keio-university-roof-garden.md
@@ -15,7 +15,8 @@ tags:
- vegetation
---
-
+{% include elements/figure.html image='keio-university-roof-garden/1.jpg' credit="Image via MBP website's project
+ page (http://micheldesvignepaysagiste.com/en/keio-university-慶應義塾)" %}
The most visible impact of computational design techniques on the design of landscapes is often in the formal treatment of 'hard' surfaces — street furniture, paving elements, pavilions, and other items that can be manufactured specifically for a particular project. As manufactured and constructed artefacts, these elements can draw from the design and fabrication techniques typically developed in other disciplines.
@@ -25,10 +26,9 @@ The resulting aesthetic is one of a smoothly differentiated surface with semi-en
> "One slips into this space, drifting along on the feelings aroused by the water and the light, playing on the same logic. There is no clear separation here (nor was there in Noguchi's garden) between voids and solids. This composition plays with successive planes and textures of variable densities. The even punctuation of the ground gives cadence to these variations. This is a small structure that organizes textures, porosities, densities, and transparencies—the material and the complex spaces, just as in a natural landscape." [@Corner:2009jg 175]
-
+{% include elements/figure.html image='keio-university-roof-garden/2.jpg' title='The different types of granite slab in terms of their dimensions and appearance in the resulting design.' credit='Image via "Intermediate Natures, The Landscapes of Michel Desvigne" (2009) p172' %}
The project's goals are a productive contradiction: a desire for a roof garden — a tightly bounded and highly sculpted landscape — that at the same time displays some of the rich variety and dynamism that characterise a traditional Japanese garden. The definition and model provided also demonstrate some of the capacity for variation inherent to the parametric model itself, as basic variables (such as tile depth, dimensions, planting palette, etc) are easily modified. At the same time the use of the interpolated image map allows for a more expressive mode whereby the tile pattern can be altered by manipulating the source image by applying either filter effects (i.e. tweaking the overall brightness or contrast) or through specific edits (i.e. using brush tools in Photoshop).
-
-
-
+{% include elements/figure.html image='keio-university-roof-garden/model.png' %}
+{% include elements/figure.html image='keio-university-roof-garden/definition.png' caption='Grasshopper definition recreating the basic pattern effect and planting distribution.' credit='Philip Belesky, for http://groundhog.la' %}
diff --git a/site/_projects/local-code.md b/site/_projects/local-code.md
index 6eaf817c..9b8a484f 100644
--- a/site/_projects/local-code.md
+++ b/site/_projects/local-code.md
@@ -13,19 +13,18 @@ tags:
---
-
+{% include elements/figure.html image='local-code/3.jpg' caption='TODO' credit='(Image from competition boards http://wpa2.aud.ucla.edu/info/index.php?/theprojects/local-code/)' %}
Over the three years of his *Fake Estates* project, Gordon Matta-Clark identified 15 marginalised lots in New York; selecting largely vacant parcels that could be appropriated as community facilities.[@Mochaux:2010vq 89] Nicholas de Mochaux's employs a broadly similar methodology using geospatial analysis and parametric design to identifying 1625 vacant lots in San Francisco and propose new uses for each.[@Mochaux:2010vq 90] Such lots are often 'unaccepted' streets that the municipality owns and nominally uses as thoroughfares, but are not actively maintained and are often untraversable.[@Mochaux:2010vq 90] Taken collectively, *Local Code* investigates how such a large and distributed collection of small sites can nevertheless act to address city-wide issues.
-
+{% include elements/figure.html image='local-code/4.jpg' caption='TODO' credit='(Image from competition boards http://wpa2.aud.ucla.edu/info/index.php?/theprojects/local-code/)' %}
The mapping process starts with a database identifying the unused lots, and relating this site data in relation to existing datasets for the city.[@Mochaux:2010vq 90] From there the conditions local to each particular site Werner investigated using a variety of simulation techniques for understanding thermodynamics, drainage, wind, and insolation phenomena at a local level. [@Mochaux:2010wx 238]
This data then informs a subsequent process of parametric design development that produces a proposal unique to each site and optimised to address its local conditions. Working within Rhinoceros/Grasshopper, the parametric system operates primarily through small topographic manipulations, distributing hard- and soft- scape surfaces, and distributing vegetation. These act to precisely mediate "air quality, drainage, and energy loads"[@Mochaux:2010wx 238] and feed into a secondary model that quantifies the funding opportunities available at each location as well as the benefits that each site offers as compared to traditional infrastructures.[@Mochaux:2010wx 240] As a whole the network acts as "an archipelago of opportunity, resistant to traditional forms of design, but open to more novel modes of speculation."[@Mochaux:2010vq 90]
-
-
-
+{% include elements/figure.html image='local-code/1.png' caption='TODO' credit='Image from Mochaux, Nicholas de. “Local Code: Real Estates.” *Architectural Design* 80, no. 3 (May 30, 2010): 91' %}
+{% include elements/figure.html image='local-code/2.jpg' caption='TODO' credit='(Image from competition boards http://wpa2.aud.ucla.edu/info/index.php?/theprojects/local-code/)' %}
While the proposal here aims to address pressing needs such as poor stormwater drainage and the urban heat island effect, the methodology (since applied to other cities) also aims to provoke a more thorough consideration of geospatial technologies within design practice.[@Mochaux:2010vq 90] Mochaux highlights that while data-driven architectural design often makes use of environmental data and analysis (such as say solar conditions) there use of cartographic data is under-appreciated relative to other fields where it is a crucial and ubiquitous resource.[@Mochaux:2010wx 237] While the project begins with an established process of GIS-enabled data gathering and analysis, its novelty is in connecting this large-scale data set to much smaller-scale design outputs.
diff --git a/site/_projects/max-iv-laboratory.md b/site/_projects/max-iv-laboratory.md
index 383ab334..1d2773ac 100644
--- a/site/_projects/max-iv-laboratory.md
+++ b/site/_projects/max-iv-laboratory.md
@@ -14,7 +14,7 @@ categories:
tags: grasshopper,
---
-
+{% include elements/figure.html image='max-iv-laboratory/7.jpg' title='The MAX Lab facility uses a rippled spiral of topographic form to surround the main building.' credit="Image via Snøhetta website's project page (https://snohetta.com/projects/70-max-iv-laboratory-landscape)" %}
In designing this new scientific facility a major concern was that external vibrations from a nearby highway would disrupt the measurements from sensitive laboratory instruments.[@Snohetta:2016us 1] The site's pre-existing topography — a flat slope — heightened this fear as the largey planar surface exacerbated the issue.[@Snohetta:2016us 2] Thus a key design goal for Snøhetta was to maximise the landscape's surface area through a rippled topography that would, in effect, scatter the vibrations that might interfere with the laboratory. At the same time, such an exuberant grading could provide some ancillary benefits such as managing the water run-off.[@Snohetta:2016us 2]
@@ -22,12 +22,10 @@ In designing this new scientific facility a major concern was that external vibr
Several Grasshopper definitions were used across the project. In the main definition that drove the base landform, the vibrations from the adjacent roads were implemented as a parametised constraint whose exact value could be honed over many iterations in conjunction with an engineering team.[@Walliss:2016vy 39] Once set, this constraint allowed the design team to then assess the dampening effects of specific topographic forms and fine-tune them. The resulting topographies could then be further analysed and evaluated according to secondary design criteria that were encapsulated in other definitions that would simulate wind conditions, inform tree planting, visualise a maximum slope gradient, or measure stormwater drainage and retention.[@Walliss:2016vy 37]
-
-
-
+{% include elements/figure.html image='max-iv-laboratory/3.jpg' %}
+{% include elements/figure.html image='max-iv-laboratory/6.jpg' title='The topographic form was designed using an intersecting series of geometric projections that extend as tangents from the outer ring of the main laboratory building.' credit='Image via Snøhetta press release "The MAX IV Laboratory Landscape Design by Snøhetta to Open Summer 2016."' %}
As compared to other projects discussed, the design process for the MAX Lab IV landscape presents a clearer (or perhaps just more publicly articulated) example of how computational design methods can improve landscape architectural design development in a quite fundamental manner. It makes a case for particular tools as a necessary means to achieve a crucial level of precision when testing and evaluating a complex landscape design against a complex design goal. The validity and the results of this testing are still just information to be considered by the designers and their consultants, but the use of parametric models here can help to speed that testing and make trade-offs between design criteria more explicit.
-
-
- d
+{% include elements/figure.html image='max-iv-laboratory/model.png' %}
+{% include elements/figure.html image='max-iv-laboratory/definition.png' caption='Grasshopper definition recreating the basic pattern effect that defines the topographic forms.' credit='Philip Belesky, for http://groundhog.la' %}
diff --git a/site/_projects/relational-urbanism-18.md b/site/_projects/relational-urbanism-18.md
index b53474ef..52d62d2e 100644
--- a/site/_projects/relational-urbanism-18.md
+++ b/site/_projects/relational-urbanism-18.md
@@ -14,7 +14,7 @@ tags:
---
-
+{% include elements/figure.html image='relational-urbanism-18/1.png' caption='The particular topography and substrates present on site inform simulations that examine new potential water flows over time' credit='(image from paper)' %}
Enriqueta Llabres and Eduardo Rico's work at the Bartlett identifies a lineage of material computation in design practices, with Frei Otto's work as key "project of extracting logics of distribution and form derived from the careful study of material behaviour".[@Llabres:2014vv 52] In particular they look at his experiments at a territorial level, where he identified large scale organisational patterns in real landscapes and then reproduced these through physical tests that employed self-organising phenomena. As an example, on of these investigations used floating magnets to identify a minimal-energy state of equilibrium within a network while maintaining connectivity between key nodes.[@Llabres:2014vv 53]
@@ -28,9 +28,8 @@ Physical models, working in conjunction with digital sensing systems, explored t
The results of these tests were recorded using laser capture and chromatic filtering to create a 3D model that can identify particular patterns in the direction and distance of water flows.[@Llabres:2014vv 59] Designers can then intervene into the form of the model to their understanding of the sedimentary dynamics against both the existing landscape state and against alternative states that introduce new physical formations.[@Llabres:2014vv 59]
-
-
-
+{% include elements/figure.html image='relational-urbanism-18/2.png' caption='The model tests Hydrological flows against a variety of different morphological interventions.' credit='(image from paper)' %}
+{% include elements/figure.html image='relational-urbanism-18/3.png' caption="Digital capture of the model's water flows over time depict the water's trajectory and volume." credit='(image from paper)' %}
There are difficulties in 'miniaturising' such a simulation, in terms of both ensuring the dynamics are correct reflection of the larger scale system[@Llabres:2014vv 55] and in terms of ensuring the sensing techniques are of sufficient resolution to capture small scale changes.[@Llabres:2014vv 61] Nevertheless the hybrid analog/digital system allows the design process to become more intuitive where seeing and modifying a physical model creates causative relationships between complex non-linear phenomena that can be examined and tested with a specificity that well exceeds the designer's understanding.[@Llabres:2014vv 62]
diff --git a/site/_projects/sony-forest.md b/site/_projects/sony-forest.md
index 8c14aab9..b65e67e7 100644
--- a/site/_projects/sony-forest.md
+++ b/site/_projects/sony-forest.md
@@ -17,11 +17,11 @@ ANS Studio developed a constraints-based parametric model — a "Seed Scattering
What distinguishes this project from many other approaches — such of that of Snohetta — is the sophistication of the modelling process and the use of the model as the key design driver spanning from site analysis to design documentation. Rather than using landscape form as the key site of design investigation (and have analysis performed in response to changes) the model itself embodied the process of form development, with the designer instead choosing amongst possible solutions and adjusting input weights.
-
+{% include elements/figure.html image='sony-forest/1.png' caption='A model of plant growth was used to project the expected plant morphology over time.' credit='(image from paper)' %}
The model itself performed a number of steps when creating a possible design. Broadly speaking the first phase was in identifying how environmental conditions, such as soil composition, building shading, and wind sheltering, affected different portions of the site. Follow from this the design logic was developed, whereby the designer could adjust parameter's values and possible layout patterns for how the plant placement would respond to the environmental conditions. Finally the system would take all of these into account to create the planting plan, with the algorithm's primary outputs being the 'seed' points that represented a plant with a particular spacing and species optimised to the given site conditions and design criteria.[@Takenaka:2012vn 431] The location of the pathway system occurs after this distribution (optimising to work around root systems).
-
+{% include elements/figure.html image='sony-forest/2.png' caption='The design logic was able to reformulate the tiling and vegetation distributions according to desired entry paths.' credit='(image from paper)' %}
This system had a number of benefits:
diff --git a/site/_techniques/analogue-computation.md b/site/_techniques/analogue-computation.md
index a5db8a24..d0a48b3e 100644
--- a/site/_techniques/analogue-computation.md
+++ b/site/_techniques/analogue-computation.md
@@ -1,7 +1,7 @@
---
title: Analogue Computation
excerpt: A different approach to biomimicry — using digital and analogue methods to better understand natural phenomena.
-thumbnail: thumbnail.jpg
+thumbnail: thumbnail.png
date: 17-11-07
---
@@ -11,7 +11,7 @@ Other ways to calculate exist. Analogue computation, is a method for employing r
Within a landscape context the use of physical models as test-beds has a long history.[@Llabres:2014vv 55] The US Army Core of Engineers built many hydraulic models to investigate how to best implement flood control measures in a manner that accounts for the holistic operation of the chosen area.[@Llabres:2014vv 56] By using physical models as test-beds, engineers could simulate various landscape conditions at smaller scales that accurately reflected complex behaviours. However this form of modelling is often costly in terms of both the initial construction and its use.[@Llabres:2014vv 56][@Davis:2015uw 40]
-
+{% include elements/figure.html image='analogue-computation/3.jpg' caption='The Mississippi River Basin Model.' credit='Image via 99% Invisible, "America\'s Last Top Model", https://99percentinvisible.org/episode/americas-last-top-model/' %}
This form of physical modelling — where real landscape materials test real landscape phenomena — is aided by new digital techniques for easily gathering data from physical models. For example, the use of laser-based scanning methods allow for topographic data to be continuously recorded while cheap sensors and actuators precisely control the release water or light. This form of hybrid modelling — where physical media test particular phenomena in conjunction with digital data processing are descried as 'proxi models' or 'responsive technologies' in the precedents discussed here. Particularly for simulations of geomorphological and flow-based criteria it may be one of few accurate options available given the high degree of material and physical accuracy required[@Walliss:2016vy] preclude digital simulation.[^preclude]
@@ -23,7 +23,7 @@ While most of Ott's experiments were highly dynamic — i.e. the magnets and nee
Taking Otto's experiments as a point of departure Enriqueta and Eduardo look to new forms of 'proxi modelling' that better approximate the means by which landscapes transform in response to natural and designed events.[@Llabres:2014vv 54] One example looks at a Canadian site and the hydrological and geomorphological effects of mineral extraction. Here the mining process has dammed and diverted existing rivers to capture water for industrial use, which in turn creates new 'trailing pods' and new patterns of sedimentation. The new and disrupted hydrological flows are a starting point for imagining interventions that better re-naturalise these industrial outputs; a process complicated by the dynamic formation of both the new and existing water courses. [@Llabres:2014vv 57]
-
+{% include elements/figure.html image='analogue-computation/1.png' caption='The particular topography and substrates present on site inform simulations that examine new potential water flows over time.' credit='Image via Enriqueta Llabres and Eduardo Rico, "Proxi modelling: A tacit approach to territorial praxis," The Journal of Space Syntax 5, no. 1 (August 2014): 60' %}
Physical models, working in conjunction with digital sensing systems, explored these dynamics by simulating the process of delta formation that results when sediment infiltrates slower-moving water bodies:
@@ -33,7 +33,7 @@ The results of these tests were recorded using laser capture and chromatic filte
There are difficulties in 'miniaturising' such a simulation, in terms of both ensuring the dynamics are correct reflection of the larger scale system[@Llabres:2014vv 55] and in terms of ensuring the sensing techniques are of sufficient resolution to capture small scale changes.[@Llabres:2014vv 61] Nevertheless the hybrid analogue/digital system allows the design process to become more intuitive where seeing and modifying a physical model creates causative relationships between complex non-linear phenomena that can be examined and tested with a specificity that well exceeds the designer's understanding.[@Llabres:2014vv 62]
-
+{% include elements/figure.html image='analogue-computation/2.png' caption="The model tests Hydrological flows against a variety of different morphological interventions (left) while a digital capture of the model's water flows over time depict the water's trajectory and volume (right)." credit='Image via Enriqueta Llabres and Eduardo Rico, "Proxi modelling: A tacit approach to territorial praxis," The Journal of Space Syntax 5, no. 1 (August 2014): 60' %}
This method is placed in contrast to that of traditional parametric methods of simulation — whereby the advantage of the proxi model is that it is "constantly in flux and shifting, with sand and water changing the overall configuration of the landscape and the urban environment"[@Llabres:2014vv 65] creating a method that is not "just a projective tool purely emanating from the designer."[@Llabres:2014vv 62] To an extent this is a characterisation that derives from the nature of the phenomena investigated and the simulative methods though — parametric models themselves are also capable of rapidly changing their configuration in terms of their initial state and the simulated outcomes. What obstructs this in cases of many hydrological or hydrologically-driven systems is the computationally taxing and irreducible complexity of said fluid phenomena where simulations are difficult to integrate into a rapid feedback system. Without the ability to quickly test intuitive design decisions against simulations of systems conditions the capabilities of either approach has limits whereby the designer cannot build up an understanding of the phenomena that consciously informs (rather than just validates) design intent.
diff --git a/site/_techniques/field-conditions.md b/site/_techniques/field-conditions.md
index 63be7af4..3fd4612d 100644
--- a/site/_techniques/field-conditions.md
+++ b/site/_techniques/field-conditions.md
@@ -14,7 +14,7 @@ Unlike the hierarchical patterns of classicism or the minimal montages of modern
The descriptions of urban phenomena (particularly urban growth) as a field condition are one of the enduring impacts of this notion within landscape architecture, wherein the distinctions between architectural and landscape conditions collapse when considered as instances of unified process of continuous differentiation.[@Moloney:2011bd 219] Considering sites in this manner was seen as better registering the complexity and dynamism of landscape systems; particularly given contemporary patterns of urbanism
that move away from strict spatial and geometric orders and towards other methods of organisation.[@Barnett:2013tw 69]
-
+{% include elements/figure.html image='field-conditions/1.png' caption='Diagram of various field compositions.' credit='Peter Hudac (https://peterhudac.wordpress.com/2010/09/22/from-object-to-field/) largely adapted from page 26 of Stan Allen, “From Object to Field,” Architectural Design 67, no. 5 (1997)' %}
The second enduring impact is in how the concept helps re-evaluate figure-ground relationships in mapping. Considered as a field, the figure is understood "not as a demarcated object but as an effect emerging from the field itself — as moments of intensity; as peaks or valleys."[@Allen1997 28] This approach has lead to strategies that seek to employ the field condition as a generative or analytic device, primarily in plan, as evident in a number of graphic techniques:[^ghn]
@@ -25,12 +25,14 @@ The second enduring impact is in how the concept helps re-evaluate figure-ground
- The use of vector diagrams to measure site information; often paired with variable-length or coloured arrows to display site information that has both a spatial direction (say the movement of air) as well as a given magnitude.
- Allowing the grid to transform and transfigure in relationship to the spatial systems embedded in a site so that it can be appropriated as a structure for generating novelty rather than enforcing order.[@Monacella:2011vp 44]
-
+{% include elements/figure.html image='field-conditions/2.jpg' caption="Lateral Office's study of the ecological characteristics across Baffin Island in Nunavut, Canada." credit='*Image via Lateral Office for the Arctic Food Network project, posted on ArchDaily (https://www.archdaily.com/182435/arctic-food-network-lateral-office)' %}
In each case the graphic symbols employed attempt to — as much as is possible within a primarily graphic medium — shift away from strictly demarcated geometries towards more distributed and diffuse modes of representation. This parallels a distinction often discussed in relation to field conditions: that of intensive conditions and extensive conditions. In the original (thermodynamics) sense an extensive material property is one that is proportional to quantity: the mass or volume of an object will reduce if that object is divided whereas an intensive properties — such as temperature or density — would not.[@DeLanda:2006uy 152] When talking about more general types of phenomena, rather than individual properties, intensive conditions are described as those that drive or exhibit dynamism, such as meteorological conditions that flux according to constant shifts in pressure differences, air movement, or temperature fronts.[@DeLanda:2006uy 152] Such "mobile and productive" differences setup a kind of map/territory distinction whereby underpinning intensive conditions — say that of lithospheric lava movements — produce extensive measures — landform.[@DeLanda:2006uy 152] Traditional forms of mapping document extensive phenomena (by geometrically extensive means) that are the results of these underpinning processes wheras more 'intensive' modes of mapping can begin to "show the process itself."[@DeLanda:2006uy 152]
-
+{% include elements/figure.html image='field-conditions/4.jpg' caption="Plan of the different 'climatic lands' of the Jade Eco Park, as expressed by the different intensities of the heat-shifting (pink) and humidity-shifting (blue) vegetation and devices." credit='Image by Mosbach paysagates, Philippe Rahm architects, and Ricky Liu & Associates for the TAICHUNG GATEWAY PARK competition.' %}
Complicating this distinction is a characterisation of design strategies and graphic techniques as themselves emblematic of an intensive or extensive process. Codified systems of documentation and drawing — plans, sections, elevations — can be characterised as self-limiting techniques for "domesticating matter within metric space" whose geometric rigour is required for clear communication.[@Reiser:2009tz 80] In contrast, the lack of constraints found in a sketch[@Reiser:2009tz 80] or the diagram[@Reiser:2009tz 122] render it as methods for intensive exploration; whose expressions can be then be translated and evaluated against the constraints of codified techniques. An interplay between intensive and extensive modes of design exploration are often desirable, such as stepping between a plan and a exploratory physical model, as the differences in mode create a reciprocity where the "creative tendency of intensive fields and the codifying tendency of extensive fields do not merely work in succession."[@Reiser:2009tz 80]
As in analogue media, the role of geometry in digital models acts as a regulator of intensive material conditions; as a way of delimiting their properties into a particular fixed scalar, temporal, and spatial limit.[@Reiser:2009tz 80] At the same time, most digital models can be seen as more extensive in their codification of these properties: they are assemblages of data organised according to highly structured and inflexible properties that define geometric types such as that of a `Surface` or `Mesh`. While parametric modelling would be considered as extensive (if not more so) than standard forms of geometric modelling in terms of their implementation and codification, the malleability of that codification (as assemblages of parametric relationships) can enable a generative intensity as previously-fixed geometric properties become dynamic from the perspective of the modeller.
+
+{% include elements/figure.html image='field-conditions/3.jpg' caption='Mapping of soil conditions across a littoral area according to parametric analysis of a terrain model and site data.' credit='Image via Philip Belesky for the "Processes and Processors" project (http://philipbelesky.com/projects/processes-and-processors/)' %}
diff --git a/site/assets/cites.bib b/site/assets/cites.bib
index 78ee9dc5..8a72f77d 100644
--- a/site/assets/cites.bib
+++ b/site/assets/cites.bib
@@ -1,4 +1,4 @@
-%% Created using Papers on Mon, 20 Nov 2017.
+%% Created using Papers on Sun, 08 Apr 2018.
%% http://papersapp.com/papers/
@article{Allen1997,
@@ -78,6 +78,25 @@ @article{Elkin:2017ee
month = aug
}
+@book{Ferrater:2016ta,
+author = {Ferrater, Carlos and Ferrater, Borja},
+title = {{Synchronizing Geometry}},
+publisher = {Actar},
+year = {2016},
+series = {Landscape, Architecture {\&} Construction; Ideographic Resources},
+month = jun
+}
+
+@article{Hansen:2011tka,
+author = {Hansen, Andrea},
+title = {{From Hand to Land: Tracing Procedural Artifacts in the Built Landscape}},
+journal = {Scenario Journal},
+year = {2011},
+volume = {1},
+number = {1},
+month = oct
+}
+
@article{Llabres:2014vv,
author = {Llabres, Enriqueta and Rico, Eduardo},
title = {{Proxi modelling: A tacit approach to territorial praxis}},
@@ -108,6 +127,14 @@ @phdthesis{Monacella:2011vp
month = nov
}
+@book{Preziosi:2004vf,
+author = {Preziosi, Massimo},
+title = {{Carlos Ferrater: Works and Projects}},
+publisher = {Phaidon Press},
+year = {2004},
+month = oct
+}
+
@phdthesis{Raxworthy:2013wa,
author = {Raxworthy, Julian},
title = {{Novelty in the Entropic Landscape}},
diff --git a/site/assets/documentation/plants/1.jpg b/site/assets/documentation/plants/1.jpg
index e4db67a4..e54edb2b 100644
--- a/site/assets/documentation/plants/1.jpg
+++ b/site/assets/documentation/plants/1.jpg
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:23577410b27d45c4959f47d6f830be4a5bd727d2c7e30a96cbd3232e64d3f34e
-size 145469
+oid sha256:28d211a1d1288743b07bc54ea3d03760c0b7e6b89022ef2927c4b0f1b0a29e4c
+size 168662
diff --git a/site/assets/documentation/plants/2.jpg b/site/assets/documentation/plants/2.jpg
deleted file mode 100644
index e88c5a96..00000000
--- a/site/assets/documentation/plants/2.jpg
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:9a1091b6e5258fc62495c3e7dd23a05206f6e9080324b9bc7568aa07ac182e1f
-size 145528
diff --git a/site/assets/main.js b/site/assets/main.js
index 2fe5524e..18430084 100644
--- a/site/assets/main.js
+++ b/site/assets/main.js
@@ -1,16 +1,23 @@
---
---
-// Masonry Include
+// INCLUDES
+
+// Masonry
{% include_absolute /node_modules/masonry-layout/dist/masonry.pkgd.min.js %}
-// Feather Include
+// Feather
{% include_absolute /node_modules/feather-icons/dist/feather.min.js %}
-// Icons
+// Picture Element Polyfill
+{% include_absolute /node_modules/picturefill/dist/picturefill.min.js %}
+
+// ACTIONS
+
+// Instantiate Icons
feather.replace();
-// Menu Toggle; via https://bulma.io/documentation/components/navbar/
+// Add Menu Toggle; via https://bulma.io/documentation/components/navbar/
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
@@ -30,7 +37,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
});
-// Masonry Grid
+// Setup Masonry Grid
var grid = document.querySelector('.masonry-grid');
if (grid !== null) {
var msnry = new Masonry( grid, {
diff --git a/site/assets/projects/botanical-gardens-of-barcelona/1.jpg b/site/assets/projects/botanical-gardens-of-barcelona/1.jpg
new file mode 100644
index 00000000..868f7de4
--- /dev/null
+++ b/site/assets/projects/botanical-gardens-of-barcelona/1.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b3a8edd228bd5e8e88edfa5d78bab211b419f1c87801dbd9eb9bea9d744e0d77
+size 278113
diff --git a/site/assets/projects/botanical-gardens-of-barcelona/2.jpg b/site/assets/projects/botanical-gardens-of-barcelona/2.jpg
new file mode 100644
index 00000000..ded09b07
--- /dev/null
+++ b/site/assets/projects/botanical-gardens-of-barcelona/2.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:aaef3de58ad303a00f69eaa3c25a8b7ead3e0ea324bfcdb6b8ab0029388cbb4c
+size 250382
diff --git a/site/assets/projects/botanical-gardens-of-barcelona/3.jpg b/site/assets/projects/botanical-gardens-of-barcelona/3.jpg
new file mode 100644
index 00000000..dad9a848
--- /dev/null
+++ b/site/assets/projects/botanical-gardens-of-barcelona/3.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2b7f906f0a2a3ae87982b1b649c4e0fba00df493714662ae48ecd4a81fd04f89
+size 304791
diff --git a/site/assets/projects/botanical-gardens-of-barcelona/4.jpg b/site/assets/projects/botanical-gardens-of-barcelona/4.jpg
new file mode 100644
index 00000000..472dc03d
--- /dev/null
+++ b/site/assets/projects/botanical-gardens-of-barcelona/4.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f9af140325b4b76db4d5a43b8872a186da05c246fd4082f4f1f3b0346c91239d
+size 846664
diff --git a/site/assets/projects/botanical-gardens-of-barcelona/5.jpg b/site/assets/projects/botanical-gardens-of-barcelona/5.jpg
new file mode 100644
index 00000000..28c780ca
--- /dev/null
+++ b/site/assets/projects/botanical-gardens-of-barcelona/5.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ba5f67d6a29f874cefec9aaf904435a9a6b1719f904bae917bef0cec2437cb87
+size 737008
diff --git a/site/assets/projects/botanical-gardens-of-barcelona/7.jpg b/site/assets/projects/botanical-gardens-of-barcelona/7.jpg
new file mode 100644
index 00000000..7fe6358d
--- /dev/null
+++ b/site/assets/projects/botanical-gardens-of-barcelona/7.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:aacd7162b2745f9932c0ce7493f47a1a309f5f9e52c7090ad7f38bd353eec244
+size 1169503
diff --git a/site/assets/projects/botanical-gardens-of-barcelona/definition.png b/site/assets/projects/botanical-gardens-of-barcelona/definition.png
new file mode 100644
index 00000000..fe569fff
--- /dev/null
+++ b/site/assets/projects/botanical-gardens-of-barcelona/definition.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d980eda783c8b0943bc2fe55709690363e9885939267c0048c367d7b84c355e3
+size 2303304
diff --git a/site/assets/projects/botanical-gardens-of-barcelona/model.jpg b/site/assets/projects/botanical-gardens-of-barcelona/model.jpg
new file mode 100644
index 00000000..72fee91e
--- /dev/null
+++ b/site/assets/projects/botanical-gardens-of-barcelona/model.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7232312f91830441218abf2c64124a32c904da57e6a9ccdca4e925ec56b33e6f
+size 644788
diff --git a/site/assets/projects/botanical-gardens-of-barcelona/thumbnail.png b/site/assets/projects/botanical-gardens-of-barcelona/thumbnail.png
new file mode 100644
index 00000000..6a02c980
--- /dev/null
+++ b/site/assets/projects/botanical-gardens-of-barcelona/thumbnail.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:44f508777ba20745f9b794c26aac516457199b6d55631d61e672ac7367c7d1f1
+size 337728
diff --git a/site/assets/projects/keio-university-roof-garden/3.jpg b/site/assets/projects/keio-university-roof-garden/3.jpg
index 2f1d3529..7c7e1be5 100644
--- a/site/assets/projects/keio-university-roof-garden/3.jpg
+++ b/site/assets/projects/keio-university-roof-garden/3.jpg
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:3d46cf748d72769e9634383a1dd505c48b196f4c151d7c327fddda13098b3ede
-size 100753
+oid sha256:ceceddc94c26e7af1b14a240a49c15d02f416594241d0ada81e5e76732f05b46
+size 197303
diff --git a/site/assets/sass/_aesthetics.scss b/site/assets/sass/_aesthetics.scss
index 751615e0..61d7be29 100644
--- a/site/assets/sass/_aesthetics.scss
+++ b/site/assets/sass/_aesthetics.scss
@@ -4,7 +4,12 @@
.content {
- h1, h2, h3, h4, h5, h6 {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
font-family: $family-heading;
font-weight: 800;
}
@@ -14,9 +19,10 @@
}
}
-.button, .message {
- font-weight: 600;
+.button,
+.message {
font-family: $family-heading;
+ font-weight: 600;
}
// Don't load an extra web font just for italics
@@ -28,47 +34,54 @@ em {
// Elements
//------------------------------------------------------------------------------
-.content figure {
+.content figure.gh-figure {
margin-left: 0;
margin-right: 0;
figcaption {
- font-family: $family-heading;
- padding-top: 1rem;
font-style: normal;
+ line-height: 1.33;
+ padding: 0.5rem 3rem 0;
// Use the emphasis part as a proxy for the attribution
em {
@extend .is-size-7;
display: block;
margin: 0 auto;
- max-width: 66%;
+ }
+ p + em {
+ margin-top: -.5rem;
}
}
}
-.content figure + figure {
+.content figure.gh-figure + figure.gh-figure {
margin-top: -1.5em; // Subsequent images have tight spacing
}
.gh-component {
- margin-top: 1.5rem;
margin-bottom: 1.5rem;
+ margin-top: 1.5rem;
overflow: scroll; // Blown out wrappings can mess up entire page
p {
margin-top: 1rem;
}
- .level, .table {
- margin-bottom: 0;
+ .level,
+ .table {
+ margin-bottom: -10px;
}
.level-item:last-child {
margin-right: 0;
}
+ .feather {
+ margin: 0 0 -6px 0;
+ }
+
}
.no-wrap {
white-space: nowrap; // For table cells
-}
\ No newline at end of file
+}
diff --git a/site/assets/sass/_colors.scss b/site/assets/sass/_colors.scss
index 633d4b17..81fe0224 100644
--- a/site/assets/sass/_colors.scss
+++ b/site/assets/sass/_colors.scss
@@ -5,41 +5,59 @@
.gh-plugin {
@extend .is-dark;
}
+
.gh-documentation {
@extend .is-danger;
}
+
.gh-techniques {
@extend .is-info;
}
+
.gh-projects {
@extend .is-primary;
}
+
.gh-about {
@extend .is-link;
}
.gh-plugin-content {
- a, code {
+ a,
+ code,
+ .footnotes {
color: darken($plugin, 15%);
}
}
+
.gh-documentation-content {
- a, code {
+ a,
+ code,
+ .footnotes {
color: darken($docs, 15%);
}
}
+
.gh-techniques-content {
- a, code {
+ a,
+ code,
+ .footnotes {
color: darken($techniques, 15%);
}
}
+
.gh-projects-content {
- a, code {
+ a,
+ code,
+ .footnotes {
color: darken($projects, 15%);
}
}
+
.gh-about-content {
- a, code {
+ a,
+ code,
+ .footnotes {
color: darken($about, 15%);
}
}
@@ -53,39 +71,48 @@
&.gh-plugin-text {
color: $plugin;
- &:hover, &.active {
+ &:hover,
+ &.active {
background: $plugin;
color: $white;
}
}
+
&.gh-documentation-text {
color: $docs;
- &:hover, &.active {
+ &:hover,
+ &.active {
background: $docs;
color: $white;
}
}
+
&.gh-techniques-text {
color: $techniques;
- &:hover, &.active {
+ &:hover,
+ &.active {
background: $techniques;
color: $white;
}
}
+
&.gh-projects-text {
color: $projects;
- &:hover, &.active {
+ &:hover,
+ &.active {
background: $projects;
color: $white;
}
}
+
&.gh-about-text {
color: $about;
- &:hover, &.active {
+ &:hover,
+ &.active {
background: $about;
color: $white;
}
diff --git a/site/assets/sass/_custom.scss b/site/assets/sass/_custom.scss
index 5dc9e254..c5799b78 100644
--- a/site/assets/sass/_custom.scss
+++ b/site/assets/sass/_custom.scss
@@ -20,9 +20,13 @@ $info: $techniques;
$projects: rgb(246, 112, 140);
$primary: $projects;
+// Dull; used by the items in the top-right menu
+$dull: rgb(155, 155, 155);
+
// Import IBM Plex Styles Defaults
$family-primary: 'ibm-plex-sans'; // The main body font
$family-heading: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
+$family-monospace: "Menlo", monospace;
$text-strong: rgb(90, 90, 90); // Heading text color
// Customise Typography
@@ -44,4 +48,4 @@ $notification-padding: 1.25rem 1.25rem 1.25rem 1.5rem; // By default is 2.5
// is-info USED for techniques
// is-success available for download alerts (downloads)
// is-warning available for warning alerts (beta label)
-// is-danger USED for documentation
\ No newline at end of file
+// is-danger USED for documentation
diff --git a/site/assets/sass/_icons.scss b/site/assets/sass/_icons.scss
index a92dbabc..bb449dd4 100644
--- a/site/assets/sass/_icons.scss
+++ b/site/assets/sass/_icons.scss
@@ -6,13 +6,13 @@
// Icons in alerts
.gh-message-icon {
- padding-right: 4px;
- display: flex;
align-items: center;
+ display: flex;
justify-content: center;
+ padding-right: 4px;
.feather {
- margin-right: 0px;
+ margin-right: 0;
}
}
@@ -27,9 +27,9 @@
// Sizing tweaks for homepage titles
h3 .feather {
- width: 36px;
height: 36px;
margin-bottom: -4px;
+ width: 36px;
}
@@ -41,4 +41,4 @@ h3 .feather {
// Spacing tweaks in mobile menu
.navbar-menu.is-active .feather {
margin-bottom: -5px;
-}
\ No newline at end of file
+}
diff --git a/site/assets/sass/_layout.scss b/site/assets/sass/_layout.scss
index 5e2c1776..867d01cc 100644
--- a/site/assets/sass/_layout.scss
+++ b/site/assets/sass/_layout.scss
@@ -10,6 +10,10 @@
padding-right: 1.5rem;
}
+p > img + p > img {
+ border: 5px solid red;
+}
+
//------------------------------------------------------------------------------
// Menu
//------------------------------------------------------------------------------
@@ -22,17 +26,17 @@
}
.navbar-end .navbar-item {
- color: #666;
+ color: $dull;
}
.navbar-menu.is-active .navbar-item {
- padding: 0.5rem 1rem; // Restore default padding for mobile menus
+ padding: .5rem 1rem; // Restore default padding for mobile menus
}
@media print
{
- .no-print, .no-print *
- {
+ .no-print,
+ .no-print * {
display: none !important;
}
}
@@ -54,8 +58,8 @@
}
.masonry-grid {
- margin-top: -20px;
margin-bottom: 50px;
+ margin-top: -20px;
}
.masonry-item p {
@@ -67,9 +71,10 @@
.title {
@extend .is-size-5;
}
+
p {
- margin-top: 4.5rem;
@extend .is-size-6;
+ margin-top: 4.5rem;
}
}
@@ -88,8 +93,8 @@
}
p {
- margin-top: 9rem;
@extend .is-size-5;
+ margin-top: 9rem;
}
}
@@ -104,8 +109,8 @@
// Sticky Footer
.footer-container {
display: flex;
- min-height: 100vh;
flex-direction: column;
+ min-height: 100vh;
}
.footer-pushdown {
diff --git a/site/assets/sass/_type.scss b/site/assets/sass/_type.scss
index 5b9f96a8..66bf7cb4 100644
--- a/site/assets/sass/_type.scss
+++ b/site/assets/sass/_type.scss
@@ -4,8 +4,8 @@
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 400;
- src: url("fonts/IBMPlexSans-Regular-Pi.woff2") format("woff2"),
- url("fonts/IBMPlexSans-Regular-Pi.woff") format("woff");
+ src: url('fonts/IBMPlexSans-Regular-Pi.woff2') format('woff2'),
+ url('fonts/IBMPlexSans-Regular-Pi.woff') format('woff');
unicode-range: 'U+03C0, U+0E3F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+EBE1, U+EBE3-EBE4, U+EBE6-EBE7, U+ECE0, U+EFCC';
}
@@ -13,8 +13,8 @@
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 400;
- src: url("fonts/IBMPlexSans-Regular-Latin2.woff2") format("woff2"),
- url("fonts/IBMPlexSans-Regular-Latin2.woff") format("woff");
+ src: url('fonts/IBMPlexSans-Regular-Latin2.woff2') format('woff2'),
+ url('fonts/IBMPlexSans-Regular-Latin2.woff') format('woff');
unicode-range: 'U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02';
}
@@ -22,8 +22,8 @@
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 400;
- src: url("fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2"),
- url("fonts/IBMPlexSans-Regular-Latin1.woff") format("woff");
+ src: url('fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2'),
+ url('fonts/IBMPlexSans-Regular-Latin1.woff') format('woff');
unicode-range: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FB01-FB02';
}
@@ -31,7 +31,32 @@
font-family: 'ibm-plex-sans';
font-style: normal;
font-weight: 400;
- src: url("fonts/IBMPlexSans-Regular-Latin3.woff2") format("woff2"),
- url("fonts/IBMPlexSans-Regular-Latin3.woff") format("woff");
+ src: url('fonts/IBMPlexSans-Regular-Latin3.woff2') format('woff2'),
+ url('fonts/IBMPlexSans-Regular-Latin3.woff') format('woff');
unicode-range: 'U+0102-0103, U+1EA0-1EF9, U+20AB';
}
+
+code {
+ border-radius: .5em;
+}
+
+// Footnote styling
+.citation sup,
+.footnote-back {
+ background: $background;
+ border-radius: .5em;
+ font-size: 66%;
+ font-weight: bold;
+ margin-right: 2px;
+ padding: .1rem .30rem;
+}
+
+// Override the styling from colors to ensure footnotes' text matches body
+.footnotes {
+ font-weight: bold;
+
+ li p {
+ color: $text;
+ font-weight: normal;
+ }
+}
diff --git a/site/assets/techniques/analogue-computation/thumbnail.jpg b/site/assets/techniques/analogue-computation/thumbnail.jpg
deleted file mode 100644
index 4d906238..00000000
--- a/site/assets/techniques/analogue-computation/thumbnail.jpg
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:d58f398a79df814c98583432cc8e9da8ae53066aac85839b5399fc3c28a4d42e
-size 51071
diff --git a/site/assets/techniques/analogue-computation/thumbnail.png b/site/assets/techniques/analogue-computation/thumbnail.png
index 966e3f32..eae4e8c1 100644
--- a/site/assets/techniques/analogue-computation/thumbnail.png
+++ b/site/assets/techniques/analogue-computation/thumbnail.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:25c719c7ac9336955fc70e92f986d1e4046119cf5e2855af387cb06ed5886fcb
-size 2546866
+oid sha256:e16a88a1401a2ace5ccad48c59a0d7e32cd30753874b2d612b9db09250d0b096
+size 2531479
diff --git a/site/assets/techniques/field-conditions/4.jpg b/site/assets/techniques/field-conditions/4.jpg
new file mode 100644
index 00000000..775a49fd
--- /dev/null
+++ b/site/assets/techniques/field-conditions/4.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:74368cd1df21ecacdd4a8e7f8a2a68dfd1bbba0842352434621c5ac10bd6f6b0
+size 3551906
diff --git a/site/compile.sh b/site/compile.sh
index 2f15199a..ea2fa76f 100644
--- a/site/compile.sh
+++ b/site/compile.sh
@@ -12,14 +12,12 @@ python ../docs/extract_params.py
# Plugin Icons
# ============
-
rm -rf ./assets/plugin/icons/*.png
cp ../plugin/Resources/**.png ./assets/plugin/icons/
# Project Files
# =============
-
for i in ../docs/*;
# Only do stuff i fthey are a directory
do if [ -d $i ]; then zip -r -j "${i%/}.zip" "$i" -x "*.DS_Store"; fi
@@ -31,7 +29,6 @@ mv ../docs/**.zip ./downloads/documentation/
# Documentation Files
# ===================
-
for i in ../projects/*;
# Only do stuff i fthey are a directory
do if [ -d $i ]; then zip -r -j "${i%/}.zip" "$i" -x "*.DS_Store"; fi
@@ -43,7 +40,6 @@ mv ../projects/**.zip ./downloads/projects/
# NPM Dependencies
# ================
-
cp ./node_modules/@ibm/type/fonts/Sans/web/woff2/IBMPlexSans-Regular*.woff2 ./assets/fonts/
cp ./node_modules/@ibm/type/fonts/Sans/web/woff/IBMPlexSans-Regular*.woff ./assets/fonts/
@@ -56,7 +52,8 @@ MSBuild ../plugin/groundhog.csproj /property:Configuration=Release /verbosity:m
# Plugin Files
# ============
rm -f ../plugin/release/groundhog.gha.mdb
-rm -f ../plugin/release/groundhog.pdb
-rm -f ../plugin/release/groundhog.dll
+rm -f ../plugin/release/groundhog.pdb # Comes from VS build using release config
+mv -f ../plugin/release/groundhog.dll ../plugin/release/groundhog.gha
rm -f ./downloads/plugin/groundhog.zip
-zip -r -j ./downloads/plugin/groundhog.zip ../plugin/release/
\ No newline at end of file
+
+zip -r -j ./downloads/plugin/groundhog.zip ../plugin/release/ -x "*.DS_Store*" -x "*manifest.yml*"
diff --git a/site/package-lock.json b/site/package-lock.json
index 88239b73..bb897f16 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "groundhog",
- "version": "0.6.1a",
+ "version": "0.7.1-b",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -27,7 +27,7 @@
"ev-emitter": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
- "integrity": "sha1-jxiwzlx2pdGAF/ccCnlcZbkTjyo="
+ "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q=="
},
"feather-icons": {
"version": "4.7.0",
@@ -38,24 +38,24 @@
}
},
"fizzy-ui-utils": {
- "version": "2.0.5",
- "resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.5.tgz",
- "integrity": "sha1-1y3rx00snSctvLt7ABcHiX9sMhA=",
+ "version": "2.0.7",
+ "resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
+ "integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
"requires": {
"desandro-matches-selector": "2.0.2"
}
},
"get-size": {
- "version": "2.0.2",
- "resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.2.tgz",
- "integrity": "sha1-VV6pirhzLgwCHp4j4iGa3L45jpg="
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz",
+ "integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q=="
},
"masonry-layout": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/masonry-layout/-/masonry-layout-4.2.1.tgz",
- "integrity": "sha1-HIeLhaiIZrprObm9DhYjSK7XzhM=",
+ "integrity": "sha512-ngJmxszn+JSKreNnrwkjks9OUuwVL2JR8T4iVeE3+g+sJjyoxTLdUNRbYONA25y+nWZn+WZI2GvThRAV+z5Duw==",
"requires": {
- "get-size": "2.0.2",
+ "get-size": "2.0.3",
"outlayer": "2.1.1"
}
},
@@ -65,9 +65,14 @@
"integrity": "sha1-KYY7beEOpdrf/8rfoNcokHOH6aI=",
"requires": {
"ev-emitter": "1.1.1",
- "fizzy-ui-utils": "2.0.5",
- "get-size": "2.0.2"
+ "fizzy-ui-utils": "2.0.7",
+ "get-size": "2.0.3"
}
+ },
+ "picturefill": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/picturefill/-/picturefill-3.0.2.tgz",
+ "integrity": "sha1-+j01//vvWrUwD+KtncqPLjbLons="
}
}
}
diff --git a/site/package.json b/site/package.json
index b2edcdbe..a118d06b 100644
--- a/site/package.json
+++ b/site/package.json
@@ -1,13 +1,14 @@
{
"name": "groundhog",
- "version": "0.7.1b",
+ "version": "0.7.2b",
"description": "groundhog.la site source",
"main": "index.html",
"dependencies": {
"@ibm/type": "^0.5.4",
"bulma": "^0.6.2",
"feather-icons": "^4.7.0",
- "masonry-layout": "^4.2.1"
+ "masonry-layout": "^4.2.1",
+ "picturefill": "^3.0.2"
},
"devDependencies": {},
"scripts": {
diff --git a/site/plugin.md b/site/plugin.md
index 7eb150a0..0a3afe1d 100644
--- a/site/plugin.md
+++ b/site/plugin.md
@@ -1,7 +1,8 @@
---
layout: page
title: Plugin
-excerpt: A plugin for Grasshopper — the visual programming tool for the Rhinoceros modeler.
+excerpt: Download the latest version (0.7.2b) of the Groundhog plugin for Grasshopper.
+thumbnail: thumbnail.png
---
# Download and Install