p5wrappers

    0.0.4 • Public • Published

    GitHub tag (latest by date) PRs welcome GitHub

    p5-wrapper

    P5.js wrappers for React and Vue.js This Components lets you integrate p5 Sketches into your React & Vue App.

    A bug with the bundling of the Vue js component make it unusable at the moment. It will be fixed soon. Sorry for the inconvenience

    • 0.1.0 update : Now you can pass a data object to the wrappers to receive data from your components into your sketch scripts

    Installation

    npm install p5wrappers --save
    

    Usage

    For React

    import React, {Component} from 'react'
    // import as for fancy name
    import {ReactP5Wrapper as P5} from 'p5wrappers'
     
    import yourSketch from './yourDir/yourSketch'
     
    // Yes I prefer class components rather than functionnal components
    // But you can write yours the way you want
    class YourComponent extends Component {
     
        constructor(props) {
            super(props)
            this.state = {
                sketch: yourSketch,
                backgroundColor: '#F4F4F4'
            }
        }
     
        render() {
            return (
                <div>
                    <!-- Your stuff -->
     
                    <!-- 
                    You can inject some data object into the component 
                    via the "data" props to get it in the sketch script
                    -->
                    <P5 sketch={this.state.sketch} data={{backgroundColor}} />
                </div>
            )
        }
    }
     
    export default YourComponent

    For Vue

    <template>
        <div>
            <!-- Your stuff -->
     
            <!-- 
            You can pass some data object into the component 
            via the "data" props to receive it in the sketch script
            -->
            <P5 :sketch="sketch" :data="{backgroundColor}" />
        </div>
    </template>
     
    <script>
    // import as for fancy name
    import {VueP5Wrapper as P5} from 'p5wrappers'
     
    import yourSketch from './yourDir/yourSketch'
     
    export default {
        name: 'YourComponent',
        components: {
            P5,
        },
        data() {
            return {
                sketch: yourSketch,
                backgroundColor: '#F4F4F4'
            }
        }
    }
    </script> 

    A Sketch could look like this and should be passed as a prop into the component: it uses the instance mode of p5, see : https://github.com/processing/p5.js/wiki/Global-and-instance-mode

    export default function sketch (p5) {
        let canvas = null
     
        p5.setup = function() {
            canvas = p5.createCanvas(0,0)
        }
      
        p5.draw = function() {
            // You can get the data into the data props
            const color = p5.data.color
            p5.background(color)
        }
    }

    Install

    npm i p5wrappers

    DownloadsWeekly Downloads

    6

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    4.31 MB

    Total Files

    8

    Last publish

    Collaborators

    • ledocteur