ALife Simulation

Interactive artificial life simulation featuring autonomous agents, resource management, and emergent behaviors in a 3D environment.

Live Demo: https://alife-simulation-r49qtylir-captains-projects-493e7ead.vercel.app

Features

Artificial Life System

• Autonomous Agents: Self-directed lifeforms with unique behaviors
• Resource Management: Dynamic resource allocation and consumption
• Emergent Behaviors: Complex patterns arising from simple rules
• Population Dynamics: Birth, death, and evolution simulation

Visualization

• 3D WebGL Rendering: Real-time 3D visualization of the simulation
• Interactive Controls: Adjust simulation parameters on the fly
• Lifeform Inspector: Detailed view of individual agent properties
• Performance Optimized: Efficient spatial partitioning for large populations

User Interface

• Modern React UI: Built with shadcn/ui and Radix UI components
• Responsive Design: Works on desktop and mobile devices
• Dark Mode Support: Easy on the eyes for extended observation
• Real-time Stats: Live monitoring of simulation metrics

Technology Stack

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite
• UI Components: Radix UI, shadcn/ui, Tailwind CSS
• 3D Graphics: Custom WebGL implementation
• State Management: TanStack Query, React Hooks
• Backend (Optional): Supabase for data persistence
• Deployment: Vercel

Getting Started

Prerequisites

• Node.js 16+ and npm
• Modern web browser with WebGL support

Installation

1. Clone the repository:

git clone https://github.com/tradewithmeai/alife-simulation.git
cd alife-simulation

2. Navigate to the project directory:

cd lifeform-grid-garden-main

3. Install dependencies:

npm install

4. Start the development server:

npm run dev

The application will be available at http://localhost:8080

Available Scripts

npm run dev       # Start development server
npm run build     # Create production build
npm run preview   # Preview production build locally
npm run lint      # Run ESLint

Project Structure

src/
├── components/              # React components
│   ├── SimulationCanvas.tsx    # Main 3D WebGL canvas
│   ├── SimulationControls.tsx  # Control panel UI
│   └── LifeformInspector.tsx   # Agent detail viewer
├── hooks/                   # Custom React hooks
│   ├── useSimulation.ts        # Main simulation logic
│   ├── useSpatialGrid.ts       # Spatial partitioning
│   └── useSimulation*.ts       # Additional hooks
├── lib/                     # Core simulation engine
│   ├── simulationEngine.ts     # Engine logic
│   └── utils.ts               # Utility functions
├── types/                   # TypeScript definitions
│   └── simulation.ts          # Core types
└── pages/                   # Application pages
    ├── Index.tsx              # Main page
    └── NotFound.tsx           # 404 page

Configuration

Simulation parameters can be adjusted through the control panel UI or by modifying the configuration in the simulation engine.

Deployment

This project is configured for automatic deployment on Vercel:

git push origin main    # Triggers automatic Vercel deployment

Or deploy manually:

vercel --prod

Performance Optimization

• Spatial grid partitioning for efficient collision detection
• WebGL rendering for GPU-accelerated graphics
• Optimized React rendering with proper memoization
• Production build minified to ~136KB gzipped

Browser Compatibility

• Chrome/Edge: Full support
• Firefox: Full support
• Safari: Full support
• Mobile browsers: Supported (may have performance limitations)

Future Enhancements

• Evolution and genetic algorithms
• Predator-prey relationships
• Environmental hazards and events
• Save/load simulation states
• Export simulation data for analysis

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

See LICENSE file for details.

Acknowledgments

Built with React, TypeScript, and WebGL for an interactive artificial life experience.