Community Gardens is a data-driven generative art installation about food and housing insecurity within the student body at NC State.
Most people don’t think of college students when talking about homelessness, and this project was intended to create awareness. The data revealed that 9.6% of students experienced some degree of homelessness in the past year. Yikes!
The installation consumes data from a survey. We know traits like their GPA, their degree, how they pay their tuition, if they’ve experienced food and housing insecurity and to what degree. There are about 80 traits collected for each student.
With this data in hand, each student is drawn as a plant in a garden, and their traits are represented in a variety of ways. Taller plants are more senior degrees, plants that are drawn with more angles have anxiety, the colors and textures indicate different traits, and so on.
Each ‘garden’ is a collection of students around a common data-point, ie well-resourced students, under-resourced students, those with a high GPA, etc. You can visit the gardens page to see all the gardens.
Geometry is generated at render time. It is modified by the data for each student. Then, materials are created with pre-rendered textures, and fed to threejs.
I used three.bas for performance reasons. Although the installation runs on 20’ LED walls powered by display servers, it also runs at 60fps on my macbook pro and decently on my older iphone (although I throttle the number of plants so as to not immediately drain the battery). I cannot express how powerful a solution three.bas is. My frame rate jumped from about 20fps to 60 after implementing.
I also made use of the excellent MeshLine library to create gestural strokes. All the stems are drawn with MeshLine (although I extended it to ‘animate’ in, like it was being painted).
Outside the gardens, the rest of the site uses react and redux, which I am also a fan of.
I hope you like it and I’m more than happy to answer any questions.