Lawn Texture

This project wasn’t born out of thin air; it emerged from a confluence of smaller moments and experiments. For my girlfriend Nina Rosenblum’s birthday, in the summer of 2022, I got her a copy of the book I was currently reading: Yuval Noah Harari’s “Homo Deus,” along with a set of colorful highlighters which I also got myself. I’ve always been the type to keep my books in near-mint condition, while Nina enjoys the freedom to underline, fold pages, and jot notes in the margins. The highlighters served as a bridge between our two reading styles. My challenge for the both of us was to use the highlighters to venture into each other’s reading styles. We would use the highlighters to experiment with the text as we read, creating our own systems of highlighting based on specific themes or ideas.

During our reads, one particular chapter caught both of our attention—it discussed the cultural and environmental impact of the Western lawn. While I was reminded of the 99% Invisible podcast episode “Lawn Order” and enjoyed my read about this weird human attraction to vast swathes of grass, Nina was inspired by the subject matter to create a new highlighting system. She began highlighting every occurrence of the word "lawn" in varying shades of green. It was like a little ecosystem developing right there on the pages of her book, each green highlight standing in for a patch of grass. As the chapter continued, Nina began to highlight more than just the word lawn, incorporating a wider palette of grass related words, the patches became more frequent. Some began to connect across lines of text, what began as a sporadic patch of grass here and there began to resemble an aerial view of American suburbia with more and more plots of grass all slightly different shades of green sprawling across the pages.

This idea Nina had come up with resonated with me—generative design is my forte, after all. I started mulling over ways to take her concept off the page and give it a new dimension. As great as it was to see her static highlighted words in a book convey such a feeling of life, it was begging to evolve, grow, even age. That very week I began to work on bringing this system to life. My first attempt to do so was a combination of Indesign for layout and TouchDesigner for simulating the grass. I had recently purchased an ultra-wide monitor, which when flipped 90 degrees, felt like I was staring at a towering monolith of screen real estate.

In Indesign, I started playing with a hybrid layout—part traditional book design, part modern web styling—to fit my ultra-vertical screen. As a foundation I used the content from 99% Invisible’s “Lawn Order,” a mix of text and images that served as the substrate for my digital grass experiment. Switching gears to TouchDesigner, I tried to simulate the growth of grass. The model I initially used was adapted from another of my projects, Crosswalk Poetics. Instead of pixel-based growth, like the Moss Growth Simulation in the Physical Map in that project, I scaled things up to work with broader horizontal rectangles.

Continuing I incorporated a sort of life cycle for the grass patches. Picture patches turning brown, like they’d been scorched by the sun or neglected and under-watered. Just as in real life I was trying to create an ecosystem, so each patch’s well-being was interconnected, meaning A patch couldn’t easily shrivel up if it was nestled among well-watered, lush neighbors.

After a few days working on this first iteration, I felt it wasn’t on the right path. While the simulation had promise, it felt fenced in on this static content. While it was becoming dynamic, the landscape was feeling more and more static in comparison. With work and soon my senior year of school taking up more and more of my time I decided to put this project on the back burner while I focused on other things.

2^nd and Current Version

During the fall semester of my senior year I spent as much time as I could learning JavaScript. During the winter session, I took a CTC (Computer Technology Culture) elective studio course taught by Griffin Smith, which had an intense focus on machine learning. Although I had previous experience with many visual generative AI models this was my first time interacting with a large language model, in this case Chat-GPT.

As the spring semester got underway, my degree project began to take shape, fueled by my interest in the intersection of technology and nature. This led me to revisit “Lawn Texture,” but with a fresh, web-focused perspective. I applied for a GPT 4.0 API key, intending to use it for dynamically generating text over which the digital “growth” could spread. While that key never came through, my journey into JavaScript taught me the ease of creating Chrome extensions. So, that’s the direction I took. No longer limited by an API key—or lack thereof—adapting “Lawn Texture” into a Chrome extension meant it could grow spontaneously, regardless of the website it found itself on.

This second stab at “Lawn Texture” was a hit, leading to the version you’re witnessing unfold right now. Since it was cultivated as a part of my degree project, the focus has evolved a bit from Nina’s initial highlighting system. My take on the concept centers on nature “invading” the human-centric sphere of the Internet. In line with this theme, I’ve opted not to include a decay function for the growing elements. This way, the digital foliage feels more permanent, almost as if it’s reclaiming space in this human-centric environment. Over time, the text—our text—becomes obscured, getting swallowed up by the “foliage” that takes root.

