https://github.com/macfja/svelte-p5

Small wrapper around P5 for Svelte
https://github.com/macfja/svelte-p5

p5js svelte svelte-component sveltejs

Last synced: 11 days ago
JSON representation

Small wrapper around P5 for Svelte

• Host: GitHub
• URL: https://github.com/macfja/svelte-p5
• Owner: MacFJA
• License: mit
• Created: 2020-10-24T17:06:30.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-08-05T20:21:35.000Z (over 2 years ago)
• Last Synced: 2024-10-11T12:45:49.993Z (27 days ago)
• Topics: p5js, svelte, svelte-component, sveltejs
• Language: Svelte
• Homepage:
• Size: 16.6 KB
• Stars: 10
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Svelte P5 wrapper

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

## Installation

```

npm install @macfja/svelte-p5

```

## Usage & Examples

The component (``) 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.)

```html

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);

}

```

```html

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);

  }

}

```

```html

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()

  }

}

	label * {

		vertical-align: middle;

	}

Speed (frame rate):  {speed} (Current framerate: {Math.round((current + Number.EPSILON) * 100) / 100})

```

([REPL for the 3 example above](https://svelte.dev/repl/5501d3af4d8e4c2caa17324c9724a8f8?version=3.29.4))

## 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](CONTRIBUTING.md)

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.