🦾 p5.grain.tinker (v0.4.0)

[meezwhite]

This release adds the tinkerPixels function and removes the granulateFuzzify function.

With tinkerPixels you can implement your own custom pixel-manipulation function or use one from the Community Collection to tinker with pixels of you canvas.

How does tinkerPixels work?

Under the hood tinkerPixels loads the pixels using loadPixels(), calculates the total indexes count considering width, height and pixelDensity(), loops over every pixel and applies given callback function to every pixel and finally updates the pixels using updatePixels().

This way, you only have to think about your pixel-manipulation technique (the callback function).

Here's an example of how to implement the granulateSimple function with tinkerPixels:

const amount = 42;
const alpha = false;
tweakPixels((index, total) => {
    // generate a random grainAmount value for the current pixel
    const grainAmount = Math.floor(random() * (amount * 2 + 1)) - amount;
    // manipulate the RGBA channels of the current pixel
    pixels[index] = pixels[index] + grainAmount; // red
    pixels[index+1] = pixels[index+1] + grainAmount; // green
    pixels[index+2] = pixels[index+2] + grainAmount; // blue
    if (alpha) {
        pixels[index+3] = pixels[index+3] + grainAmount; // alpha
    }
});

Note: You wouldn't actually use the above code, it's just for demonstration. Instead you would use the build-in granulateSimple(amount, alpha).

Why remove granulateFuzzify?

granulateFuzzify could be seen as a custom pixel-manipulation function. It was a combination of pixel shifting and averaging formula, and the granulateChannels function. It would produce specific aesthetics and probably most projects wouldn't required it. Thus, there is no need to keep it as part of the library.

You can still implement the fuzzify effect using the new tinkerPixels function. You can find a granulateFuzzify snippet in Community Collection > granulateFuzzify.

What's the Community Collection?

As the name suggests, a collection of custom functions by the community for the community to be used in conjunction with tinkerPixels.

Users can now submit their own custom pixel-manipulation functions for others to use. To submit your custom function, create a new discussion in Discussions > Community Collection.

Custom functions should be OpenSource (preferably MIT Licensed) to enable others to use them without any worries and to give attribution to creators.

What are the next steps for p5.grain?

For the next version, we'd like to add support for applying grain and textures to offscreen graphics.

Additionally, we'd found some interesting ways of improving performance on the pixel-manipulation technique. So, we're looking forward to that.

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

Happy creating! ✨

We hope that this update will simplify how you can tinker around with your pixels and motivate some of you to experiment, create and maybe even submit your custom pixel-manipulation functions!

---

This discussion was created from the release v0.4.0.