-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Open
Open
Enhance reference of blend() and Image.blend() and make it consistent with blendMode()#7236
Description
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
- 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, whileblend()andImage.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()andImage.blend()do not mentionREMOVEas 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.