\n {lines.map((line, rowIndex) => (\n

\n {line.map((cell, columnIndex) => (\n \n {cell.char === \" \" ? String.fromCharCode(160) : cell.char}\n \n ))}\n

\n ))}\n

\n );\n}\n\nexport function App() {\n const [season, setSeason] = useState(\"spring\");\n const [seed, setSeed] = useState(1987);\n const [grove, setGrove] = useState(3);\n const [detail, setDetail] = useState(4);\n const [breeze, setBreeze] = useState(5);\n const [frame, setFrame] = useState(0);\n\n useEffect(() => {\n const timer = window.setInterval(\n () => setFrame((value) => value + 1),\n 1400,\n );\n return () => window.clearInterval(timer);\n }, []);\n\n const scene = useMemo(\n () => buildGarden(seed, season, grove, detail, breeze, frame),\n [seed, season, grove, detail, breeze, frame],\n );\n\n return (\n \n

\n ascii ui greenhouse\n

\n A coded garden built from clean branching rules and quiet\n terminal charm.\n

\n This scene grows from a seeded tree algorithm: recursive trunk\n passes, seasonal leaf palettes, a layered ground pass, and a\n slow breeze loop that keeps the grove alive without breaking\n the ASCII silhouette.\n

\n\n

\n growth mode\n

{season}

\n {seasonCopy[season]}\n

\n grove density\n

{scene.stats.trees} trunks

\n balanced across foreground depth for cleaner overlap.\n

\n canopy cells\n

{scene.stats.blooms}

\n leaf clusters use seeded jitter to avoid noisy repetition.\n

\n\n

\n garden console\n

\n Tune the generator\n

\n \n setSeed(Math.floor(Math.random() * 9000) + 1000)}\n className=\"rounded-full border border-[color:var(--panel-edge)] bg-white/55 px-4 py-2 text-sm transition hover:-translate-y-0.5 hover:bg-white/80\"\n >\n randomize seed\n \n

\n\n

\n \n

\n seed\n {seed}\n

\n setSeed(Number(event.target.value))}\n />\n \n\n \n

\n grove size\n {grove}\n

\n setGrove(Number(event.target.value))}\n />\n \n\n \n

\n branch detail\n {detail}\n

\n setDetail(Number(event.target.value))}\n />\n \n\n \n

\n breeze\n {breeze}\n

\n setBreeze(Number(event.target.value))}\n />\n \n\n

\n season palette\n

\n {([\"spring\", \"summer\", \"amber\", \"winter\"] as Season[]).map((\n option,\n ) => (\n setSeason(option)}\n className={`rounded-full border px-4 py-2 text-sm transition ${\n season === option\n ? \"border-[color:var(--frame)] bg-white/80 text-[color:var(--ink)]\"\n : \"border-[color:var(--panel-edge)] bg-white/35 text-[color:var(--muted)] hover:bg-white/65\"\n }`}\n >\n [{option}]\n \n ))}\n

\n\n

\n algorithm sketch\n

\n{`root(seed)\n  -> place horizon + water + path\n  -> distribute trunk anchors by depth\n  -> recurse branch(angle, length, depth)\n  -> puff canopy clusters near tips\n  -> apply seasonal glyph palette\n  -> loop breeze offset every 1400ms`}\n

\n Layering keeps back trees readable instead of becoming a\n single noisy blob.\n

\n The pond, path, clouds, and petals are separate passes, so the\n viewport feels composed.\n

\n\n

\n \n

\n\n

\n branch passes\n

{scene.stats.branches}

\n water span\n

{scene.stats.waterline}

\n wind loop\n

\n {Math.abs(Math.sin(frame * 0.8) * breeze).toFixed(1)}\n

\n \n );\n}",[],[137,182],"cb1bd530-18c1-11f1-859d-42dde27851f2","c5214340-18c1-11f1-8cd5-42dde27851f2",["D",1772735604049],[],[137,194,33],"utils","c6a01354-18c1-11f1-bf1f-42dde27851f2",20,["D",1772735596517],[156],[137,194],["D",1772735539797],[155,157,158,159],[137],["D",1772734460077],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":24},{"_13":83,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"ctx",{"_76":-5,"_120":240,"_241":242,"_243":244,"_245":24,"_246":24,"_247":24,"_248":140,"_249":-5,"_250":-7,"_251":-7,"_252":60,"_253":24,"_254":24,"_255":-5,"_256":24,"_257":24,"_258":24,"_259":-5},"ENV",{"_211":212,"_213":214,"_215":84,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v21