p5.wrapped v1.0.1

P5 Wrapped

This is a wrapper library for P5.js. It simplyfies the creation and usage of P5 Sketches. 1. Creating a Sketch 1. Sketch Class 1. Render at Certain Nodes 1. Life Cycle Hooks 1. Passing Data To Events 1. Other Classes

Creating a Sketch

To create a new sketch just simply instantiate the Sketch class, this will cause the sketch to be autmotically created in the DOM.

The setup, draw and preload methods can be defined directly in this instance and all p5 methods can be accessed thorught the this keyword of the instance.

import Sketch from 'p5.wrapped';

const sketch = new Sketch();

sketch.setup = function() {
    this.createCanvas(640, 480);

    this.background(200);

    this.trigger("setup");
};

sketch.draw = function() {
    if (this.mouseIsPressed) {
        this.circle(this.mouseX, this.mouseY, 80);
    }
}

Sketch Class

It is also possible to define your sketch as class and create different instances of this sketch.

Just be carefull because everytime a new instance is created the sketch canvas is added to the DOM, so you can end up with multiple sktches running simultaneously.

import Sketch from 'p5.wrapped';

class Basic extends Sketch {
    setup() {
        this.createCanvas(640, 480);

        this.background(200);

        this.trigger("setup");
    }
    
    draw() {
        if (this.mouseIsPressed) {
            this.circle(this.mouseX, this.mouseY, 80);
        }
    }
}

const sketch = new Basic();

Render at Certain Nodes

If you want to render the sketch's canvas at a specific DOM node just pass the desired you node when instantiating the sketch.

import Sketch from 'p5.wrapped';

class Basic extends Sketch {
    setup() {
        this.createCanvas(640, 480);

        this.background(200);

        this.trigger("setup");
    }
    
    draw() {
        if (this.mouseIsPressed) {
            this.circle(this.mouseX, this.mouseY, 80);
        }
    }
}

const sketch = new Basic(document.querySelector("#root"));

Life Cycle Hooks

This library also allows you to create life cycle hooks on your sketch. This can be achieved by listening to and triggering events.

import Sketch from 'p5.wrapped';

class Basic extends Sketch {
    setup() {
        this.createCanvas(640, 480);

        this.background(200);

        this.trigger("setup");
    }
    
    draw() {
        if (this.mouseIsPressed) {
            this.circle(this.mouseX, this.mouseY, 80);
        }
        
        this.trigger("draw");
    }
}

const sketch = new Basic();

sketch.on("setup", () => {
    console.log("Setup complete.");
});

sketch.on("draw", () => {
    console.log("Drawing Complete.");
});

Triggering a event without a defined listener won't cause errors, but it should be avoided so the code don't get bloated.

Passing Data To Events

Events can also be used to get data from or pass data to a sketch.

import Sketch from 'p5.wrapped';

class Basic extends Sketch {
    setup() {
        this.createCanvas(640, 480);

        this.background(200);
    }
    
    draw() {
        if (this.mouseIsPressed) {
            // Passing data to the event.
            this.circle(this.mouseX, this.mouseY, this.trigger("click", "Mouse Click"));
        } else {
            this.circle(this.mouseX, this.mouseY, 80);
        }
    }
}

const sketch = new Basic();

sketch.on("click", msg => {
    console.log(msg);

    return 50; // To pass data to the sketch.
});

Other Classes

Other classes from P5 can also be imported or accessed through this library.

// Import everything.
import * as p5 from 'p5.wrapped';

// Import a specific class.
import Sketch, { Vector } from 'p5.js';