Svelte P5 wrapper

The small wrapper allow the usage of p5*js in Svelte

Installation

npm install @macfja/svelte-p5

Usage & Examples

The component (<P5 />) execute every functions that are pass as a p5*js function. Every function have access to 3 parameters:

• 1st parameter: The current sketch context (createVector, circle, fill, etc.)
• 2nd parameter: The map of p5*js classes (Color, Geometry, Shader, etc.)
• 3rd parameter: The map of p5*js constants (BURN, DEG_TO_RAD, PI, RIGHT_ARROW, etc.)

<script>
import P5 from "@macfja/svelte-p5"

function setup(p5, classes, constants) {
  p5.createCanvas(400, 400);
}

function draw(p5, classes, constants) {
  p5.background(220);
  p5.ellipse(50,50,80,80);
}
</script>

<P5 {setup} {draw} />

<script>
import P5 from "@macfja/svelte-p5"

let y = 0;
let sketch = {
  setup: p5 => {
    p5.createCanvas(720, 400);
    p5.stroke(255); // Set line drawing color to white
    p5.frameRate(30);
  },
  draw: p5 => {
    p5.background(0); // Set the background to black
    y = y - 1;
    if (y < 0) {
      y = p5.height;
    }
    p5.line(0, y, p5.width, y);
  }
}
</script>

<P5 {...sketch} />

<script>
import P5 from "@macfja/svelte-p5"

let y = 0;
let speed = 30;
let current;
let sketch = {
  setup: p5 => {
    p5.createCanvas(720, 400);
    p5.stroke(255); // Set line drawing color to white
  },
  draw: (p5) => {
    p5.frameRate(speed);
    p5.background(0); // Set the background to black
    y = y - 1;
    if (y < 0) {
      y = p5.height;
    }
    p5.line(0, y, p5.width, y);
    current = p5.frameRate()
  }
}
</script>

<style>
	label * {
		vertical-align: middle;
	}
</style>

<label>Speed (frame rate): <input type="range" min="1" max="100" bind:value="{speed}" /> {speed} (Current framerate: {Math.round((current + Number.EPSILON) * 100) / 100})</label>
<P5 {...sketch} />

(REPL for the 3 example above)

Contributing

Contributions are welcome. Please open up an issue or create PR if you would like to help out.

Read more in the Contributing file

License

The MIT License (MIT). Please see License File for more information.