processing / processing/p5.js

Improve mapping of blendMode to globalCompositeOperation

Open
#5,518 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Enhancement
Dominant language
JavaScript
Stars
24k
Forks
3.8k
Avg merge
3d 16h
Merged PRs (30d)
25

Description

Better documentation of blendModes and what they do (and do not) cover would be helpful
  • Specify mappings of canvas globalCompositeOperation types to blendModes, i.e.:
    • source-over -> BLEND
    • destination-out -> REMOVE
    • [etc.]
  • Specify which globalCompositeOperation types are not implemented in P5, i.e.:
    • destination-in
    • source-atop
    • [any others]
Most appropriate sub-area of p5.js?
  • Accessibility (Web Accessibility)
  • Build tools and processes
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Friendly error system
  • Image
  • IO (Input/Output)
  • Localization
  • Math
  • Unit Testing
  • Typography
  • Utilities
  • WebGL
  • Other (specify if possible)
Feature enhancement details:

In P5 (2D) most of the canvas globalCompositeOperation types are implemented, but renamed, and others are not implemented. Because these modes can be confusing, and there is currently better documentation/examples of the globalCompositeOperation than of P5 blendMode, it would be useful to:

While it seems to me like it would be relatively easy to add the remaining unmapped globalCompositeOperation types (for example, destination-in and source-atop do not appear to be mapped into blendMode) and a note for how the names of types map to blendMode modes, I understand that this may be much more complicated to support in WEBGL mode, so I'd be happy if there were at least a note in the documentation for what is missing and why so it's clearer what bits to work around using drawingContext.

So my first preference would be to make all the globalCompositeOperation types work in P5 blendMode, but I would certainly be OK with documenting what they map to and which ones are not mapped.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the p5.js blendMode documentation and examples, then compare the documented modes with the MDN globalCompositeOperation reference. Determine the 2D and WebGL scope, and finish by either documenting each mapping and omission or defining support for the requested aliases and modes.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.