DEV Community

Cover image for p5-Svelte: a quick and easy way to use p5 in Svelte! πŸ•ΈπŸ§™β€β™‚οΈ
Tony Ketcham
Tony Ketcham

Posted on

p5-Svelte: a quick and easy way to use p5 in Svelte! πŸ•ΈπŸ§™β€β™‚οΈ

Have you ever tried to throw p5 into a Svelte project? It's kinda a pain in the ass!

So guess what - I've done n made a component for the Svelte and p5 privy or intrigued to savor your sweet, generative teeth on.

Behold, p5-svelte

πŸ›΄ Usage

Giving it the good ol' ball of yarn:

yarn add p5-svelte
Enter fullscreen mode Exit fullscreen mode
<script>
  import P5 from 'p5-svelte'
</script>

<P5/>
Enter fullscreen mode Exit fullscreen mode

Run that and you should see the sketch we're about to make below πŸš£β€β™€οΈ

Full Example πŸ—Ώ

Let's implement the 10print algorithm (in the cover photo) using p5-svelte:

<script>
  import P5 from 'p5-svelte';

  /**
  * a peeFive'd 10print algorithm
  * @see {@link https://10print.org/} to learn about it!
  * @param {p5} p5 instance mode
  */
  const sketch = (p5) => {
    let x = 0;
    let y = 0;
    let size = 15;
    let threshold = 0;

    p5.setup = () => {
      p5.createCanvas(400, 400);
    };

    p5.draw = () => {
      p5.stroke(1);
      threshold = p5.random(0.75);

      if (threshold < 0.1) p5.line(x, y, x + size, y + size);
      else if (0.505 > threshold > 0.5) p5.line(x, y, x, y + size);
      else p5.line(x, y + size, x + size, y);

      x = x + size;
      if (x > p5.width) {
        x = 0;
        y = y + size;
      }
    };
  };
</script>

<P5 {sketch} />

Enter fullscreen mode Exit fullscreen mode

Doing npm run dev, we're left with this beaut (give the gif a second to load if it's not showing up immediately):

10print in p5-svelte

Use Svelte's Reactivity ♻️

This is my favorite aspect of this component. You can use all the shiny Svelte features to make reactive UIs bound to aspects of your p5 sketches with great DX. Maybe make an interactive web editor or some weird utility with powerful and intriguing UI interactions??

Here's a simple example of two Svelte inputs bound to the width and height of an ellipse in p5:
Alt Text

<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} />
Enter fullscreen mode Exit fullscreen mode

p5.js instance mode

You perhaps noticed it in the example, but 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.

Contributing

I would love some pull requests if anyone finds some areas of improvement and would like to contribute!
Go at it: p5-svelte repo on GitHub

Fun fact, this component was made using Svelte Actions.

Discussion (7)

Collapse
wavinginspace_78 profile image
Paul Baisley

This looks great! However, I am getting this error when trying to run the example.

Uncaught SyntaxError: The requested module '/node_modules/p5/lib/p5.min.js?v=3774f7dd' does not provide an export named 'default'

Any ideas?

Collapse
tonyketcham profile image
Tony Ketcham Author

Hi - apologies for the incredibly late reply but a new major version of p5-svelte has been released which should have fixed this!

Collapse
aewing profile image
Andrew Ewing

Nice! Can’t wait to build something with it.

Collapse
vitalcog profile image
Chad Windham

Well if you ever do, please share your experience!

Collapse
tonyketcham profile image
Tony Ketcham Author

I'm actually itchin to see what ya make

Collapse
jithinks profile image
Jithin KS

Nice work buddy

Collapse
tonyketcham profile image
Tony Ketcham Author

Thanks!! Just added another example of how easy it is to bind p5 things to Svelte's reactivity system too