The small wrapper allow the usage of p5*js in Svelte
npm install @macfja/svelte-p5
The component (<P5 />
) execute every functions that are pass as a p5*js function.
Every function have access to 3 parameters:
createVector
, circle
, fill
, etc.)Color
, Geometry
, Shader
, etc.)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)
Contributions are welcome. Please open up an issue or create PR if you would like to help out.
Read more in the Contributing file
The MIT License (MIT). Please see License File for more information.