animated-garden

Art that couldn't exist without code: a garden grown entirely from the sentiment, syntax, and shape of human sentences

Comment

🌱 ANIMATED GARDEN

A garden where feelings are measured, and the measurement is made visible — and beautiful.

At a Glance

You write one sentence. In about four seconds it germinates into a plant whose entire anatomy is derived from the meaning of what you wrote — species from sentiment, branching from syntax, leaf density from abstraction, a golden curl if you asked a question, a weeping form if you trailed off with an ellipsis.

Your sentence stays private. Everyone else sees a single word: the pollen. But underground, the system compares every sentence with every other, and when two strangers write about the same feeling without knowing it, their roots entwine and golden threads arch across the sky.

No framework. No build step. One Canvas. Loads instantly.

Inspiration

Every new wave of technology promises to understand how we feel — sentiment scores, mood tracking, "empathetic" AI. None of it understands anything. It measures. It reduces a memory, a heartbreak, a small joy to a number between −1 and 1, and it almost always hides that reduction from us.

We wanted to make the reduction visible — and beautiful. What if the number weren't hidden, but were the whole point? What if a machine took your sentence, measured it, and grew something living out of that measurement, so that the plant's beauty was also the evidence of what got cut away?

Two more things pulled us in:

The fear of expressing feelings in public. We wanted a place where you could plant a feeling privately and still, somehow, be connected to a stranger who felt the same thing.

Prusinkiewicz and Lindenmayer's The Algorithmic Beauty of Plants. The idea that real botanical form emerges from a handful of rewriting rules felt like exactly the right language for turning meaning into anatomy.

The hackathon theme — art that couldn't exist without technology — was the final push. This is not a painting of a garden. It is a garden that exists only because computation is doing the growing, the measuring, and the connecting.

What It Does

1. Meaning becomes anatomy

Your sentence is analyzed and translated directly into botanical form:

Property of your sentence What it becomes in the plant
Sentiment The species — 16 in total: rose, sunflower, willow, thorned cactus, lotus, faceted gem-blooms, mushroom, dandelion, and more
Syntax (subordinate clauses, commas) How the stem branches and twists
Concreteness vs. abstraction Leaf density
Length Height
A question mark Curls the tip into a golden hook
An ellipsis… Makes the plant weep

The generative seed mixes your text with your identity, so the same sentence grows a different plant for a different person. Meaning here is situated, never universal.

2. Private words, public kinship

What you write stays yours: only you see your full sentence. Everyone else sees a single word — the pollen.

Underground, though, the system compares every sentence with every other using cosine similarity. When two strangers have written about the same thing without knowing it, their roots entwine. Turn on the emotional-climate view and golden threads arch across the sky: a constellation of kinship between people who have never met. A live panel reads the whole garden's average mood, its bonds, and its dominant flora.

3. A garden you can tend

Water a plant — with adjustable pressure — to make it flourish and grow new branches. Prune it with shears, and the severed part falls to the ground under gravity like a real cut branch.

Around all of it: a generative soundscape whose chord follows the garden's collective mood, a day/night cycle with twinkling stars, wind gusts, drifting pollen, flocking butterflies that scatter when watered and regroup afterward, and pollinating bees. Everything is shared in real time, fully bilingual (ES/EN), and every specimen can be exported as an elegant herbarium card.

How We Built It

No framework, no build step — just HTML, CSS, and vanilla JavaScript on a single Canvas 2D surface, so the whole thing loads instantly and stays hackable.

Layer How it works
🌿 Growth Real L-systems (string rewriting plus a turtle interpreter) with tropisms — gravity makes the willow weep, light straightens the cactus. A deterministic mulberry32 PRNG guarantees the same phrase always reproduces the same plant.
🧠 Meaning → genome A Spanish lexical analyzer maps words to sentiment, anger, abstraction, and complexity, with an optional LLM pass (Groq / Llama) through a serverless function. The app works fully with no API key at all.
🕸️ The collective layer A bag-of-words plus cosine-similarity graph finds kindred sentences and draws the constellation.
🗄️ Shared garden & accounts Supabase (Postgres + Row-Level Security + Realtime) for the live garden and for auth — login, sign-up, password recovery, and guest access.
🎵 Sound Web Audio API: a filtered string pad whose chord tracks the average sentiment, wind noise tied to the gusts, and a bell chime on every germination.
🚀 Deploy & verify Hosted on Vercel, driven end-to-end with headless Chromium (Playwright) to test auth, watering, pruning, performance, and visuals on every change.

