🌚 p5.grain.graphics (v0.5.0)

[meezwhite]

This version adds support for offscreen graphics buffers for the functions granulateSimple, granulateChannels, tinkerPixels and textureOverlay.

Until this version only textureOverlay supported offscreen graphics buffers via the deprecated property config.context. This property was removed in favor of the new syntax (read below).

How to use p5.grain functions on an offscreen graphics buffer?

The syntax is just the way you would expect it:

function setup() {
    createCanvas(windowWidth, windowHeight);

    // create offscreen graphics buffer
    const pg = createGraphics(width, height);

    p5grain.setup();

    // draw something to the offscreen graphics buffer
    pg.background(255);
    pg.noStroke();
    pg.fill(100, 100, 240);
    pg.circle(width/2, height/2, min(width, height)/2);

    // granulate
    pg.granulateSimple(42);

    // tinker with pixels
    pg.tinkerPixels((index) => {
        pg.pixels[index] = round(random()*255); // randomize red channel
    });
}

What changed with textureOverlay?

Old syntax:

textureOverlay(textureImage, {
    context: pg, // <-- deprecated
});

New syntax:

pg.textureOverlay(textureImage);

What are the next steps for p5.grain?

You can check out the rough Roadmap here and you're welcome to collaborate on p5.grain. 🫶

Have fun creating! ✨

We hope this update will open up possibilities for how you use the library with offscreen graphics buffers!

---

This discussion was created from the release v0.5.0.