processing
[p5.js 2.0 Bug Report]: createColorPicker ignores initial colour arg on chrome, mac.
Most appropriate sub-area of p5.js?
- [ ] Accessibility
- [x] Color
- [ ] Core/Environment/Rendering
- [ ] Data
- [x] DOM
- [ ] Events
- [ ] Image
- [ ] IO
- [ ] Math
- [ ] Typography
- [ ] Utilities
- [ ] WebGL
- [ ] Build process
- [ ] Unit testing
- [ ] Internationalization
- [ ] Friendly errors
- [ ] Other (specify if possible)
p5.js version
2.1.1
Web browser and version
142.0.7444.176 (Official Build) (arm64)
Operating system
macOS 14.6.1
Steps to reproduce this
Steps:
A: with above platform run this sketch https://openprocessing.org/sketch/2797749 or same on p5 web editor.
OR
B: run the following snippet.
Observed: three colour pickers created, all defaulting to black instead of expected blue, magenta, yellow.
Snippet:
function setup() {
createCanvas(200, 200);
background(200)
createColorPicker(color(50, 0, 240))
createColorPicker("magenta")
createColorPicker("#F0FF00")
}
results on various browsers:
Browsers yielding black:
-
Chrome 142.0.7444.176 on macOS 14.6.1
-
Safari 17.6 (very old!) on macOS 14.6.1
-
Discord user Jiskra originally reported the issue on windows chrome and edge (with p5v2.0.5, and a similar snippet)
Browsers correctly yielding colours:
- Firefox (145.0.1 (aarch64) on macOS 14.6.1
Affected p5 versions
- The problem occurs in at least these versions of p5: v2.0.0, v2.0.5, v2.1.1
- Changing p5 version back to v1.11.11 I get the expected colours on all browsers tested.
on underlying causes
(disclaimer: I've no experience with this code)
I think one underlying issue is that p5.Color.toString("#rrggbb") doesn't behave quite as expected in p5 v2.x.
Both paths through the createColorPicker function use someColor.toString("#rrggbb") e.g.:
elt.value = this.color(value).toString("#rrggbb");
For example (as can be seen here),
color("skyblue").toString('#rrggbb') yields rgb(52.941% 80.784% 92.157%)
It seems my chrome and safari silently don't interpret this output as a colour when assigned to elt.value, whereas my firefox is happy with it.
In p5.js v1.11.11 it yields #87ceeb, which all our browsers seem understandably happy with.
Sketches and p5 examples demonstrating this
Demo sketch https://openprocessing.org/sketch/2797773
The color.toString() example in the beta docs shows the same problem. It doesn't output a hex string but one in rgb(percent percent percent) form. Incidentally I see 5 identical examples on that page.
debugging color.toString("#rrggbb")
I traced through a call to color.toString("#rrggbb") in the debugger (specifically this sketch on p5 v2.1.1).
I wouldn't pretend to understand much of it, but at runtime for me serialize(color) doesn't find a format in its table for format "#rrggbb" in color.space.getFormat(format) so it uses the default format (named rgb) which outputs in format rgb(52.941% 80.784% 92.157%), and not hex format per the parameter.
Hi @limzykenneth - tagging you on this createColorPicker issue as requested.
I'd be happy to contribute regression tests for color.toString("#rrggbb") and fix up the examples for same, if that turns out to be relevant and useful.