Procedural Garden

Growth Algorithm

function sigmoidDerivative(x: number): number {
  const s = 1 / (1 + Math.exp(-10 * (x - 0.5)))
  return s * (1 - s) * 4  // Peak growth at maturity 0.5
}

function updatePlantGrowth(plant: PlantDNA, currentAPY: number, deltaSec: number): PlantDNA {
  const baseGrowthPerDay = currentAPY / 365 / 100
  const growthIncrement = baseGrowthPerDay * (deltaSec / 86400)
  const newMaturity = Math.min(1.0, plant.maturity + growthIncrement * sigmoidDerivative(plant.maturity))

  const newMutations = [...plant.mutations]
  if (newMaturity > 0.25 && !newMutations.includes('first_bloom')) newMutations.push('first_bloom')
  if (newMaturity > 0.50 && !newMutations.includes('full_canopy')) newMutations.push('full_canopy')
  if (newMaturity > 0.75 && !newMutations.includes('fruit_bearing')) newMutations.push('fruit_bearing')
  if (newMaturity > 0.95 && !newMutations.includes('legendary_glow')) newMutations.push('legendary_glow')

  return { ...plant, maturity: newMaturity, mutations: newMutations, growthRate: currentAPY }
}

Canvas Render Loop

// 60fps target, throttle to 30fps on mobile
let lastTime = 0
function gameLoop(timestamp: number) {
  const delta = timestamp - lastTime
  if (delta < 16.67) { requestAnimationFrame(gameLoop); return } // Cap at 60fps
  lastTime = timestamp

  // 1. Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height)

  // 2. Draw sky gradient (time-of-day + weather)
  drawSky(ctx, gardenState.weather, Date.now())

  // 3. Draw ground/soil
  drawGround(ctx, gardenState.season)

  // 4. Draw plants back-to-front (sorted by y position)
  const sorted = [...gardenState.plants].sort((a, b) => a.position.y - b.position.y)
  for (const plant of sorted) {
    drawPlant(ctx, plant, timestamp)
  }

  // 5. Draw weather particles
  drawWeatherParticles(ctx, gardenState.weather, delta)

  // 6. Draw yield sparkles
  drawYieldSparkles(ctx, gardenState.plants, timestamp)

  requestAnimationFrame(gameLoop)
}

Weather Mapping

function getWeather(apyData: number[], tvlData: number[]): WeatherState {
  const apyVolatility = calculateVolatility(apyData.slice(-7))
  const tvlTrend = (tvlData[tvlData.length - 1] - tvlData[tvlData.length - 8]) / tvlData[tvlData.length - 8]

  if (apyVolatility < 0.05 && tvlTrend > 0.01) return 'golden_hour'
  if (apyVolatility < 0.15) return 'sunny'
  if (apyVolatility < 0.35) return 'rainy'
  return 'stormy'
}

Canvas Responsiveness

function resizeCanvas(canvas: HTMLCanvasElement) {
  const dpr = window.devicePixelRatio || 1
  const rect = canvas.getBoundingClientRect()
  canvas.width = rect.width * dpr
  canvas.height = rect.height * dpr
  const ctx = canvas.getContext('2d')!
  ctx.scale(dpr, dpr)
}
// Call on mount + window resize (debounced)

Animation Triggers