🌳🐄💧 AgroTech Lab · Finca El Porvenir

Un gemelo digital experimental para ver la finca ganadera como lo que es: un solo sistema vivo

▶ Abrir la demo en vivo · Arquitectura · Trabajar con Claude

Todo lo que ves se mueve: el ganado rota de potrero, llueve, anochece, los sensores reportan y la línea de tiempo guarda cada hora.

---

🧭 El problema

En una finca ganadera todo está conectado: el suelo compactado produce menos pasto, menos pasto obliga a sobrepastorear, el ganado sin sombra sufre calor y da menos leche, la vaca que bebe en la quebrada la contamina aguas abajo, y la familia que vive de esa leche paga las consecuencias.

Pero las herramientas que suelen usarse miran una sola cosa a la vez: un registro de producción, una app de clima, una planilla de vacunas. Nadie ve la integralidad del entorno.

AgroTech Lab es un experimento que hace la pregunta al revés:

¿Qué pasaría si pudiéramos ver la finca entera como un solo organismo, con cada relación visible, cada causa trazable y cada decisión con consecuencias medibles?

✨ Qué hay en la demo

Una finca ficticia del Caribe colombiano, Finca El Porvenir, simulada hora a hora y monitoreada por 18 sensores virtuales.

🗺️ Mapa isométrico vivo	8 potreros, quebrada en 3 tramos, reservorio, bosque, zona de recuperación, sala de ordeño, biodigestor y compost. 28 animales (Gyrolando, Brahman y las criollas Romosinuano y Costeño con Cuernos) que pastan, caminan y rotan. Lluvia, nubes, ciclo día/noche.
🧩 Los 7 componentes del entorno	Suelo · Agua · Vegetación · Animal · Clima · Biodiversidad · Dimensión humana. Cada uno con su puntaje, su capa en el mapa y su historia.
📊 Índice de integralidad	70 % promedio + 30 % componente más débil. Una parte mal manejada arrastra a todo el sistema, igual que en la realidad.
🔗 Relaciones en vivo	Un grafo que se recalcula con los datos del momento: qué componente está reforzando o presionando a cuál, y por qué.
⏪ Trazabilidad total	Arrastra la línea de tiempo y la finca entera vuelve a ese día. Bitácora con origen de cada evento (sensor, regla, operador, automático).
🥛 Del vaso al potrero	Cada lote de leche se rastrea hasta el suelo, el pasto, el agua y los animales que lo produjeron. Las vacas en retiro quedan fuera.
⚡ Provoca eventos	Ola de calor, sequía, aguacero, cerca rota, brote de parásitos, falla de sensor. Mira cómo se propaga el daño… y cómo se recupera.

🚀 Pruébalo en 60 segundos

1. Abre la demo. La finca arranca con 30 días de historia y un problema activo.
2. En el panel derecho verás la Quebrada media en estado crítico. Pulsa Reparar cerca de P4 y sube la velocidad a 12 h/s: mira cómo se limpia el agua aguas abajo.
3. Provoca una Ola de calor y activa la capa Animal: los potreros con árboles sufren menos.
4. Apaga la Rotación automática y espera: aparece el sobrepastoreo, el suelo se compacta y el índice cae.
5. Arrastra la línea de tiempo para volver al pasado y ver cuándo empezó todo.

💻 Córrelo en tu máquina

No hay nada que instalar. De verdad.

git clone https://github.com/andybolano/agroTechLab.git
cd agroTechLab
open index.html                 # o doble clic. En Linux: xdg-open index.html

¿Prefieres un servidor local? Solo necesitas Node 18+:

node tools/servir.mjs           # → http://localhost:8080
node tools/sim-test.mjs         # simula 300 días en ~1 s y valida el modelo

🏗️ Arquitectura en un vistazo

HTML + CSS + JavaScript puro, sin dependencias y sin build, separado en un modelo que no sabe dibujar y una vista que solo lee el estado.

agroTechLab/
├── index.html                  # estructura de la página
├── src/
│   ├── css/app.css             # tema visual (tokens en :root)
│   └── js/
│       ├── 01-util.js          # estados, colores, fechas        ┐
│       ├── 02-world.js         # rejilla, potreros, sensores     ├─ MODELO (corre en Node)
│       ├── 03-sim.js           # simulación hora a hora          ┘
│       ├── 04-layers.js        # capas del mapa                  ┐
│       ├── 05-render.js        # motor isométrico en Canvas 2D   │
│       ├── 06-panels.js        # paneles, fichas, relaciones     ├─ VISTA
│       ├── 07-timeline.js      # línea de tiempo / viaje al pasado
│       ├── 08-interaction.js   # mouse, zoom, teclado            │
│       └── 09-boot.js          # arranque                        ┘
├── tools/
│   ├── sim-test.mjs            # prueba del modelo sin navegador
│   ├── captura.mjs             # captura con Chrome headless
│   └── servir.mjs              # servidor estático mínimo
├── docs/ARQUITECTURA.md        # el detalle: estado, ciclo, recetas
├── CLAUDE.md                   # el "manual de la casa" para Claude
└── .claude/                    # comandos y agentes listos para usar

flowchart LR
  SIM["🧠 Modelo<br/>step() cada hora"] -->|estado S| MAP["🗺️ Mapa isométrico"]
  SIM -->|estado S| UI["📊 Paneles"]
  SIM -->|instantánea cada 3 h| TL["⏪ Línea de tiempo"]
  TL -->|VIEW| MAP & UI
  USER["👆 Operador"] -->|act · provoke| SIM

Lee docs/ARQUITECTURA.md para la forma del estado, el ciclo de una hora y las recetas para extender la finca.

This is the beginning of the README. Read the rest at the original. Read the full README ↗