ZenPlant - Theoretical Botany

Save plants for breeding.

',B(\"btn-breed\").style.display=\"none\";return}$.innerHTML=t.map((f,M)=>{let L=A.includes(M)?\"selected\":\"\",j=o(f.genome,\"flowerRGB\");return`

#${M+1} · step ${f.step} · ${f.nodes.length} nodes

`}).join(\"\"),$.querySelectorAll(\".slot\").forEach((f)=>{f.addEventListener(\"click\",()=>{let M=Number(f.dataset.i),L=A.indexOf(M);if(L>-1)A.splice(L,1);else{if(A.length>=2)A.shift();A.push(M)}w()})});let b=B(\"btn-breed\");if(A.length===2)b.style.display=\"block\",b.textContent=`Breed #${A[0]+1} + #${A[1]+1}`;else b.style.display=\"none\"}function G$($,b,f){let M=(f.x-b.x)**2+(f.y-b.y)**2;if(M===0)return Math.hypot($.x-b.x,$.y-b.y);let L=(($.x-b.x)*(f.x-b.x)+($.y-b.y)*(f.y-b.y))/M;return L=Math.max(0,Math.min(1,L)),Math.hypot($.x-(b.x+L*(f.x-b.x)),$.y-(b.y+L*(f.y-b.y)))}m.style.touchAction=\"none\";var V0=!1,A0=0,d0=0,i0=0,g0=0,O0=!1;function p0($,b){if(O0)return;let f=m.getBoundingClientRect(),{scale:M,ox:L,oy:j}=Q0(f.width,f.height,K.showRoots,K.cameraX??0,K.cameraY??0,K.cameraZoom??1),P=($-f.left-L)/M,H=(b-f.top-j)/M,J=l0(),q=null,U=20;for(let Q of K.nodes){if(Q.type!==\"stem\"&&Q.type!==\"meristem\")continue;let V=Q.parentId!==null?J.get(Q.parentId):void 0,G=V?V.wx:Q.x,R=V?V.wy:Q.y,E=J.get(Q.id),F=E?E.wx:Q.x+Math.cos(Q.angle)*Q.length,O=E?E.wy:Q.y+Math.sin(Q.angle)*Q.length,y=G$({x:P,y:H},{x:G,y:R},{x:F,y:O});if(yp0($.clientX,$.clientY));m.addEventListener(\"pointerup\",($)=>p0($.clientX,$.clientY));m.addEventListener(\"mousedown\",($)=>{V0=!0,O0=!1,A0=$.clientX,d0=$.clientY,i0=K.cameraX,g0=K.cameraY});window.addEventListener(\"mousemove\",($)=>{if(!V0)return;let b=$.clientX-A0,f=$.clientY-d0;if(Math.abs(b)>3||Math.abs(f)>3)O0=!0;K.cameraX=i0+b,K.cameraY=g0+f,w()});window.addEventListener(\"mouseup\",()=>{V0=!1});m.addEventListener(\"wheel\",($)=>{$.preventDefault();let b=$.deltaY>0?-0.1:0.1;K.cameraZoom=Math.max(0.3,Math.min(3,K.cameraZoom+b)),w()},{passive:!1});B(\"btn-grow\").addEventListener(\"click\",()=>{for(let $=0;$<10;$++)K=M0(K,e);w()});B(\"btn-grow-season\").addEventListener(\"click\",()=>{for(let $=0;$<50;$++)K=M0(K,e);w()});B(\"btn-reset\").addEventListener(\"click\",()=>K0());B(\"btn-play\").addEventListener(\"click\",($)=>{j0=!j0,$.target.textContent=j0?\"Pause\":\"Play\"});B(\"species-select\").addEventListener(\"change\",($)=>{J0=Number($.target.value),K0(n)});B(\"btn-save\").addEventListener(\"click\",()=>{t.push(JSON.parse(JSON.stringify(K))),m0(),w()});B(\"btn-breed\").addEventListener(\"click\",()=>{if(A.length!==2)return;let $=t[A[0]].genome,b=t[A[1]].genome,f=y0($,b,e);K=Z0(f,H0[J0],{seed:Math.random()*1e9|0});for(let M=0;M<30;M++)K=M0(K,e);A=[],w()});B(\"btn-pro\").addEventListener(\"click\",()=>{let $=B(\"pro-panel\");$.style.display=$.style.display===\"none\"?\"block\":\"none\"});B(\"btn-export\").addEventListener(\"click\",()=>{let $=new Blob([_0(K)],{type:\"application/json\"}),b=document.createElement(\"a\");b.href=URL.createObjectURL($),b.download=`zenplant-step${K.step}-seed${n}.json`,b.click(),URL.revokeObjectURL(b.href)});B(\"btn-svg\").addEventListener(\"click\",()=>{let $=new Blob([D0(K,400,500)],{type:\"image/svg+xml\"}),b=document.createElement(\"a\");b.href=URL.createObjectURL($),b.download=`zenplant-step${K.step}.svg`,b.click(),URL.revokeObjectURL(b.href)});B(\"btn-png\")?.addEventListener(\"click\",()=>{let $=document.createElement(\"a\");$.href=m.toDataURL(\"image/png\"),$.download=`zenplant-step${K.step}-seed${n}.png`,$.click()});B(\"btn-timelapse\")?.addEventListener(\"click\",($)=>{if(K.isRecording=!K.isRecording,$.target.textContent=K.isRecording?`Stop (${K.timelapseFrames.length})`:\"Record Timelapse\",!K.isRecording&&K.timelapseFrames.length>0){let b=document.createElement(\"a\");b.href=K.timelapseFrames[K.timelapseFrames.length-1],b.download=`zenplant-frame${K.timelapseFrames.length}.webp`,b.click(),K.timelapseFrames=[]}});var F0=B(\"grow-speed\"),u0=B(\"speed-label\");if(F0)F0.addEventListener(\"input\",()=>{if(K.growSpeed=parseFloat(F0.value),u0)u0.textContent=K.growSpeed+\"×\"});B(\"btn-import\").addEventListener(\"click\",()=>B(\"import-file\").click());B(\"import-file\").addEventListener(\"change\",async($)=>{let b=$.target.files?.[0];if(!b)return;K=v0(await b.text()),e=x(K.step+n),w()});B(\"btn-dark\").addEventListener(\"click\",()=>{K.darkMode=!K.darkMode,document.body.classList.toggle(\"dark-mode\",K.darkMode),w()});B(\"btn-wood\").addEventListener(\"click\",($)=>{K.woodTexture=!K.woodTexture,$.target.textContent=K.woodTexture?\"Wood: ON\":\"Wood: OFF\",w()});B(\"btn-wind\").addEventListener(\"click\",($)=>{L0=!L0,$.target.textContent=L0?\"Wind: ON\":\"Wind: OFF\"});var P0=null;function r0(){if(P0!==null)return;P0=requestAnimationFrame(()=>{P0=null,w()})}window.addEventListener(\"resize\",r0);window.addEventListener(\"orientationchange\",()=>setTimeout(w,150));if(window.visualViewport)window.visualViewport.addEventListener(\"resize\",r0);var z0=performance.now(),T0=performance.now();function c0($){let b=($-z0)/1000;if(z0=$,L0&&K)K.windTime+=b*2,w();let f=K.growSpeed>0?180/K.growSpeed:999999;if(j0&&K&&$-T0>f){if(K=M0(K,e),T0=$,!L0)w()}if(K?.isRecording&&K.timelapseFrames.length<300){K.timelapseFrames.push(m.toDataURL(\"image/webp\",0.8));let M=B(\"btn-timelapse\");if(M)M.textContent=`Stop (${K.timelapseFrames.length})`}requestAnimationFrame(c0)}requestAnimationFrame(c0);K0();\n`, {\n headers: { \"Content-Type\": \"application/javascript\" },\n });\n});\n\napp.get('/', (c) => {\n return c.html(`\n \n \n \n \n \n ZenPlant - Theoretical Botany\n \n \n \n \n

