Community Gardens

Community Gardens is a generative art experience about food and housing insecurity within the student body at NC State.

9.6% of students experienced housing insecurity within the past year. Community Garden's purpose is to raise awareness and challenge the stigmas and bias towards food and housing insecurities.

To view the installation, go to https://communitygardens.immersivescholar.org/.

• Data-Driven: Plant attributes are driven by data collected by Dr Mary Haskett. Read the report, and then see how data affects the plants

• Generative: The gardens are unique every time the garden is created. No one will ever see the same garden twice.

• Democratized: The project runs on large, 20' displays as well as your laptop or your phone. Powered by javascript and WebGL, it runs just about anywhere you are.

This README file follows documentation recommendations established in Testing Guidelines for Immersive Digital Applications to support sharing and testing of immersive digital content.

Hardware dependencies

1. Display type: The project runs on large format displays as well as a laptop or phone.
2. Display size: The project should run on any size and aspect display.
3. Processing power and memory size: See Environments for some considerations for performance based on GPU and devices type
4. Connectivity: The project can be run locally after installation or run using the online hosted version at https://communitygardens.immersivescholar.org/
5. Input devices: See Controls

Software dependencies

1. A modern browser is required to run the remotely hosted version.
2. See Installation for dependencies based on installation method when running locally.

Installation

Community Gardens is developed to be easily installed.

First go to the Community Gardens repository and download the zip file. Unzip the file once it has downloaded.

Next you will need access to the command line. On osx, this is inside the Applications folder. Open the terminal application.

Now drag and drop the unzipped folder in to the terminal application. This will change directory to the downloaded files. To install the application dependencies, type:

npm i

If you receive an error, this means you do not have node or npm installed. Use these instructions to install node and npm.

It will take up to a few minutes for the installation process to complete. Once it has finished, type npm start from the command line to launch the application. It will open a browser window at localhost:3000 with the homepage.

How the data is used

The data is very rich. Details collected range from numeric (age, number of years in school, degree obtained, how many hours a week they work) to behavioral (how the student pays for tuition, are they out of state, are they First Generation) to experiential (did they sleep outside, did they skip meals).

Formula The first data to derive is the overall health factor of the plant. This is derived by the formula

Resources Incoming - Energy Outgoing + Community Support - Emotional Health = Health

For example, if a student has their tuition paid for, they have a high Resources Incoming score. If a student is working 40 hours/week, they have a high Energy Outgoing score. High Community Support scorers are having some of their needs met by programs like the NC State Food Pantry or the Emergency Fund. Students who reported high levels of anxiety have low Emotional Health. Each of these categories is an aggregate of between 3 and 10 responses from the survey.

Visual representation

Students are then collected by their overall health: Plants in the Summer Gardens have summer colors and are well-taken care of. Plants in the Winter Garden have cooler colors and are resource-starved.

Students who are First Generation have mazes drawn in their leaves, representing the additional level of challenge they have to navigate, often on their own.

Students who have higher Incoming Resources have thicker stems.

Students who have higher Energy Outgoing scores have berries displaced from their stems.

Students who have experienced Housing Insecurity are affected by the wind. Their leaves are displaced from the stem; the further the displacement the more severe the insecurity.

Students who experience Food Insecurity have berries drawn as wireframes. Their berries are hollow.

The Degree the student is pursing determines the plant height: taller plants are more senior degrees.

The age of the student determines the number of leaves or petals on the plant.

Students who indicate High Anxiety are drawn with angular lines. Smooth, elegant lines are used for other students

Students with a High GPA have stars drawn on their leaves.

Students who come from Out of State have leaves with topographical maps drawn on them.

Aggregate data

As viewers learn how to 'read' the attributes of the plants, connections are made. For instance, the Garden of Housing Insecurity has many mazes on the leaves. This is because there is a disproportionate number of First Generation students who experience Housing Insecurity.

Gardens

• Summer Garden represents plants who have high aggregate support.

• Winter Garden represents students who have lower levels of support.

• Random Garden is a random sampling of students.

• Resourced represents students who have higher levels of Incoming Resources. Incoming Resource scores are high when a student has:

  • Scholarships
  • Grants
  • Work/study arrangement
  • Family/friends support, either monetarily or for housing
  • An employer who pays for tuition
  • High monthly incomes
  • Get 8 hours of sleep/night

• Energy Outgoing represents students who have higher Energy Outgoing scores. Energy Outgoing is high when a student:

  • is working 30+ hours per week, especially if they are full-time students
  • has children
  • is pursuing their Masters or Doctoral degrees
  • stays in any sort of temporary housing, such as couch surfing, hotel/motel, outdoors, or in an inhabitable space
  • is searching for a job

