processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.7k stars 3.33k forks source link

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

Open membralala opened 2 months ago

membralala commented 2 months ago

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?

Feature enhancement details

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

// 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.');


<img width="99" alt="Bildschirmfoto 2024-09-05 um 17 49 02" src="https://github.com/user-attachments/assets/1624ad6f-962d-4d0d-91f9-2b081d707c44">

- Also, the parameter reference of `Image.blend()` contains remnants of an outdated documentation including a broken link.
welcome[bot] commented 2 months ago

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!