Skip to content

Rename HDR to P3 #8975

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

Open
limzykenneth wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Rename HDR to P3 #8975

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d04a684
Rename HDR to P3
limzykenneth Jul 9, 2026
39c8742
Update parameterData.json
limzykenneth Jul 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
988 changes: 505 additions & 483 deletions docs/parameterData.json
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions src/color/creating_reading.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ import { Color } from './p5.Color';
*/
export const RGB = 'rgb';
/**
* @typedef {'rgbhdr'} RGBHDR
* @property {RGBHDR} RGBHDR
* @typedef {'rgbp3'} RGBP3
* @property {RGBP3} RGBP3
* @final
*/
export const RGBHDR = 'rgbhdr';
export const RGBP3 = 'rgbp3';
/**
* HSB (hue, saturation, brightness) is a type of color model.
* You can learn more about it at
Expand Down Expand Up @@ -73,7 +73,7 @@ export const RGBA = 'rgba';

function creatingReading(p5, fn){
fn.RGB = RGB;
fn.RGBHDR = RGBHDR;
fn.RGBP3 = RGBP3;
fn.HSB = HSB;
fn.HSL = HSL;
fn.HWB = HWB;
Expand All @@ -90,7 +90,7 @@ function creatingReading(p5, fn){
p5.Renderer.states.colorMode = RGB;
p5.Renderer.states.colorMaxes = {
[RGB]: [255, 255, 255, 255],
[RGBHDR]: [255, 255, 255, 255],
[RGBP3]: [255, 255, 255, 255],
[HSB]: [360, 100, 100, 1],
[HSL]: [360, 100, 100, 1],
[HWB]: [360, 100, 100, 1],
Expand Down
24 changes: 12 additions & 12 deletions src/color/p5.Color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* @for p5
*/

import { RGB, RGBHDR, HSL, HSB, HWB, LAB, LCH, OKLAB, OKLCH } from './creating_reading';
import { RGB, RGBP3, HSL, HSB, HWB, LAB, LCH, OKLAB, OKLCH } from './creating_reading';


