Enhance reference of blend() and Image.blend() and make it consistent with blendMode()

[membralala]

Increasing access

Comprehensive examples of blend modes will provide a quick overview for people who are not used to work with image blending/layering.

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [X] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Build process
• [ ] Unit testing
• [ ] Internationalization
• [ ] Friendly errors
• [ ] Other (specify if possible)

Feature enhancement details

I noticed a few small things, that might improve the documentation consistency between blend(), Image.blend() and blendMode():

• blendMode() provides a comprehensive overview of all blend modes, while blend() and Image.blend() don't. However it might help people without experience on image blending to see, how other blend modes affect the images as well.
• I noticed, that blend() and Image.blend() do not mention REMOVE as blend mode. However, as far as I tested it, it seems to work and acts as an inverse mask, if an image with alpha channel is provided (see example below). I wonder, if this behaviour is intentional, but if so, it probably should be documented as well.

let photo;
let maskImage;

// Load the images.
function preload() {
 photo = loadImage('/assets/rockies.jpg');
 maskImage = loadImage('/assets/mask2.png');
}

function setup() {
 createCanvas(100, 100);

 // Apply the mask.
 photo.blend(maskImage, 0, 0, 100, 100, 0, 0, 100, 100, REMOVE);

 // Display the image.
 image(photo, 0, 0);

 describe('A white canvas. The right side of the canvas has a faded patch of an image of a mountain landscape.');

• Also, the parameter reference of Image.blend() contains remnants of an outdated documentation including a broken link.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[swastikCommits]

Can I work on this issue?

[ksen0]

Hi @swastikCommits are you still interested in working on this? Adding here documentation steward @perminder-17 - is this still applicable? on 1.x or 2.x or both? Thank you!

[perminder-17]

You are correct @membralala , blend() and image.blend() docs needs to be updated exactly what you said on the issue. Really thanks for catching this and explaining it so well.

I think @ksen0 it's applicable in both our versions, 1.x and 2.x.

If @swastikCommits you are interested I can assign you with the issue?

[swastikCommits]

Yeah, sure I would like to work on this issue!

[perminder-17]

Yeah, sure I would like to work on this issue!

Sure, I have assigned you this. Thank you so much for taking this 🙂