Your First Sketch

Let's create an interactive sketch that demonstrates the core concepts of P5 Svelte. We'll start simple and gradually add more features.

Basic Setup

First, let's create a simple sketch that follows the mouse:

<script lang="ts">import P5Canvas from "$lib/components/p5/P5Canvas.svelte";
const sketch = {
  setup: (p5) => {
    p5.background(220);
  },
  draw: (p5) => {
    p5.fill(255, 0, 0);
    p5.noStroke();
    p5.ellipse(p5.mouseX, p5.mouseY, 20, 20);
  }
};
</script>

<P5Canvas {sketch} />

Result:

FPS: 60

Adding Interactivity

Now let's create a more interactive sketch that stores state and responds to mouse clicks:

const sketch: Sketch = {
  setup: (p5) => {
    p5._circles = [];  // Store state in p5 instance
    p5.background(220);
  },
  draw: (p5) => {
    p5.background(220);
    for (let circle of p5._circles) {
      p5.fill(circle.color);
      p5.ellipse(circle.x, circle.y, circle.size);
    }
  },
  mousePressed: (p5) => {
    p5._circles.push({
      x: p5.mouseX,
      y: p5.mouseY,
      size: p5.random(10, 50),
      color: p5.color(p5.random(255), p5.random(255), p5.random(255))
    });
  }
};

Try it out! Click anywhere on the canvas:

FPS: 60

Key Concepts

Sketch Lifecycle

Understanding setup(), draw(), and event handlers

State Management

Storing and updating sketch state

Event Handling

Responding to user interactions

Breaking Down the Code

Setup Function

The setup function runs once when the sketch starts:

Initializes the circles array to store our state
Sets the initial background color

Draw Function

The draw function runs continuously:

Clears the background each frame
Renders all circles stored in our state

Mouse Events

The mousePressed function handles click events:

Creates a new circle at the mouse position
Adds it to our circles array with random properties

Next Steps

Ready to learn more? Check out the Architecture guide or explore some Basic Examples.