vue-p5-component v1.0.4

Vue-P5-Component (P5 wrapper is taken from Kinrany/vue-p5)

This Readme is also taken from taken from Kinrany/vue-p5. Only typescript usage instruction is added

Create p5.js instance as a Vue component.

Quick start

NPM

npm install --save vue vue-p5-component@latest
yarn add vue vue-p5-component@latest

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:

<vue-p5 v-on="{setup, draw, keypressed}"></vue-p5>
<!-- which is equivalent to: -->
<vue-p5 
    @setup="setup"
    @draw="draw"
    @keypressed="keypressed">
</vue-p5>

on: {
  setup: this.setup, 
  draw: this.draw, 
  keypressed: this.keypressed
}

See also v-on object syntax.

Events - p5 and Vue

Every p5 event is exposed as a Vue event. The first argument is the sketch object used for drawing and everything else:

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:

// 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, not mouse-clicked, not mouse_clicked.

Importing existing sketches

In addition to all the p5 events, there's a @sketch event that can be used to import an existing p5 sketch written in instance mode.

<vue-p5 @sketch="sketch"></vue-p5>

<script>
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);
        });
      }
    }
  }
});
</script>

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.

Importing type definitions (WIP)

type defintions are just @types/p5 alias.

NOTE:

• All the types are prefixed with P5(see below)

• P5Sketch is p5InstanceExtensions alias, which is both renamed and prefixed, All the other types are prefixed Only

<template>
  <P5 v-on="{setup, draw}" />
</template>

<script lang="ts">
import Vue from "vue";
import
  P5,
  {
    P5Element, P5Sketch // this are the type definitions
  } from "vue-p5-component";

export default Vue.extend({
  components: { P5 },
  data() {
    return { video: undefined } as { video: undefined | P5Element };
  },
  methods: {
    setup(sketch: P5Sketch) {
      sketch.createCanvas(400, 400);
      sketch.background(50);

      this.video = sketch.createCapture(sketch.VIDEO);
      if(this.video) {
        this.video.size(400, 400);
        this.video.hide();
      }
    },
    draw(sketch: P5Sketch) {
      sketch.tint(255, 0, 100);
      if(this.video !== undefined) sketch.image(this.video, 0, 0, sketch.mouseX || 400, sketch.height || 400);
    },
  },
});
</script>

License

MIT