Challenges We Ran Into

Performance. A full garden — dozens of plants, some flourished to 150+ stem segments — collapsed to 7–9 fps. We profiled the hot paths and brought it back to a smooth ~42 fps in software rendering (60 on real GPUs): caching per-plant wind constants once per frame, replacing Math.pow with a cheaper root, drawing leaves with the canvas's native ellipse rotation instead of thousands of save/restore calls, and computing each stem's color once rather than per segment. The enemy was never the math.

Making the cut feel real. Pruning initially removed only a small blob, leaving the top of the plant floating in mid-air. We reconstructed the plant's tree connectivity from the L-system geometry so that a cut detaches the entire subtree above it, which then topples and settles onto the grass under gravity.

A broken password recovery. Auditing the auth flow, we found the recovery link was a dead end: Supabase consumed the URL token and dropped the user straight into the garden, so they could never set a new password. We now detect the recovery link before the client swallows it and route the user to the form.

Making the original idea impossible to miss. The constellation — our most singular feature — was hidden behind a button. Now it breathes in on its own a few seconds after you arrive, so no visitor can miss the heart of the piece.

Balancing privacy and connection. Keeping every sentence private while still surfacing collective affinity took real care about what we expose (a single keyword) versus what we compute silently in the background.

Accomplishments We're Proud Of

  • The constellation. Watching golden threads connect two strangers who wrote about the same feeling — without either of them knowing — is the moment the whole idea comes alive.
  • 16 species that read as one coherent visual system, each with its own stem tint, leaf shape, and bloom: layered roses, faceted sparkling gems, lotus, dandelion puffs.
  • Interactions that behave like the physical world — watering that genuinely grows plants, shears that fell a branch under gravity, butterflies that scatter and regroup.
  • It is actually finished. 60 fps, fully bilingual, real and audited authentication, a generative soundscape, a shareable herbarium card — with zero build tooling.
  • Most of all: the mechanics are the statement. Nothing about the concept lives only in a description. You feel it by using the piece.

What We Learned

How expressive L-systems really are — and how much character comes from very small tropism tweaks.

That "AI measures, it doesn't understand" is not a limitation to hide, but a design stance you can build an entire artwork around.

Serious Canvas 2D performance work. The enemy is per-call allocation and canvas state changes, not the arithmetic.

In a creative brief, conceptual focus beats feature count. We nearly shipped a freehand drawing tool before realizing it would have quietly broken the one thing that makes the piece original.

The craft of deterministic generative art, real-time multiplayer state, and generative audio — all inside one small codebase.

What's Next for Animated Garden

  • 🏛️ Living exhibitions. Seeding gardens for specific rooms, events, or communities and letting them grow over days.
  • 🧠 Deeper meaning. Richer multilingual semantic analysis so plant anatomy responds to nuance, irony, and metaphor.
  • 🌿 Grafting. Writing a second sentence that entwines with your first — and letting people intentionally tend one another's plants.
  • 🎼 A richer soundscape that turns the garden's collective mood into an evolving ambient piece worth listening to on its own.
  • 🖼️ Physical output. Printed herbarium plates, and a large-screen installation mode for galleries: a wall where strangers watch their feelings quietly find each other.

Why This Answers the Theme

A painter can render a garden. A poet can render a feeling. Neither can build a garden that measures what you wrote, grows the measurement into botany, keeps your words private, and then — silently, underground — discovers that a stranger on the other side of the world wrote something that means the same thing.

The reduction from feeling to number is the wound at the center of every emotional technology. This piece doesn't hide it. It grows flowers out of it.

Built With

Share this project:

Updates

Submission history