\n \n \n

\n \n \n \n `);\n});\n\nexport default app.fetch;","children",[],[184],["D",1789341083206],[],[18,64],"27672f85-6731-4f08-9ea6-46979655e042","app.ts","7030ca88-afc8-11f1-b92b-1607ee4eb77e",["D",1789341083565],"import { createPrng, type Prng } from \"../sim/prng\";\nimport { freshState, growOnce, pruneNode } from \"../sim/growth\";\nimport { breedGenomes } from \"../sim/genetics\";\nimport { japaneseBonsai, zenBamboo, sakuraOrchid, generateGenomeForSpecies, getSpeciesById } from \"../data/species\";\nimport { renderPlant, computeTransform, seasonOf, getWindDisp } from \"../render/canvas\";\nimport { exportPlantJSON, importPlantJSON, exportGenomeJSON, plantToSVG } from \"../export/plugin\";\nimport type { Genome, PlantState } from \"../sim/types\";\n\nconst $ = (id: string) => document.getElementById(id)!;\nconst canvas = $(\"plant\") as HTMLCanvasElement;\nconst ctx = canvas.getContext(\"2d\")!;\n\nconst SPECIES = [japaneseBonsai, zenBamboo, sakuraOrchid];\nlet speciesIdx = 0;\nlet prng: Prng = createPrng(42);\nlet seed = 42;\nlet state: PlantState;\nlet greenhouse: Genome[] = [];\nlet selected: number[] = [];\nlet playing = true;\nlet windEnabled = false;\n\ntry {\n const saved = localStorage.getItem(\"zenplant.greenhouse\");\n if (saved) greenhouse = JSON.parse(saved);\n} catch { /* ignore */ }\n\nfunction persist() {\n try { localStorage.setItem(\"zenplant.greenhouse\", JSON.stringify(greenhouse)); } catch { /* ignore */ }\n}\n\nfunction newPlant(newSeed = (Math.random() * 1e9) | 0) {\n seed = newSeed;\n prng = createPrng(seed);\n const genome = generateGenomeForSpecies(SPECIES[speciesIdx], seed);\n state = freshState(genome, SPECIES[speciesIdx], { seed });\n for (let i = 0; i < 80; i++) state = growOnce(state, prng);\n draw();\n}\n\nfunction draw() {\n const r = canvas.getBoundingClientRect();\n const dpr = window.devicePixelRatio || 1;\n const needResize = canvas.width !== Math.floor(r.width * dpr) || canvas.height !== Math.floor(r.height * dpr);\n if (needResize) {\n canvas.width = Math.floor(r.width * dpr);\n canvas.height = Math.floor(r.height * dpr);\n }\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n const info = renderPlant(ctx, state, r.width, r.height);\n const [name, color] = info.split(\"|\");\n const badge = $(\"season-badge\");\n badge.textContent = `${name} · step ${state.step} · seed ${seed}`;\n (badge as HTMLElement).style.color = color;\n const g = state.genome;\n $(\"genome-info\").innerHTML =\n `Vigor ${g.vigor.toFixed(2)} · Angle ${g.angle.toFixed(0)}° · Len ${g.lenScale.toFixed(0)}
` +\n `Species ${SPECIES[speciesIdx].name} · Nodes ${state.nodes.length}`;\n renderSlots();\n}\n\nfunction renderSlots() {\n const box = $(\"slots-container\");\n if (greenhouse.length === 0) {\n box.innerHTML = '

Save plants for breeding.

';\n ($(\"btn-breed\") as HTMLButtonElement).style.display = \"none\";\n return;\n }\n box.innerHTML = greenhouse.map((g, i) => {\n const sel = selected.includes(i) ? \"selected\" : \"\";\n return `