• Community Support respresents students who are supported by their community. This includes making use of programs such as:

  • Foodbank
  • Campus mealplan
  • SSI
  • Medicaid
  • Section 8 housing
  • Vet benefits

Community Support also considers how safe the student feels within their environment.

• Emotional Health represents the student's emotional health. This is derived by:

  • how calm the student feels
  • how active the student feels
  • how rested the student feels
  • how interested the student feels

• Housing Insecurity represents students who have low housing security scores. They care so much about their education that they are willing to sleep outside or in inhabitable spaces.

• First Generation represents the amazing students who recently immigrated.

Data Processing

The survey's data was exported from a spreadsheet to a json file. The file is zipped to preserve bandwidth.

Once the file is loaded and unzipped, the Insecurity Calculator processes the data. It calculates:

• Resources Incoming
• Energy Outgoing
• Community Fitness
• Personal Scarcity
• Emotional Health

Gardens can be created based around a certain statistic, and derived at any time. Available stastics are:

• BelowPovertyLine
• CommunityGarden
• DidNotEatForADay
• EarnALot
• EarnALotAndAreHungry
• EnergyOutgoing
• ExperienceHunger
• FirstGeneration
• FoodInsecurity
• HighGPA
• HighHealth
• HighResources
• HousingInsecurity
• Inhabitable
• LowHealth
• OutOfState
• PellGrant
• SkipMeals
• SleptOutside
• Wellness
• WorkALotAndAreHungry

Note that the InsecurityCalculator's data is stored staticly. There is no need to pass the InsecurityCalculator around as a prop. Simply use

let data = InsecurityCalculator.getRandomRows({
    count,
    key: ENERGY_OUTGOING
});

The returned data will be count rows of students who meet the Energy Outgoing criteria defined in the stat.

Gardens

Once the desired data is available, gardens are created. A garden is a model, a grouping of plants and a layout for the plants.

Each Garden is a chapter. Chapters can configure colors, backgrounds, plants, and layouts.

• BaseChapter Not to be instantiated directly
• DidNotEatForADayChapter
• EnergyOutgoingChapter
• FirstGenerationChapter
• HighGPAChapter
• HousingInsecurityChapter
• OutOfStateChapter
• PellGrantChapter
• RandomGardenChapter
• ResourcedChapter
• SummerGardenChapter
• WellnessChapter
• WinterGardenChapter

Models contain text and image data about the chapter. This is used in the list of gardens and the Chatper Plates. The available models are:

• EnergyOutgoingModel
• FirstGenerationModel
• HighResourcesModel
• HousingInsecurityModel
• RandomGardenModel
• SummerGardenModel
• WinterGardenModel

Spawns

Each garden creates multiple Spawn instances. a Spawn is responsible for deriving plant properties based on the data, instantiating and managing (animateIn and removal of) the plant instances.

Available Spawn classes are:

• Solomon's Seal Spawn
• Asimina Triloba Spawn
• Stellaria Pubera Spawn

Modifiers

The connection of data-to-plant-properties happens in the Transformers. Each transformer accepts data input (calculated from the InsecurityCalculator) and outputs plant properties, as defined in attribute modifiers.

For instance, the age modifier accepts a student's age and then transforms the props.petalCount accordingly.

The available modifiers are:

• AgeModifier
• BelowPovertyLineModifier
• CommunityFitnessModifier
• DegreeModifier
• EmotionalHealthModifier
• EnergyOutgoingModifier
• FirstGenModifier
• GPAModifier
• HealthModifier
• HousingInsecurityModifier
• InsecurityModifier
• OutOfStateModifier
• PellGrantModifier
• PersonalScarcityModifier
• ResourcesIncomingModifier
• ShareModifier

Plants

The plants are essentially data holders for the transformed properties when they are instantiated, but once the createChildren method is called, the geometry, materials, and mesh are created. This method of deferred instantiation prevents dropped frames while creating multiple plants.

The geometries are created algorithmically in three parts:

1. Stem
2. Leaves or petals
3. Berries or pollen

The algorithm creates different geometries and applies different materials based on the properties assigned to the plant.

Plant Properties