How it works is relatively simple. When a page is opened, the “Lawn Texture” script scans the DOM of the webpage for text elements. Once identified, it then combs through each of these blocks of text in search of words to seed. These seeded words will be where the digital foliage sprouts from. I have curated a large JSON list of these words which the script has access to. I have compiled several versions of this list using a combo of GPT 4, Thesaurus.com, and several online dictionaries. In one of the more experimental lists I attempted to quantify the “plant relevance” of each word using how frequently each appeared in the thesaurus. The idea was to have the digital flora grow more vigorously and be more vibrant in color around words that are “more organic” and then swap out to “less organic” synonyms and dim and fade as the plants “decay.”

The growth of grass in “Lawn Texture” is systematic and happens at set intervals. Each “seeded” grass word on the web page, every two seconds, scans its nearby area, looking at eight positions: directly above, below, to the right and left, and diagonally at all four corners of itself. When a word is detected in any of these positions, the grass patch spreads to that word. At the start, each grass patch is given a random green hue from a selection of 20 shades. As the grass extends to the neighboring words, it highlights them in an increasingly darker green shade. The darkest green signifies the growth boundary for that grass patch. These rules cause the grass to spread in organic, blob-like forms without endlessly extending in all directions. The gradient of green shades reveal where each patch began, how different patches collided as they raced to occupy as much space as possible, and a more dimensional topology of grassy plains.

The flowers, on the other hand, follow a distinct set of rules compared to the grass. During the “seeding” phase, floral words are not highlighted in a single color. Instead, each letter within the word is individually highlighted. Similar to the initial green shade assigned to grass patches, the entire word is assigned a base color—so one “daisy” might start with a pink base, while a “sunflower” could start with yellow. This base color includes a range of tones and hues, and each character within the flower word is assigned a random shade from this range. This ensures that each occurrence of a flower-related word will spread flowers of similar colors, but with subtle variations in tone.

Unlike grass, flowers spread in a “+“ shape (strictly horizontally and vertically) from each individual letter, and they do so every second. This means that although flowers only spread to individual letters and cannot cover as much ground as the grass, they spread at double the speed, giving them a fighting chance. This also results in the growth of diamond-shaped patches rather than circular blobs. Grass can grow into words that have flowers growing within them. This won’t harm the flowers but it will stop them from spreading any further.

3^rd and Future Versions

As previously mentioned, I have developed several versions of the word list, and I am particularly intrigued by the possibility of creating versions of this algorithm that impact the content of the text, not just its appearance. The feedback loop created by highlighting based on text and then altering the text based on the highlighting presents an exciting opportunity to influence overall growth patterns. Delving into the complexities of quantifying language in a digital context is a challenge that many dedicate their lives to, and I am eager to explore this area further.

The way the spread unfolds on the “non-uniform grid” of text blocks is reminiscent of chess pieces moving around a board. This similarity opens up exciting avenues for exploring different ways of traversing language. One iteration of my word list included words related to water, which inspired me to develop a more intricate method of spread that mirrors the movement of a fluid. Rather than consistently spreading to its immediate neighbors, the water initially spreads somewhat randomly. However, as it begins to expand, each step influences the direction it will take next. For example, if it starts spreading faster upwards and to the right, it will develop a bias towards that direction and reduce its spread in other directions. The shades of green and the distinct hue changes where two patches intersect would create natural valleys that guide the water’s path around the text. It will be fascinating to explore what happens when the water reaches the end of a text block. Could the white background beside the ragged edge of the text act as a sea into which the river flows? Might the flow of these rivers erode the banks of their paths, over time curling and changing their shape? Could they accumulate in specific areas to form lakes and ponds?

Upon learning how to create Chrome extensions, I discovered the ease with which I could trigger pop-up windows of custom sizes. This sparked the idea of designating certain words, perhaps trees, to open a pop-up window above them, introducing new layers and text to the system. The pop-up window would symbolize the tree’s canopy, raising questions about the implications for the text below, now cast in shadow. Would it wither and die from a lack of sunlight? The history of pop-up windows is tainted with associations to malicious computer viruses, adding an interesting dimension to the theme of nature’s often unforgiving character. How does this historical context influence our interpretation of the digital landscape which is growing around us as we navigate through it?

Expanding on the concept of layers, consider the potential role of fungi. What if fungal networks of mycelium sprouted beneath the text and highlighting? These concealed clusters could form symbiotic relationships with the surrounding vegetation, supplying nutrients that promote the extension of grass patches or stimulate the proliferation of flowers. The invisible yet essential support provided by the mycelium mirrors the unseen connections and support systems that underpin our digital landscapes, raising intriguing questions about the ways in which different elements of a system interact and depend on one another.