Never-ending Pumpkin Mulch

    node-p5

    1.0.4 • Public • Published

    node-p5

    What is this?

    A Node.js implementation of the p5.js library. (using node-canvas and jsdom, along with a bunch of other modules)

    FAQ

    Why?

    yes

    Does everything from p5 work?

    most things work, except for stuff like 3D (webgl is not a thing in node), interacting with the canvas (mouse, keyboard, window events) - because, duh, there's no window, and certain things that i didn't feel like implementing because there are a bunch of better alternatives for Node (like httpDo, httpGet, and httpPost can be easily replaced by just using request or axios)

    Is the syntax the same?

    for most things, yes - you can find the docs below for the features that are different from the official p5 browser library

    Installing

    $ npm i --s node-p5

    Getting Started

    All p5 methods must be preceded by the variable you pass to the sketch function.

    const p5 = require('node-p5');
    
    function sketch(p) {
        p.setup = () => {
            p.createCanvas(200, 200);
        }
        p.draw = () => {
            p.background(50);
            p.text('hello world!', 50, 100);
        }
    }
    
    let p5Instance = p5.createSketch(sketch);

    Of course, we can't see this because there is no window, so we should save the canvas as an image.

    const p5 = require('node-p5');
    
    function sketch(p) {
        p.setup = () => {
            let canvas = p.createCanvas(200, 200);
            setTimeout(() => {
                p.saveCanvas(canvas, 'myCanvas', 'png').then(filename => {
                    console.log(`saved the canvas as ${filename}`);
                });
            }, 100);
        }
        p.draw = () => {
            p.background(50);
            p.text('hello world!', 50, 100);
        }
    }
    
    let p5Instance = p5.createSketch(sketch);

    Preloading

    I couldn't get the p5 preload to work. I wrote my own version.

    Basic usage

    You can pass the built-in preload functions

    const p5 = require('node-p5');
    
    let resourcesToPreload = {
        catImage: p5.loadImage('cat.png')
    }
    
    function sketch(p, preloaded) {
        let catImg = preloaded.catImage;
        p.setup = () => {
            let canvas = p.createCanvas(100, 100);
            p.image(catImg, 20, 20, 60, 60);
            
            p.saveCanvas(canvas, 'out', 'png').then(() => {
                console.log('saved canvas as out.png');
            }).catch(console.error)
    
            p.noLoop();
        }
    }
    
    let p5Instance = p5.createSketch(sketch, resourcesToPreload);

    or you can pass in your own functions (both sync and async work!)

    let resourcesToPreload = {
        myVar: () => {
            return 5+2;
        },
        myVar2: () => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('thing');
                }, 500);
            });
        },
        myVar3: new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('thing');
            }, 500);
        })
    }

    Fonts

    !! make sure you load fonts before creating the sketch !!

    "Why can I not use loadFont in preload?" - you might ask

    and the answer to that is: because I couldn't get it to work lmao

    Loading custom fonts can be done using the loadFont method

    p5.loadFont({ path: String, family: String})
    //or
    p5.loadFont(filename: String)

    example:

    const p5 = require('node-p5');
    
    let sugarpunch;
    sugarpunch = p5.loadFont({ path: 'SugarpunchDEMO.otf', family: 'Sugarpunch' });
    //OR
    sugarpunch = p5.loadFont('SugarpunchDEMO.otf');
    
    function sketch(p) {
        p.setup = () => {
            let canvas = p.createCanvas(100, 100);
            p.textFont(sugarpunch); // or p.textFont('Sugarpunch')
            p.text('some text using the font', 20, 20);
            
            p.saveCanvas(canvas, 'out', 'png').then(f => {
                console.log(`saved canvas as ${f}`);
            }).catch(console.error)
    
            p.noLoop();
        }
    }
    
    let p5Instance = p5.createSketch(sketch);

    Built-in preload functions

    note: when passed as preload functions to p5.createSketch you shouldn't use the callback; otherwise, if you're using them inside your sketch you can either use the callback or .then as they return promises.

    note2: when using them in preload they are methods of the p5 object, when using them inside your sketch they are methods of the p (in my case) object.

    loadImage

    loadImage(filename: String[, callback: Function])

    returns: Promise

    loadJSON

    loadJSON(filename: String[, callback: Function]);

    returns: Promise

    loadStrings

    loadStrings(filename: String[, callback: Function]);

    returns: Promise

    Built-in save functions

    saveCanvas

    saveCanvas(canvas: Canvas, filename: String [, extension: String])

    returns: Promise

    saveFrames

    Saves the frames as png or jpg in the output folder with names like frame-001.png, or as a gif with the name of the folder.

    saveFrames(canvas: Canvas, outFolder: String, extension: String, duration: Number, frameRate: Number)

    • extension - png or jpg
    • duration - duration in seconds for how long to capture

    saveFrames(canvas: Canvas, outFolder: String, options: Object, duration: Number, frameRate: Number)

    by replacing the extension with an object we are saving the animation as a gif

    available options:

    • repeat (0 for repeat, -1 for no repeat)
    • quality (0 - 10) - the quality of the gif

    returns: Promise

    saveJSON

    Saves an Object as a JSON file

    saveJSON(object: Object, filename: String[, optimize: Boolean])

    • object - the JavaScript object that you are saving
    • filename - the filename
    • optimize - If true, removes line breaks and spaces from the output file to optimize file size (but not readability). [default: false]

    returns: Promise

    saveStrings

    Saves an array of strings as a file

    saveStrings(list: Array, filename: String[, extension: String, separator: String])

    • list - the JavaScript array that you are saving
    • filename - the filename
    • extension - the file extension [default: txt]
    • separator - what to separate the items of the array with [default: \n (new line)]

    returns: Promise

    Registering your own methods

    p5.registerMethod(name: String, method: Function)

    p5.registerMethod('addNumbers', (x, y) => {
       return x + y; 
    });
    ...
    function sketch(p) {
        p.setup = () => {
            console.log(p.addNumbers(20, 5)); //25
            p.noLoop();
        }
    }

    Don't use arrow notation if you want to use p5 features in your methods. If you use arrow notation the module cannot bind p5 to your method and thus you won't be able to use it.

    p5.registerMethod('methodName', (arg1, arg2) => {
        console.log(this.p5); //undefined
    });
    
    p5.registerMethod('methodName', function(arg1, arg2) {
        console.log(this.p5); //the p5 object (with all the methods)
    });

    The following strings can be passed to registerMethod instead of the method name to affect when that method is automatically called.

    • pre — Called at the beginning of draw(). It can affect drawing.
    • post — Called at the end of draw().
    • init — Called when the sketch is first initialized, just before the sketch initialization function (the one that was passed into the p5constructor) is executed.

    Example:

    p5.registerMethod('init', () => {
        console.log('called when initialization is finished');
    });
    
    p5.registerMethod('pre', () => {
        console.log('every frame, at the start of draw');
    });
    
    p5.registerMethod('post', () => {
        console.log('every frame, at the end of draw');
    });

    Registering your own plugins

    Want to create your own plugins? I've got you covered fam.

    //myp5Plugin.js
    module.exports = {
        mapNumbers: function(arg1, arg2, arg3, arg4, arg5) {
            return this.p5.map(arg1, arg2, arg3, arg4, arg5);
        }
    }
    let p5 = require('node-p5');
    p5.registerPlugin(require('./myp5Plugin'));
    
    function sketch(p) {
        p.setup = () => {
            console.log(p.mapNumbers(5, 1, 10, 1, 100)); //45
            p.noLoop();
        }
    }
    
    let p5Instance = p5.createSketch(sketch);

    Install

    npm i node-p5

    DownloadsWeekly Downloads

    109

    Version

    1.0.4

    License

    GNU LESSER GENERAL PUBLIC LICENSE

    Unpacked Size

    1.1 MB

    Total Files

    4

    Last publish

    Collaborators

    • andithemudkip