Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reference examples for blendMode() need distinct colors to highlight differences #7228

Closed
3 of 17 tasks
aleannab opened this issue Sep 5, 2024 · 6 comments · Fixed by #7280
Closed
3 of 17 tasks

Reference examples for blendMode() need distinct colors to highlight differences #7228

aleannab opened this issue Sep 5, 2024 · 6 comments · Fixed by #7280
Assignees
@samarsrivastav
Labels
Area:Accessibility Area:Color Bug

Comments

@aleannab
Copy link
Contributor

aleannab commented Sep 5, 2024 •
edited
Loading

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)

p5.js version

v1.10.0 (latest)

Web browser and version

Firefox v130.0, though would affect all.

Operating system

Windows, though would affect all.

Steps to reproduce this

Steps:

  1. Go to https://p5js.org/reference/p5/blendMode/
  2. View example images for each of the blend modes.
  3. Many of the blend modes result in identical hex codes.

blendMode-current-colors
See p5.js sketch

Background color: #c8c8c8

Blend Mode Colors
BLEND & HARD_LIGHT #0000ff and #ff0000
BURN, MULTIPLY & DARKEST #0000c8 and #c80000
LIGHTEST, SCREEN, ADD & DODGE #c8c8ff and #ffc8c8
DIFFERENCE & EXCLUSION #c8c837 and #37c8c8
SOFT_LIGHT #9d9de2 and #e29d9d
OVERLAY #9191ff and #ff9191

.

Solution:

Update the colors for the blendModes() examples.

In the image below, I used #1a85ff and #d41159. I chose these colors from the suggested accessible palettes in the article 'Coloring for Colorblindness' by David Nichols. I also made the background color slightly darker, so the lighter results stand out more.

There are still a couple modes that look similar, but it is an improvement on its current state.

blendMode-suggested-colors
See p5.js sketch

Background color: #b4b4b4

Blend Mode Colors
BLEND #1a85ff and #d41159
HARD_LIGHT #25b7ff and #e6187e
BURN #006fb4 and #a50028
MULTIPLY #125eb4 and #96187e
DARKEST #1a85b4 and #b41159
SOFT_LIGHT #8ab6d6 and #cb86a4
LIGHTEST #b4b4ff and #d4b4b4
SCREEN #bcdbff and #f2b9ce
ADD #ceffff and #ffc5ff
DODGE #c8ffff and #ffc1ff
OVERLAY #78b7ff and #e6739d
DIFFERENCE #9a2f4b and #20a35b
EXCLUSION #a97d4b and #a97d4b

I'd be happy to work on this once colors are approved.
@aleannab aleannab added the Bug label Sep 5, 2024
@samarsrivastav
Copy link
Contributor

samarsrivastav commented Sep 22, 2024 •
edited
Loading

Hey @aleannab !! i would like to take on this issue

@samarsrivastav samarsrivastav mentioned this issue Sep 22, 2024
Merged
3 tasks
@aleannab
Copy link
Contributor Author

Hi @samarsrivastav! I noticed you made a PR for this. I had been holding off on working on the issue while waiting for approval from a steward or maintainer, as suggested in the Contributor Guidelines. However, since this issue has been open for a while without feedback, I totally understand your initiative. I'm a new contributor here as well, so I'm not sure how rigid the process is. Just wondering - @Qianqianye how are things typically handled? I'm happy to help out in any way I can.

@aleannab aleannab closed this as not planned Won't fix, can't repro, duplicate, stale Sep 22, 2024
@aleannab
Copy link
Contributor Author

Oops didn't mean to close this issue.

@SableRaf SableRaf reopened this Sep 22, 2024
@SableRaf
Copy link
Contributor

Oops didn't mean to close this issue.

Reopened it for you @aleannab 👍

@davepagurek
Copy link
Contributor

I think these color changes in the examples would be beneficial if you want to work on this @samarsrivastav!

@samarsrivastav
Copy link
Contributor

Hi @davepagurek, I’ve made a PR with examples that match the ones provided in the issue by @aleannab. Could you please review it and let me know if any adjustments are needed? I’m new to the organization and would appreciate any feedback or guidance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@samarsrivastav samarsrivastav

Labels
Area:Accessibility Area:Color Bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Change Reference Example samarsrivastav/p5.js
4 participants
@SableRaf @aleannab @davepagurek @samarsrivastav