[p5.js 2.0 Bug Report]: Saturation range is 100 even when calling colorMode(HSB, 360)

[epibyte]

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

starting v2 till current version 2.0.3

Web browser and version

any Browser, eg iPad Safari, PC: Firefox 141.0 (64-Bit), Google Chrome Version 138.0.7204.169 (Offizieller Build) (64-Bit), Microsoft Edge Version 138.0.3351.109 (Offizielles Build) (64-Bit)

Operating system

Windows 11

Steps to reproduce this

Steps:

1. having color value, eg via color("")
2. setting colorMode(HSB, something)
3. getting hue(), saturastion(), brightness()

Snippet/URL:

https://openprocessing.org/sketch/2696275

let w, h;

function setup() {
	createCanvas(200, 200);
	background(32);
	noStroke();
	
  w = width/clrs.length;
	h = height/3;
	
	let y = 0, maxVal = 255;
	for (let i = 0; i < clrs.length; i++) {
		const clr = color(clrs[i]);
		fill(clr);
		rect(i*w, y, w, h);
	}
	
	y += h, maxVal = 360, setVal = maxVal * 0.8;
	drawClrLine(y, maxVal, setVal)
	
	y += h, maxVal = 100, setVal = maxVal * 0.8;
	drawClrLine(y, maxVal, setVal)
}

function drawClrLine(y, maxVal, setVal) {
	colorMode(HSB, maxVal);
	console.log(`colorMode(HSB, ${maxVal})`);
	for (let i = 0; i < clrs.length; i++) {
		const clrFromHex = color(clrs[i]);
		const clrHue = ~~hue(clrFromHex);
		const clrSat = ~~saturation(clrFromHex);
		const clrBrg = ~~brightness(clrFromHex);
		console.log(`${i}: ${clrs[i]} hue:${clrHue} ${clrSat} ${clrBrg}`)
		const clr = color(clrHue, setVal, setVal);
		clr.setAlpha(setVal); // comment out optional
		fill(clr);
		rect(i*w, y, w, h);
	}
}

output p5js v2.0.3

colorMode(HSB, 360)
0: #7700a6 hue:283 100 234
1: #fe00fe hue:300 100 358
2: #defe47 hue:70 98 358
3: #00b3fe hue:197 100 358
4: #0016ee hue:234 100 335

colorMode(HSB, 100)
0: #7700a6 hue:283 100 65
1: #fe00fe hue:300 100 99
2: #defe47 hue:70 98 99
3: #00b3fe hue:197 100 99
4: #0016ee hue:234 100 93

output p5js v1.11.9

colorMode(HSB, 360)
0: #7700a6 hue:283 360 234
1: #fe00fe hue:300 360 358
2: #defe47 hue:70 259 358
3: #00b3fe hue:197 360 358
4: #0016ee hue:234 360 336

colorMode(HSB, 100)
0: #7700a6 hue:78 100 65
1: #fe00fe hue:83 100 99
2: #defe47 hue:19 72 99
3: #00b3fe hue:54 100 99
4: #0016ee hue:65 100 93

[davepagurek]

Hi @epibyte! I edited the title of the issue based on my understanding of your report (namely, that in 2.0 the range of the S channel of HSB is in a 0-100 range instead of 0-360 like it was in 1.11.9 after calling colorMode(HSB, 460).) Is that correct?

[epibyte]

Hi @davepagurek thanks for taking over :)
Beside the S-channel which is always 0-100, the H-channel is also always 0-360.
The B-channel seems to be correct / same as in v1.x