Sketch Lifecycle

Understanding the lifecycle of a P5.js sketch in P5 Svelte is crucial for creating efficient and responsive applications. The framework manages initialization, updates, and cleanup automatically.

Interactive Demo

Click and drag on the canvas to see lifecycle events in action:

FPS: 60

Lifecycle Phases

1. Initialization

Component mounted
P5.js instance created
Canvas element initialized
setup() function called

2. Runtime Loop

draw() function called each frame
Event handlers triggered
State updates processed

3. Cleanup

Component unmounted
Resources released
Event listeners removed

Core Functions

setup()

setup: (p5) => {
  // Called once when sketch starts
  p5.createCanvas(400, 400);
  p5.background(220);
  // Initialize state
  p5._customState = {};
}

Runs once at sketch initialization
Set up canvas and initial state
Configure sketch parameters

draw()

draw: (p5) => {
  // Called every frame
  p5.background(220);
  // Update and render
  updateState(p5);
  renderElements(p5);
}

Runs continuously (every frame)
Update sketch state
Render visual elements

Event Handlers

mousePressed: (p5) => {
  // Handle mouse interactions
},
keyPressed: (p5) => {
  // Handle keyboard input
}

Respond to user interactions
Update sketch state
Trigger animations or effects

State Management

State Management Tips:

Store persistent state on the p5 instance using underscore prefix (e.g., p5._state)
Use Svelte stores for state that needs to be shared between components
Clean up state when component unmounts

Performance Considerations

Common Pitfalls

Creating new objects every frame
Not cleaning up resources
Excessive DOM operations

Best Practices

Reuse objects when possible
Use appropriate data structures
Implement proper cleanup

Next Steps

Learn more about managing state in your sketches in the State Management guide.