#${i + 1} vigor ${g.vigor.toFixed(2)}

`;\n }).join(\"\");\n box.querySelectorAll(\".slot\").forEach((el) => {\n el.addEventListener(\"click\", () => {\n const i = Number((el as HTMLElement).dataset.i);\n const at = selected.indexOf(i);\n if (at > -1) selected.splice(at, 1);\n else { if (selected.length >= 2) selected.shift(); selected.push(i); }\n draw();\n });\n });\n const bb = $(\"btn-breed\") as HTMLButtonElement;\n if (selected.length === 2) {\n bb.style.display = \"block\";\n bb.textContent = `Breed #${selected[0] + 1} + #${selected[1] + 1}`;\n } else bb.style.display = \"none\";\n}\n\nfunction distToSeg(p: {x:number;y:number}, v: {x:number;y:number}, w: {x:number;y:number}) {\n const l2 = (w.x - v.x) ** 2 + (w.y - v.y) ** 2;\n if (l2 === 0) return Math.hypot(p.x - v.x, p.y - v.y);\n let t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;\n t = Math.max(0, Math.min(1, t));\n return Math.hypot(p.x - (v.x + t * (w.x - v.x)), p.y - (v.y + t * (w.y - v.y)));\n}\n\ncanvas.style.touchAction = \"none\";\nlet dragging = false;\nlet dragStartX = 0, dragStartY = 0;\nlet dragStartCamX = 0, dragStartCamY = 0;\nlet dragMoved = false;\nfunction pruneAt(clientX: number, clientY: number) {\n if (dragMoved) return;\n const r = canvas.getBoundingClientRect();\n const { scale, ox, oy } = computeTransform(\n r.width,\n r.height,\n state.showRoots,\n state.cameraX ?? 0,\n state.cameraY ?? 0,\n state.cameraZoom ?? 1.0\n );\n const wx = (clientX - r.left - ox) / scale;\n const wy = (clientY - r.top - oy) / scale;\n const disp = getWindDisp();\n let best: number | null = null, bestD = 20;\n for (const n of state.nodes) {\n if (n.type !== \"stem\" && n.type !== \"meristem\") continue;\n const parentD = n.parentId !== null ? disp.get(n.parentId) : undefined;\n const sx = parentD ? parentD.wx : n.x;\n const sy = parentD ? parentD.wy : n.y;\n const childD = disp.get(n.id);\n const ex = childD ? childD.wx : n.x + Math.cos(n.angle) * n.length;\n const ey = childD ? childD.wy : n.y + Math.sin(n.angle) * n.length;\n const d = distToSeg({ x: wx, y: wy }, { x: sx, y: sy }, { x: ex, y: ey });\n if (d < bestD) { bestD = d; best = n.id; }\n }\n if (best !== null) { state = pruneNode(state, best); state.cutAnimTime = 1.0; draw(); }\n}\ncanvas.addEventListener(\"click\", (e) => pruneAt(e.clientX, e.clientY));\ncanvas.addEventListener(\"pointerup\", (e) => pruneAt(e.clientX, e.clientY));\n\ncanvas.addEventListener(\"mousedown\", (e) => {\n dragging = true;\n dragMoved = false;\n dragStartX = e.clientX;\n dragStartY = e.clientY;\n dragStartCamX = state.cameraX;\n dragStartCamY = state.cameraY;\n});\n\nwindow.addEventListener(\"mousemove\", (e) => {\n if (!dragging) return;\n const dx = e.clientX - dragStartX;\n const dy = e.clientY - dragStartY;\n if (Math.abs(dx) > 3 || Math.abs(dy) > 3) dragMoved = true;\n state.cameraX = dragStartCamX + dx;\n state.cameraY = dragStartCamY + dy;\n draw();\n});\n\nwindow.addEventListener(\"mouseup\", () => { dragging = false; });\n\ncanvas.addEventListener(\"wheel\", (e) => {\n e.preventDefault();\n const delta = e.deltaY > 0 ? -0.1 : 0.1;\n state.cameraZoom = Math.max(0.3, Math.min(3.0, state.cameraZoom + delta));\n draw();\n}, { passive: false });\n\n$(\"btn-grow\").addEventListener(\"click\", () => { for (let i = 0; i < 10; i++) state = growOnce(state, prng); draw(); });\n$(\"btn-grow-season\").addEventListener(\"click\", () => { for (let i = 0; i < 50; i++) state = growOnce(state, prng); draw(); });\n$(\"btn-reset\").addEventListener(\"click\", () => newPlant());\n$(\"btn-play\").addEventListener(\"click\", (e) => {\n playing = !playing;\n (e.target as HTMLButtonElement).textContent = playing ? \"Pause\" : \"Play\";\n});\n$(\"species-select\").addEventListener(\"change\", (e) => {\n speciesIdx = Number((e.target as HTMLSelectElement).value);\n newPlant(seed);\n});\n$(\"btn-save\").addEventListener(\"click\", () => {\n greenhouse.push(JSON.parse(JSON.stringify(state.genome)));\n persist(); draw();\n});\n$(\"btn-breed\").addEventListener(\"click\", () => {\n if (selected.length !== 2) return;\n const child = breedGenomes(greenhouse[selected[0]], greenhouse[selected[1]], prng);\n state = freshState(child, SPECIES[speciesIdx], { seed: (Math.random() * 1e9) | 0 });\n for (let i = 0; i < 30; i++) state = growOnce(state, prng);\n selected = [];\n draw();\n});\n$(\"btn-pro\").addEventListener(\"click\", () => {\n const p = $(\"pro-panel\");\n p.style.display = p.style.display === \"none\" ? \"block\" : \"none\";\n});\n$(\"btn-export\").addEventListener(\"click\", () => {\n const blob = new Blob([exportPlantJSON(state)], { type: \"application/json\" });\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = `zenplant-step${state.step}-seed${seed}.json`;\n a.click();\n URL.revokeObjectURL(a.href);\n});\n$(\"btn-svg\").addEventListener(\"click\", () => {\n const blob = new Blob([plantToSVG(state, 400, 500)], { type: \"image/svg+xml\" });\n const a = document.createElement(\"a\");\n a.href = URL.createObjectURL(blob);\n a.download = `zenplant-step${state.step}.svg`;\n a.click();\n URL.revokeObjectURL(a.href);\n});\n$(\"btn-png\")?.addEventListener(\"click\", () => {\n const a = document.createElement(\"a\");\n a.href = canvas.toDataURL(\"image/png\");\n a.download = `zenplant-step${state.step}-seed${seed}.png`;\n a.click();\n});\n$(\"btn-timelapse\")?.addEventListener(\"click\", (e) => {\n state.isRecording = !state.isRecording;\n (e.target as HTMLButtonElement).textContent = state.isRecording\n ? `Stop (${state.timelapseFrames.length})`\n : \"Record Timelapse\";\n if (!state.isRecording && state.timelapseFrames.length > 0) {\n const a = document.createElement(\"a\");\n a.href = state.timelapseFrames[state.timelapseFrames.length - 1];\n a.download = `zenplant-frame${state.timelapseFrames.length}.webp`;\n a.click();\n state.timelapseFrames = [];\n }\n});\nconst speedSlider = $(\"grow-speed\") as HTMLInputElement;\nconst speedLabel = $(\"speed-label\");\nif (speedSlider) {\n speedSlider.addEventListener(\"input\", () => {\n state.growSpeed = parseFloat(speedSlider.value);\n if (speedLabel) speedLabel.textContent = state.growSpeed + \"×\";\n });\n}\n$(\"btn-import\").addEventListener(\"click\", () => $(\"import-file\").click());\n$(\"import-file\").addEventListener(\"change\", async (e) => {\n const f = (e.target as HTMLInputElement).files?.[0];\n if (!f) return;\n state = importPlantJSON(await f.text());\n prng = createPrng(state.step + seed);\n draw();\n});\n$(\"btn-dark\").addEventListener(\"click\", () => { state.darkMode = !state.darkMode; draw(); });\n$(\"btn-wood\").addEventListener(\"click\", (e) => { state.woodTexture = !state.woodTexture; (e.target as HTMLButtonElement).textContent = state.woodTexture ? \"Wood: ON\" : \"Wood: OFF\"; draw(); });\n$(\"btn-wind\").addEventListener(\"click\", (e) => { windEnabled = !windEnabled; (e.target as HTMLButtonElement).textContent = windEnabled ? \"Wind: ON\" : \"Wind: OFF\"; });\n\nlet resizeRaf: number | null = null;\nfunction scheduleDraw() {\n if (resizeRaf !== null) return;\n resizeRaf = requestAnimationFrame(() => { resizeRaf = null; draw(); });\n}\nwindow.addEventListener(\"resize\", scheduleDraw);\nwindow.addEventListener(\"orientationchange\", () => setTimeout(draw, 150));\nif ((window as unknown as { visualViewport?: { addEventListener: (t: string, f: () => void) => void } }).visualViewport) {\n (window as unknown as { visualViewport: { addEventListener: (t: string, f: () => void) => void } }).visualViewport.addEventListener(\"resize\", scheduleDraw);\n}\nlet lastWindTime = performance.now();\nlet lastGrowTime = performance.now();\nfunction animLoop(now: number) {\n const dt = (now - lastWindTime) / 1000;\n lastWindTime = now;\n if (windEnabled && state) {\n state.windTime += dt * 2.0;\n draw();\n }\n const growInterval = state.growSpeed > 0 ? 180 / state.growSpeed : 999999;\n if (playing && state && now - lastGrowTime > growInterval) {\n state = growOnce(state, prng);\n lastGrowTime = now;\n if (!windEnabled) draw();\n }\n if (state?.isRecording && state.timelapseFrames.length < 300) {\n state.timelapseFrames.push(canvas.toDataURL(\"image/webp\", 0.8));\n const recBtn = $(\"btn-timelapse\");\n if (recBtn) recBtn.textContent = `Stop (${state.timelapseFrames.length})`;\n }\n requestAnimationFrame(animLoop);\n}\nrequestAnimationFrame(animLoop);\nnewPlant();\n",[],[18,78,196],["D",1789341083565],[180],[18,78],["D",1789341083206],[179,181],[18],["D",1789340809179],{"_11":12,"_130":69},{"_11":12,"_126":-5,"_68":69,"_31":67,"_127":128,"_129":30},{"_40":117,"_13":16,"_34":37,"_118":82,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":14,"_125":12},"ctx",{"_52":-5,"_149":245,"_246":247,"_248":249,"_250":30,"_251":30,"_252":30,"_253":24,"_254":-5,"_255":-7,"_256":-7,"_257":26,"_258":30,"_259":30,"_260":-5,"_261":30,"_262":30,"_263":30,"_264":-5},"ENV",{"_216":217,"_218":219,"_220":16,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244},"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"]

History · src