import {
Expand Down Expand Up @@ -557,7 +557,7 @@ class Color {
const colorjsMax = Color.#colorjsMaxes[RGB][0];
const newval = map(new_red, max[0], max[1], colorjsMax[0], colorjsMax[1]);

if(this.mode === RGB || this.mode === RGBHDR){
if(this.mode === RGB || this.mode === RGBP3){
this._color.coords[0] = newval;
}else{
// Will do an imprecise conversion to 'srgb', not recommended
Expand Down Expand Up @@ -609,7 +609,7 @@ class Color {
const colorjsMax = Color.#colorjsMaxes[RGB][1];
const newval = map(new_green, max[0], max[1], colorjsMax[0], colorjsMax[1]);

if(this.mode === RGB || this.mode === RGBHDR){
if(this.mode === RGB || this.mode === RGBP3){
this._color.coords[1] = newval;
}else{
// Will do an imprecise conversion to 'srgb', not recommended
Expand Down Expand Up @@ -661,7 +661,7 @@ class Color {
const colorjsMax = Color.#colorjsMaxes[RGB][2];
const newval = map(new_blue, max[0], max[1], colorjsMax[0], colorjsMax[1]);

if(this.mode === RGB || this.mode === RGBHDR){
if(this.mode === RGB || this.mode === RGBP3){
this._color.coords[2] = newval;
}else{
// Will do an imprecise conversion to 'srgb', not recommended
Expand Down Expand Up @@ -753,7 +753,7 @@ class Color {
max = [0, max];
}

if(this.mode === RGB || this.mode === RGBHDR){
if(this.mode === RGB || this.mode === RGBP3){
const colorjsMax = Color.#colorjsMaxes[this.mode][0];
return map(
this._color.coords[0],
Expand All @@ -777,7 +777,7 @@ class Color {
max = [0, max];
}

if(this.mode === RGB || this.mode === RGBHDR){
if(this.mode === RGB || this.mode === RGBP3){
const colorjsMax = Color.#colorjsMaxes[this.mode][1];
return map(
this._color.coords[1],
Expand All @@ -796,7 +796,7 @@ class Color {
max = [0, max];
}

if(this.mode === RGB || this.mode === RGBHDR){
if(this.mode === RGB || this.mode === RGBP3){
const colorjsMax = Color.#colorjsMaxes[this.mode][2];
return map(
this._color.coords[2],
Expand Down Expand Up @@ -1022,7 +1022,7 @@ function color(p5, fn, lifecycles){

// Register color modes and initialize Color maxes to what p5 has set for itself
p5.Color.addColorMode(RGB, sRGB);
p5.Color.addColorMode(RGBHDR, P3);
p5.Color.addColorMode(RGBP3, P3);
p5.Color.addColorMode(HSB, HSBSpace);
p5.Color.addColorMode(HSL, HSLSpace);
p5.Color.addColorMode(HWB, HWBSpace);
Expand Down Expand Up @@ -1068,19 +1068,19 @@ function color(p5, fn, lifecycles){

decorateGet('Red', {
[RGB]: 0,
[RGBHDR]: 0
[RGBP3]: 0
});
decorateGet('Green', {
[RGB]: 1,
[RGBHDR]: 1
[RGBP3]: 1
});
decorateGet('Blue', {
[RGB]: 2,
[RGBHDR]: 2
[RGBP3]: 2
});
decorateGet('Alpha', {
[RGB]: 3,
[RGBHDR]: 3,
[RGBP3]: 3,
[HSB]: 3,
[HSL]: 3,
[HWB]: 3,
Expand Down
18 changes: 9 additions & 9 deletions src/color/setting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

import * as constants from '../core/constants';
import { RGB, RGBHDR, HSL, HSB, HWB, LAB, LCH, OKLAB, OKLCH } from './creating_reading';
import { RGB, RGBP3, HSL, HSB, HWB, LAB, LCH, OKLAB, OKLCH } from './creating_reading';

function setting(p5, fn){
/**
Expand Down Expand Up @@ -670,9 +670,9 @@ function setting(p5, fn){
*
* Some additional color modes that p5.js supports are:
*
* `RGBHDR` - High Dynamic Range RGB defined within the Display P3 color space.
* `RGBP3` - High Dynamic Range RGB defined within the Display P3 color space.
* Colors are expressed with an extended dynamic range. To render these colors
* accurately, you must use the HDR canvas.
* accurately, you must use the P3 canvas.
*
* `HWB` - Hue, Whiteness, Blackness.
* Similar to HSB and HSL, this mode uses a hue angle.
Expand Down Expand Up @@ -720,10 +720,10 @@ function setting(p5, fn){
* ranges are currently not handled, so results in those cases may be ambiguous.
*
* @method colorMode
* @param {RGB|HSB|HSL|RGBHDR|HWB|LAB|LCH|OKLAB|OKLCH} mode either RGB, HSB, HSL,
* @param {RGB|HSB|HSL|RGBP3|HWB|LAB|LCH|OKLAB|OKLCH} mode either RGB, HSB, HSL,
* or one of the extended modes described above.
* @param {Number} [max] range for all values.
* @return {RGB|HSB|HSL|RGBHDR|HWB|LAB|LCH|OKLAB|OKLCH} The current color mode.
* @return {RGB|HSB|HSL|RGBP3|HWB|LAB|LCH|OKLAB|OKLCH} The current color mode.
*
* @example
* function setup() {
Expand Down Expand Up @@ -1016,7 +1016,7 @@ function setting(p5, fn){
*/
/**
* @method colorMode
* @param {RGB|HSB|HSL|RGBHDR|HWB|LAB|LCH|OKLAB|OKLCH} mode
* @param {RGB|HSB|HSL|RGBP3|HWB|LAB|LCH|OKLAB|OKLCH} mode
* @param {Number} max1 range for the red or hue depending on the
* current color mode.
* @param {Number} max2 range for the green or saturation depending
Expand All @@ -1025,18 +1025,18 @@ function setting(p5, fn){
* depending on the current color mode.
* @param {Number} [maxA] range for the alpha.
*
* @return {RGB|HSB|HSL|RGBHDR|HWB|LAB|LCH|OKLAB|OKLCH} The current color mode.
* @return {RGB|HSB|HSL|RGBP3|HWB|LAB|LCH|OKLAB|OKLCH} The current color mode.
*/
/**
* @method colorMode
* @return {RGB|HSB|HSL|RGBHDR|HWB|LAB|LCH|OKLAB|OKLCH} The current color mode.
* @return {RGB|HSB|HSL|RGBP3|HWB|LAB|LCH|OKLAB|OKLCH} The current color mode.
*/
fn.colorMode = function(mode, max1, max2, max3, maxA) {
// p5._validateParameters('colorMode', arguments);
if (
[
RGB,
RGBHDR,
RGBP3,
HSB,
HSL,
HWB,
Expand Down
10 changes: 5 additions & 5 deletions src/core/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,18 +27,18 @@ export const VERSION = 'VERSION_WILL_BE_REPLACED_BY_BUILD';
export const P2D = 'p2d';

/**
* A high-dynamic-range (HDR) variant of the default, two-dimensional renderer.
* An expanded color space (P3) variant of the default, two-dimensional renderer.
*
* When available, this mode can allow for extended color ranges and more
* dynamic color representation. Use it similarly to `P2D`:
* `createCanvas(400, 400, P2DHDR)`.
* `createCanvas(400, 400, P2DP3)`.
*
* @typedef {'p2d-hdr'} P2DHDR
* @property {P2DHDR} P2DHDR
* @typedef {'p2d-p3'} P2DP3
* @property {P2DP3} P2DP3
* @final
*/

export const P2DHDR = 'p2d-hdr';
export const P2DP3 = 'p2d-p3';

/**
* One of the two render modes in p5.js, used for computationally intensive tasks like 3D rendering and shaders.
Expand Down
4 changes: 2 additions & 2 deletions src/core/environment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ function environment(p5, fn, lifecycles){
* cursor, `x` and `y` set the location pointed to within the image. They are
* both 0 by default, so the cursor points to the image's top-left corner. `x`
* and `y` must be less than the image's width and height, respectively.
*
*
* Calling `cursor()` without an argument returns the current cursor type as a string.
*
* @method cursor
Expand Down Expand Up @@ -494,7 +494,7 @@ function environment(p5, fn, lifecycles){
* - `WEBGL2` whose value is `'webgl2'`,
* - `WEBGL` whose value is `'webgl'`, or
* - `P2D` whose value is `'p2d'`. This is the default for 2D sketches.
* - `P2DHDR` whose value is `'p2d-hdr'` (used for HDR 2D sketches, if available).
* - `P2DP3` whose value is `'p2d-p3'` (used for P3 2D sketches, if available).
*
* See <a href="#/p5/setAttributes">setAttributes()</a> for ways to set the
* WebGL version.
Expand Down
2 changes: 1 addition & 1 deletion src/core/p5.Graphics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -595,7 +595,7 @@ function graphics(p5, fn){
* @extends p5.Element
* @param {Number} w width width of the graphics buffer in pixels.
* @param {Number} h height height of the graphics buffer in pixels.
* @param {(P2D|WEBGL|P2DHDR)} renderer the renderer to use, either P2D or WEBGL.
* @param {(P2D|WEBGL|P2DP3)} renderer the renderer to use, either P2D or WEBGL.
* @param {p5} [pInst] sketch instance.
* @param {HTMLCanvasElement} [canvas] existing `<canvas>` element to use.
*
Expand Down
6 changes: 3 additions & 3 deletions src/core/p5.Renderer2D.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Graphics } from './p5.Graphics';
import { Image } from '../image/p5.Image';
import { Element } from '../dom/p5.Element';
import { MediaElement } from '../dom/p5.MediaElement';
import { RGBHDR } from '../color/creating_reading';
import { RGBP3 } from '../color/creating_reading';
import FilterRenderer2D from '../image/filterRenderer2D';
import { Matrix } from '../math/p5.Matrix';
import { PrimitiveToPath2DConverter } from '../shape/custom_shapes';
Expand Down Expand Up @@ -67,7 +67,7 @@ class Renderer2D extends Renderer {
// Get and store drawing context
this.drawingContext = this.canvas.getContext('2d', attributes);
if(attributes.colorSpace === 'display-p3'){
this.states.colorMode = RGBHDR;
this.states.colorMode = RGBP3;
}
this.scale(this._pixelDensity, this._pixelDensity);

Expand Down Expand Up @@ -1038,7 +1038,7 @@ function renderer2D(p5, fn){
*/
p5.Renderer2D = Renderer2D;
p5.renderers[constants.P2D] = Renderer2D;
p5.renderers['p2d-hdr'] = new Proxy(Renderer2D, {
p5.renderers['p2d-p3'] = new Proxy(Renderer2D, {
construct(target, [pInst, w, h, isMainCanvas, elt]){
return new target(pInst, w, h, isMainCanvas, elt, { colorSpace: 'display-p3' });
}
Expand Down
2 changes: 1 addition & 1 deletion src/core/rendering.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ function rendering(p5, fn){
* @method createCanvas
* @param {Number} [width] width of the canvas. Defaults to 100.
* @param {Number} [height] height of the canvas. Defaults to 100.
* @param {(P2D|WEBGL|P2DHDR)} [renderer] either P2D or WEBGL. Defaults to `P2D`.
* @param {(P2D|WEBGL|P2DP3)} [renderer] either P2D or WEBGL. Defaults to `P2D`.
* @param {HTMLCanvasElement} [canvas] existing canvas element that should be used for the sketch.
* @return {p5.Renderer} new `p5.Renderer` that holds the canvas.
*
Expand Down
Loading