p5.js
p5.js copied to clipboard
Enhance reference of blend() and Image.blend() and make it consistent with blendMode()
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?
- [X] Accessibility
- [ ] Color
- [ ] Core/Environment/Rendering
- [ ] Data
- [ ] DOM
- [ ] Events
- [X] Image
- [ ] IO
- [ ] Math
- [ ] Typography
- [ ] Utilities
- [ ] WebGL
- [ ] Build process
- [ ] Unit testing
- [ ] Internationalization
- [ ] Friendly errors
- [X] 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 mentionREMOVE
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.