Architecture

P5 Svelte is built on a component-based architecture that seamlessly integrates P5.js with Svelte's reactive paradigm. Understanding the core architecture will help you build more efficient and maintainable sketches.

Core Components

P5Canvas Component

The primary component that manages P5.js instance lifecycle and rendering.

<P5Canvas
  sketch={sketchConfig}
  config={canvasConfig}
/>

P5Manager

Handles P5.js instance creation, destruction, and event management.

class P5Manager {
  initialize()
  destroy()
  resize()
  toggleLoop()
}

Framework Structure

lib/
├── components/
│   ├── p5/
│   │   ├── P5Canvas.svelte    # Main canvas component
│   │   └── P5Controls.svelte  # Optional controls
│   └── examples/              # Example components
├── core/
│   ├── p5manager.ts          # P5.js instance management
│   └── types.ts              # TypeScript definitions
├── stores/
│   ├── settings.ts           # Global settings store
│   └── appState.ts           # Application state
└── utils/
    ├── constants.ts          # Configuration constants
    └── helpers.ts            # Utility functions

Key Concepts

Component Hierarchy

P5Canvas as root
Managed P5 instance
Sketch configuration

State Management

Svelte stores
P5 instance state
Reactive updates

Lifecycle Management

Setup and teardown
Event handling
Resource cleanup

Data Flow

Component	Responsibility	Data Direction
P5Canvas	Canvas management and rendering	↓ Props, ↑ Events
P5Manager	Instance lifecycle and state	↕ Bidirectional
Stores	Global state management	↔ Reactive

Configuration

Canvas Configuration

interface P5Configuration {
  width?: number;
  height?: number;
  backgroundColor?: string;
  frameRate?: number;
  antialias?: boolean;
}

Sketch Configuration

interface Sketch {
  setup?: (p5: P5Extended) => void;
  draw?: (p5: P5Extended) => void;
  mousePressed?: (p5: P5Extended) => void;
  // Additional event handlers...
}

Best Practices

Follow these guidelines for optimal performance:

Always cleanup resources in component destruction
Use Svelte stores for shared state
Maintain type safety with TypeScript
Leverage reactive statements for state updates

Next Steps

Now that you understand the architecture, learn more about the Sketch Lifecycle or dive into State Management.