Quick Start
Before starting, make sure you've completed the installation steps.
Create Your First Project
npx create-p5-svelte-app my-first-sketchProject Structure
my-first-sketch/
├── src/
│ ├── lib/
│ │ ├── components/ # P5 components
│ │ ├── core/ # Framework core
│ │ └── stores/ # State management
│ └── routes/ # Your sketches
├── static/
└── package.jsonStarting Development
Navigate to your project
cd my-first-sketchInstall dependencies
npm installStart development server
npm run devCreate Your First Sketch
Create a new file in src/routes/ with the following content:
<script lang="ts">import P5Canvas from "$lib/components/p5/P5Canvas.svelte";
const sketch = {
setup: (p5) => {
p5.background(220);
},
draw: (p5) => {
p5.ellipse(p5.mouseX, p5.mouseY, 20, 20);
}
};
</script>
<P5Canvas {sketch} /> You should now see a canvas that draws circles following your mouse movement!