Trying to get p5 up and running in Svelte can be a pain. So here's an absolutely dead simple way of tossing it into your project.
The API is super simple; you get a P5 component which accepts a sketch prop. You can make use of Svelte's reactivity system to bind props or params within your p5 sketch just as you would with regular Svelte! You can even have multiple p5 components per page without any scoping issues!
pnpm i p5-svelteDepending on your environment, you may be alerted upon installing p5-svelte that p5 is a required peer dependency which you must install yourself. Thus do:
pnpm i -D p5Now add p5-svelte to your project (ex. src/App.svelte):
<script>
import P5 from 'p5-svelte';
let width = 55;
let height = 55;
const sketch = (p5) => {
p5.setup = () => {
p5.createCanvas(400, 400);
};
p5.draw = () => {
p5.ellipse(p5.width / 2, p5.height / 2, width, height);
};
};
</script>
<label>
Width
<input type="range" bind:value={width} min="100" max="1000" step="0.01" />
{width}
</label>
<label>
Height
<input type="range" bind:value={height} min="100" max="1000" step="0.01" />
{height}
</label>
<P5 {sketch} />
It's that easy! 😃
Svelte doesn't allow us to globally expose the p5 library by installing it to the window (which is how p5 is commonly installed in vanilla js projects). Therefore, p5 must be used in instance mode with this component. That means you'll have to call library functions with a p5. preceding them like in the example above.
You can access the internals of your p5 instance and the available native classes that p5-svelte automatically makes available to your project via passing the debug prop:
<P5 {sketch} debug />The <P5/> component emits a few events you can listen to.
Emits a reference to the DOM element target which the p5 instance mounts to.
This event fires on init of the p5 project instance, emitting a reference to that p5 project instance object.