Each plant property is settable and will trigger a redraw of the plant. The available properties are:

  setAnimated(animated)
  setDuration(duration)
  setDelay(delay)
  setRandomSeed(randomSeed)
  setWindForce(windForce)
  setWindDirection(windDirection)
  setHeight(height)
  setOffset(offset)
  setDisplacement(displacement)
  setThickness(thickness)
  setPointCount(pointCount)
  setPetalStartPoint(petalStartPoint)
  setPetalEndPoint(petalEndPoint)
  setRotationStart(rotationStart)
  setRotationEnd(rotationEnd)
  setSizeStart(sizeStart)
  setSizeEnd(sizeEnd)
  setColor(color)
  setHSLBase(hslBase)
  setHSLRange(hslRange)
  setBerryCount(berryCount)
  setBerrySize(berrySize)
  setBerryRotation(berryRotation)
  setBerryColor(berryColor)
  setBerryDistanceFromStem(berryDistanceFromStem)
  setBerrySpiral(berrySpiral)
  setOpenness(openness)
  setPetalCount(petalCount)
  setLeafCount(leafCount)
  setLeafStartPoint(leafStartPoint)
  setLeafEndPoint(leafEndPoint)
  setRearPetalCount(rearPetalCount)
  setPetalWidth(petalWidth)
  setPetalLength(petalLength)
  setPetalDistanceFromCenter(petalDistanceFromCenter)
  setRotationAxis(rotationAxis)
  setRotationAngle(rotationAngle)
  setTranslateToY(translateToY)
  setPetalRotation(petalRotation)

BasePlant

BasePlant is responsible for common plant tasks, like drawing the stem, handling setter methods for all the properties, cleaning the instance for garbage collection, the animateIn and animateOut methods.

BaseRenderable

BaseRenderable is resonsible for managing state in a react-like manner. Even if multiple properties change, the render method is only called once.

A plant has a focal point which tells the camera where exactly to look at it while focusing.

Layouts

Plants can be arranged in a variety of layouts.

Layouts can be sized with a bounds object, which is a Vector3 of width, height, and depth.

The available layouts are:

• CircularLayout
• GridLayout
• RandomLayout

Scene

Once the meshes have been created with the appropriate data and added to a scene, threejs handles rendering.

Controls

Threejs supports moving and rotating any 3d object, including the camera. Assigning camera position props as part of a TweenMax tween, we can create fluid camera movement.

The specific process is to choose a random plant and obtain it's focal point. Tween the camera and the cameraTarget to that location. Once the camera arrives, choose another plant and repeat the process.

Environments

The application behaves differently depending on the device it's running. There are two main breakpoints:

• Large Display: Used for Immersion Theatre, the Commons Wall, the Visualization Wall, and the Art Wall at Hunt Library. These devices have a timeMultiplier parameter set to 0.3, which slows the entire scene down to 30%. Certain displays also turn sidebars and 3D titles on to display additional content, and the camera is set to autopilot.

• Desktop and handheld: Used everywhere else. The number of plants created is reduced. The camera is set to user-controlled, and the sidebar is turned off.

Properties can be manually overriden via query string. The available query strings are:

• timeMultiplier: 1 is normal, <1 slows the installation down. Useful for large displays where movement is accelerated because the perceived distance is so much higher than on desktop or devices.

• quantityMultipler: The more powerful the GPU, more plants will be created. This ranges from 1 to 5. 10 will likely blow your computer up.

• seed: used to recreate a specific garden. Note that seeds are output to the console on instantiation: if you see something you need to recreate, simply note the output and append to the query string, ie ?seed=123

• DPR: Device pixel ratio can be lowered to increase framerate at the cost of decreasing resolution. Try 0.1 for mad pixelation.

• debug: set ?debug=1 to enable debug mode. This includes framerate stats, color palletes, and a gui for manipulating the camera.

Bridging between react and three.js

Although threejs is all javascript, it's not immediately obvious how to render it inside a react compnent's render method, especially if you need to share data from redux. I followed this direction, which worked quite well.

Technologies

The project is all javascript and WebGL, meaning it runs on 20' walls in the Hunt Library's Immersion Theatre, on a desktop, or a mobile device.

• threejs is for 3D rendering
• three.bas, a buffer animation system, enables hundreds of individual geometries to be animated in an efficient manner
• Meshline to draw lines in 3D space. Using brushstrokes as textures results in very pleasing aesthetic.
• Random Seed to recreate random sequences across installations
• react for the UI
• dat.gui for rapid testing of variables
• detect-gpu to throttle features per device
• glamorous for styling the UI
• gsap for tweening
• lodash for data-parsing utilities
• react helmet for SEO support within a SPA
• react redux for bindings
• JSZip for uncompressing zip files in the browser.
• typography for ... typography.

Credits

Created by lucastswick during a six-week artist residency funded by the Andrew Mellon Foundation through the Immersive Scholar program with the NC State University Libraries.

Core Team

• Jasmine Lang, Branding and UI/UX
• Erica Hayes
• Shelby Hallman
• Markus Wust

Could not have done it without

• Dr Mary Haskett
• Karen Ciccone
• Sarah Wright
• Micah Vandegrift

Special thanks to

• Molly Renda for creating the print exhibition
• Walt Gurley for the encouragement and assistance with hardware testing
• Marian Fragola for making the presentations an enormous success

Contact

For general questions or troubleshooting questions contact Walt Gurley.