svelte-p5js (still under early development)

A svelte wrapper for the p5.js library.

npm install svelte-p5js

All props and variables are an exact copy of the names used in the reference for the p5js library.

Alternatives

• https://github.com/tonyketcham/p5-svelte

Currently spported components

Components used to simplify the p5.js API.

Rendering

• <Canvas /> (createCanvas)

Structure

• <Draw />
• <Setup />
• <Sketch />
• <P5 />

Setting

• <Background />
• <Clear />
• <Erase />
• <NoErase />
• <Fill />
• <NoFill />
• <Stroke />
• <NoStroke />

Shape

• <Circle />
• <Ellipse />

Currently supported events (available on the <P5 /> component)

All events provide the current instance via event.detail.instance.

Acceleration events

• on:setMoveThreshold
• on:setShakeThreshold
• on:deviceMoved
• on:deviceTurned
• on:deviceShaken

Keyboard events

• on:keyPressed
• on:keyReleased
• on:keyTyped
• on:keyIsDown

Mouse events

• on:mousePressed
• on:mouseMoved
• on:mouseDragged
• on:mousePressed
• on:mouseReleased
• on:mouseClicked
• on:doubleClicked
• on:mouseWheel
• on:requestPointerLock
• on:exitPointerLock

Touch events

• on:touchStarted
• on:touchMoved
• on:touchEnded

Currently supported constants (available on the <P5 /> component)

Keyboard constants

• keyIsPressed
• key
• keyCode

Mouse constants

• movedX
• movedY
• mouseX
• mouseY
• pmouseX
• pmouseY
• winMouseX
• winMouseY
• pwinMouseX
• pwinMouseY
• mouseButton
• mouseIsPressed

Example usage

The P5 component is the only required component. It sets up a p5 instance and must be the parent of all other components.

<script>
	import { P5, Setup, Canvas, Draw, Background, Fill, Circle, Ellipse } from 'svelte-p5js';

	let x = 0;
	let y = 0;
	let d = 10;

	let mouseIsPressed;
	$: console.log('Mouse is pressed?', mouseIsPressed);

	// Bind the current instance of the P5 component to a variable
	// and get access to the whole API
	let p5;
</script>

<P5
	bind:p5
	setup={() => console.log('I was fired during setup')}
	draw={(p5) => {
		x++;
		y++;
		d += 0.3;
		// Get access to the whole p5js api via the first
		// and only "instance" parameter
		p5.mousePressed = () => {
			p5.noLoop();
		};
	}}
	bind:mouseIsPressed
	on:mouseReleased={(event) => {
		// Get access to the current instance via the event
		const instance = event.detail.instance;
		p5.loop();
	}}
>
	<Setup>
		<Canvas w={500} h={500} />
	</Setup>

	<Draw>
		<Background v1={105} v2={140} v3={99} />
		<Fill color="pink" />
		<Circle {x} {y} {d} />
		<Fill v1={205} v2={40} v3={99} />
		<Ellipse {x} {y} w={20} h={20} />
	</Draw>
</P5>

Run locally

1. npm install
2. npm run dev
3. Use the src/routes/+page.svelte as a playground