https://github.com/Kinrany/vue-p5
Vue component for p5.js
https://github.com/Kinrany/vue-p5
p5 p5js vue vue-p5
Last synced: 2 months ago
JSON representation
Vue component for p5.js
- Host: GitHub
- URL: https://github.com/Kinrany/vue-p5
- Owner: Kinrany
- Created: 2018-05-26T21:10:02.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-03-03T21:02:01.000Z (over 1 year ago)
- Last Synced: 2024-11-27T16:41:54.731Z (11 months ago)
- Topics: p5, p5js, vue, vue-p5
- Language: Vue
- Size: 1020 KB
- Stars: 125
- Watchers: 9
- Forks: 16
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# vue-p5
Create [p5.js](https://p5js.org/) instance as a [Vue](https://vuejs.org/) component.
## Quick start
### Script
```html
new Vue({
el: '#app',
methods: {
setup(sketch) {
sketch.background('green');
sketch.text('Hello p5!', 20, 20);
}
}
});
```
### NPM
```bash
npm install --save vue@2 vue-p5
```
```javascript
import Vue from 'vue';
import VueP5 from 'vue-p5';
export default {
methods: {
setup(sketch) {
sketch.background('green');
sketch.text('Hello p5!', 20, 20);
}
},
render(h) {
return h(VueP5, {on: this});
}
};
```
## Usage
### v-on object syntax
In the examples above `v-on="this"` and `{on: this}` are a short (and hacky) way to avoid handling every p5 event explicitly. You might want to use one of the other options:
```html
```
```javascript
on: {
setup: this.setup,
draw: this.draw,
keypressed: this.keypressed
}
```
See also [`v-on` object syntax](https://vuejs.org/v2/api/#v-on).
### Events - p5 and Vue
Every [p5 event](https://p5js.org/reference/#group-Events) is exposed as a [Vue event](https://vuejs.org/v2/guide/events.html). The first argument is the sketch object used for drawing and everything else:
```javascript
methods: {
draw(sk) {
// draw a line between the previous
// and the current mouse position
sk.line(sk.pmouseX, sk.pmouseY, sk.mouseX, sk.mouseY);
},
keypressed(sk) {
// convert the key code to it's string
// representation and print it
const key = String.fromCharCode(sk.keyCode);
sk.print(key);
}
}
```
Using methods makes it possible to access the current component:
```javascript
// green background
data: {
color: [0, 255, 0]
},
methods: {
draw(sketch) {
sketch.background(...this.color);
}
}
```
#### Event names
Each event emitted by vue-p5 has the same name as the corresponding p5 event, but lowercase.
`mouseclicked`, not ~~`mouseClicked`~~.
#### Missing events
Currently all p5 events [are supported], but there is an escape hatch. For example, if `windowResized` was missing, it's (lowercase) name could be passed to `additional-events` prop to make `vue-p5` aware of it:
```html
```
Though please [let me know](#feedback) if you ever have to use this.
[are supported]: https://github.com/Kinrany/vue-p5/blob/master/src/p5.vue#L12-L38
### Importing existing sketches
In addition to p5 events, there's a `@sketch` event for importing an existing p5 sketch written in [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode).
```html
new Vue({
methods: {
sketch(sk) {
const clicks = [];
sk.mouseClicked = () => {
// save clicks to array
clicks.push({ x: sk.mouseX, y: sk.mouseY });
}
sk.draw = () => {
// draw a circle around each clicked position
clicks.forEach(({ x, y }) => {
sk.ellipse(x, y, 10, 10);
});
}
}
}
});
```
Remember to use arrow functions if you need `this`.
`@sketch` can be used in parallel with other events. Functions defined in the `@sketch` handler will always be called first.
## Examples
Hello world: [codepen](https://codepen.io/Kinrany/pen/ExaPeNg)
Webpack project: [vue-p5-example](https://github.com/Kinrany/vue-p5-example/)
A game of Snake: [vue-p5-snake](https://github.com/Kinrany/vue-p5-snake/)
## Feedback
Feedback is very welcome! Free to [open a new issue](https://github.com/Kinrany/vue-p5/issues/new) for any reason.
You can also [ping me on twitter](https://twitter.com/kinrany) or [write me an email](mailto:kinrany@yandex.com).
## Versioning
This project adheres to [semver](https://semver.org/). Minor changes are breaking.
Use `vue-p5@next` to get a version with future updates.
## License
LGPL-2.1