2e:null 2f:["$","title",null,{"children":"Chromaticity Diagram | Roeland Schoukens | Observable"}] 34:T68c,As with the rainbow, we are severely limited by the lack of saturated greens and cyans in sRGB (and to somewhat lesser degree in display-P3). But here there is an extra dimension: how do we normalize the color brightness? With a rainbow this is relatively straightforward. We can pick a known spectrum like D65, Sun light, or E, which directly gives a certain brightness level for each wavelength. But a point on a chromaticity diagram has no such constraint, so after converting the uv coordinate to XYZ and then RGB, we have to come up with some arbitrary scale factor. If you add a grey background an arbitrary scaling effectively means an arbitrary saturation. Luminance seems like an obvious choice, but it doesn't work at all: blues and purples have very low luminance and are thus amplified a lot. There are, however, two natural choices. One is to use the brightest possible reflected color for any given uv coordinate. This yields the so-called _MacAdam limit surface_. Another one is to use the brightest possible color you can obtain by using a given total power. The way out-of-gamut colors are mapped also has a big effect on how the final result looks. Clipping can change the hue of the color a lot (eg. it will make greens more yellowish), and even desaturating modifies the apparent hue (especially in blues). The _perceptual_ options are based on _oklab_ -- see [`hello-modern-colour-spaces`](https://observablehq.com/@jwolondon/hello-modern-colour-spaces) for an introduction. If *Clip before background* is enabled, we clip the RGB color first, and then add the background. This helps you get an idea how much extra color exists outside the RGB gamut.35:T556,populateDisplay = { // div with fixed aspect ratio var div = html`

`; // we are unable to reliably display an image with a given color space in an SVG element. // populating the image would also be quite slow. (it requires encoding the image to a // blob or a data URL) // So we will show a canvas with the SVG on top of it, and the SVG file has a transparent // hole inside the gamut. const {xscale, yscale} = luv_chromaticity_chart; uv_canvas1.canvas.style.position = "absolute"; uv_canvas1.canvas.style.left = xscale(raster_extent.x) / svg_width * 100 + "%"; uv_canvas1.canvas.style.top = yscale(raster_extent.y + raster_extent.h) / svg_width * 100 + "%"; uv_canvas1.canvas.style.width = (xscale(raster_extent.x + raster_extent.w) - xscale(raster_extent.x)) / svg_width * 100 + "%"; uv_canvas1.canvas.style.height = (yscale(raster_extent.y) - yscale(raster_extent.y + raster_extent.h)) / svg_width * 100 + "%"; var f = settings1.bg_fill; var bg_color = colorToCss(sRGB([f, f, f])); div.style.background = bg_color; div.appendChild(uv_canvas1.canvas); var svg = luv_chromaticity_chart.node; svg.style.position = 'absolute'; svg.style.width = "100%"; svg.style.height = "100%"; div.appendChild(svg); display.replaceChildren(div); }36:T17fd,function make_luv_chromaticity_chart(chart_size, settings) { // scale const graph_size = chart_size - 1; // scale is approximately 2/3, but even with SVG it will look terrible if you ignore physical pixels: // grid lines are at 0.1 intervals, make sure this interval is an integer number of pixels. const appx_graph_range = 2/3; const grid_spacing = 0.1; const grid_px = Math.round(graph_size / appx_graph_range * grid_spacing); const px_dx = grid_spacing / grid_px; const graph_range = px_dx * graph_size; const appx_graph_offset = 0.03; const offset = Math.round(appx_graph_offset / px_dx) * px_dx; const xscale = d3.scaleLinear() .domain([-offset, graph_range - offset]) .range([0, graph_size]); const yscale = d3.scaleLinear() .domain([graph_range - offset, -offset]) .range([0, graph_size]); const white_text = settings.bg_fill < 0.15; var f = settings.bg_fill; var bg_color = colorToCss(sRGB([f, f, f])); // create SVG const svg = d3.create("svg") .attr("viewBox", [0, 0, chart_size, chart_size]); var chart = { node: svg.node(), xscale: xscale, yscale: yscale, white_text: white_text }; chart.defs = svg.append("defs"); if (settings.image_url) { // we got an image, use it as fill pattern for the gamut outline var pat = chart.defs.append('pattern') .attr('id', 'uv_gamut_fill') .attr('patternUnits', 'userSpaceOnUse') .attr("x", 0) .attr("y", 0) .attr("width", graph_size) .attr("height", graph_size); var pat_img = pat.append("image") .attr("x", xscale(raster_extent.x)) .attr("y", yscale(raster_extent.y + raster_extent.h)) .attr("width", xscale(raster_extent.x + raster_extent.w) - xscale(raster_extent.x)) .attr("height", yscale(raster_extent.y) - yscale(raster_extent.y + raster_extent.h)) .attr("href", settings.image_url); } // svg path for our gamut ("d" attribute) var line_gamut = d3.line() .x(d => xscale(d.u)) .y(d => yscale(d.v)) .curve(d3.curveLinearClosed); const uv_d = line_gamut(uv_data); // gamut background color with hole svg.append("path") .attr('fill', bg_color) .attr('stroke-width', '0') .attr("d", `M0,0 L0,${chart_size} L${chart_size},${chart_size} L${chart_size},0 Z` + (settings.image_url ? "" : ' ' + uv_d)); var g = svg.append("g"); // gamut outline + fill chart.contour = g.append("path") .attr('stroke', 'black') .attr('strokewidth', '2') .attr('fill', settings.image_url ? 'url(#uv_gamut_fill)' : 'transparent') .attr("d", uv_d); // sRGB gamut var line = d3.line() .x(d => xscale(d[0])) .y(d => yscale(d[1])) .curve(d3.curveLinearClosed); const rgbM = RgbColorM.rgbToXyz; var rgb_uv = [ XYZ_to_Luv_uv(apply_m(rgbM, [1, 0, 0])), XYZ_to_Luv_uv(apply_m(rgbM, [0, 1, 0])), XYZ_to_Luv_uv(apply_m(rgbM, [0, 0, 1]))]; var rgb_uv_dots = [ XYZ_to_Luv_uv(apply_m(rgbM, [1, 0, 0])), XYZ_to_Luv_uv(apply_m(rgbM, [1, 1, 0])), XYZ_to_Luv_uv(apply_m(rgbM, [0, 1, 0])), XYZ_to_Luv_uv(apply_m(rgbM, [0, 1, 1])), XYZ_to_Luv_uv(apply_m(rgbM, [0, 0, 1])), XYZ_to_Luv_uv(apply_m(rgbM, [1, 0, 1])), XYZ_to_Luv_uv(apply_m(rgbM, [1, 1, 1]))]; var g_gamut = g.append("g"); // gamut triangle g_gamut.append("path") .attr('fill', 'transparent') .attr('stroke', 'white') .attr('strokewidth', 1) .attr('stroke-opacity', .5) .attr("d", line(rgb_uv)); // group to update marks chart.g_mark = g_gamut.append("g"); // gamut corner dots and white point g_gamut.append("g") .selectAll("circle") .data(rgb_uv_dots) .join("circle") .attr('fill', 'transparent') .attr('stroke', 'white') .attr('strokewidth', 1) .attr('stroke-opacity', .5) .attr("r", 2.5) .attr("cx", d => xscale(d[0])) .attr("cy", d => yscale(d[1])); // dots at certain wavelengths g.append("g") .selectAll("circle") .data(uv_points) .join("circle") .attr("fill", "black") .attr("stroke", "white") .attr("stroke-width", 1.5) .attr("stroke-opacity", .5) .attr("r", 2.5) .attr("cx", d => xscale(d.u)) .attr("cy", d => yscale(d.v)); // text labels chart.text_g = g.append("g") .attr("style", white_text ? "fill: #aaa" : "text-shadow: rgba(255, 255, 255, .3) 1px 1px 1px; fill: black;") .attr("font-size", 12) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .selectAll("text") .data(uv_points.filter(d => !d.notext)) .join("text") .text(d => `${d.wl}`) .attr("x", d => xscale(d.u) + d.nu * 9 - Math.max(0, Math.min(8, 535 - d.wl))) .attr("y", d => yscale(d.v) - d.nv * 9 + 3); // axes g.append("g").attr("transform", `translate(0, ${yscale(0)})`) .call(d3.axisBottom().offset(.5).scale(xscale).ticks(6) .tickFormat("")) .call(g => g.selectAll("line, path") .attr("stroke", "white") .attr("stroke-opacity", .5)); g.append("g").attr("transform", `translate(${xscale(0)}, 0)`) .call(d3.axisLeft().offset(.5).scale(yscale).ticks(6) .tickFormat("")) .call(g => g.selectAll("line, path") .attr("stroke", "white") .attr("stroke-opacity", .5)); // grid g.append("g").attr("transform", `translate(0, ${graph_size})`) .call(d3.axisTop().offset(.5).scale(xscale).ticks(6) .tickSize(graph_size) .tickFormat("")) .call(g => g.selectAll(".tick line") .attr("stroke", "white") .attr("stroke-opacity", 0.2)) .call(g => g.selectAll(".domain") .attr("stroke", "none")); g.append("g").attr("transform", `translate(0, 0)`) .call(d3.axisRight().offset(.5).scale(yscale).ticks(6) .tickSize(graph_size) .tickFormat("")) .call(g => g.selectAll(".tick line") .attr("stroke", "white") .attr("stroke-opacity", 0.2)) .call(g => g.selectAll(".domain") .attr("stroke", "none")); return chart; }37:Te5c,update_mark = { var uv_dots = [] var uv_paths = [] if (markSettings.show_mark) { var [mx, my] = markSettings.mark; if (markSettings.space == "xy") [mx, my] = XYZ_to_Luv_uv([mx, my, 1 - mx - my]); uv_dots.push([mx, my, null]); } if (markSettings.show.includes("bb")) { uv_dots = uv_dots.concat( [ [ 0.44796288, 0.53194444, "1000K", 9], [ 0.35790039, 0.54049637, "1500K", 9], [ 0.30504404, 0.53859917, "2000K", -1], [ 0.27764904, 0.53286075, "2400K", 0], [ 0.26249639, 0.52735122, "2700K", 3], [ 0.250569 , 0.5213849 , "3000K", 6], [ 0.23571102, 0.51126179, "3500K", 5], [ 0.22510967, 0.50158105, "4000K", 6], [ 0.21142383, 0.48467368, "5000K", 2], [ 0.20044859, 0.46554256, "6500K"], [ 0.19462429, 0.45211456, "8000K"], [ 0.1903185 , 0.43989704, "10,000K"], [ 0.18388449, 0.41563411, "20,000K"], [ 0.18006975, 0.39531595, "∞K"]]); uv_paths.push([[0.1801, 0.3953], [0.1808, 0.3995], [0.1816, 0.4043], [0.1827, 0.4098], [0.1839, 0.4159], [0.1855, 0.4227], [0.1874, 0.4300], [0.1897, 0.4379], [0.1924, 0.4461], [0.1957, 0.4547], [0.1995, 0.4635], [0.2039, 0.4723], [0.2090, 0.4810], [0.2149, 0.4895], [0.2215, 0.4977], [0.2289, 0.5054], [0.2373, 0.5125], [0.2466, 0.5190], [0.2569, 0.5247], [0.2682, 0.5297], [0.2806, 0.5337], [0.2941, 0.5368], [0.3088, 0.5391], [0.3248, 0.5404], [0.3421, 0.5408], [0.3606, 0.5404], [0.3805, 0.5392], [0.4018, 0.5373], [0.4243, 0.5349], [0.4480, 0.5319], [0.4726, 0.5286] ]); } if (markSettings.show.includes("d")) { uv_dots = uv_dots.concat( [ [ 0.25596937, 0.52429072, "A" ], [ 0.22353376, 0.50487858, "D40" ], [ 0.20911366, 0.48812190, "D50" ], [ 0.20439325, 0.48079525, "D55" , 2], [ 0.19779707, 0.46838996, "D65" ], [ 0.19350552, 0.45858085, "D75" ], [ 0.18878269, 0.44570859, "D93" ], [ 0.18502301, 0.43346872, "D120" ]]) uv_paths.push([[0.2235, 0.5049], [0.2178, 0.4990], [0.2130, 0.4934], [0.2091, 0.4881], [0.2074, 0.4856], [0.2058, 0.4832], [0.2044, 0.4808], [0.2018, 0.4763], [0.1997, 0.4722], [0.1978, 0.4684], [0.1962, 0.4649], [0.1948, 0.4616], [0.1935, 0.4586], [0.1916, 0.4537], [0.1901, 0.4494], [0.1888, 0.4457], [0.1872, 0.4409], [0.1860, 0.4369], [0.1850, 0.4335]]); } const xscale = luv_chromaticity_chart.xscale; const yscale = luv_chromaticity_chart.yscale; luv_chromaticity_chart.g_mark .selectAll("circle") .data(uv_dots) .join("circle") .attr('fill', 'transparent') .attr('stroke', 'white') .attr('strokewidth', 1) .attr("r", 2.5) .attr("cx", d => xscale(d[0])) .attr("cy", d => yscale(d[1])); var line_gamut = d3.line() .x(uv => xscale(uv[0])) .y(uv => yscale(uv[1])) luv_chromaticity_chart.g_mark .selectAll("path") .data(uv_paths) .join("path") .attr('fill', 'transparent') .attr('stroke', 'white') .attr('strokewidth', 1) .attr('stroke-opacity', .4) .attr('d', line_gamut); luv_chromaticity_chart.g_mark .attr("fill", "white") .attr("font-size", 9) .attr("font-weight", "bold") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .selectAll("text") .data(uv_dots.filter(d => d[2])) .join("text") .text(d => `${d[2]}`) .attr("x", d => xscale(d[0]) - 5) .attr("y", d => yscale(d[1]) - 2 + (d[3] || 0)); }38:T9bd,// Map the RGB values from our rasterized gamut to display colors function color_map_gamut(settings) { var { bg_fill = 0.25, rgb_norm = 1.00, norm_method = "RGB 4-norm", clip_first = false, clip_method = "Mix grey"} = settings; const resolution = canvas_width; rgb_norm *= (1 - bg_fill); const canvas = DOM.canvas(resolution, resolution); const ctx = canvas.getContext("2d", {colorSpace: colorSpace}); const img_data = ctx.createImageData(resolution, resolution); var data_offset = 0; for (var p_y = 0 ; p_y < resolution; ++p_y) { for (var p_x = 0 ; p_x < resolution; ++p_x, data_offset += 4) { if (gamut_raster[data_offset + 3] == 0) continue; var rgb1 = [gamut_raster[data_offset], gamut_raster[data_offset + 1], gamut_raster[data_offset + 2]]; var rgb; switch (norm_method) { case "RGB 4-norm": rgb = normalize_4norm(rgb1, rgb_norm); break; case "RGB 2-norm": rgb = normalize_2norm(rgb1, rgb_norm); break; case "RGB max": rgb = normalize_infnorm(rgb1, rgb_norm); break; case "Luminance": rgb = normalize_lum(rgb1, rgb_norm * 0.10); break; case "Reflectance": { rgb = normalize_lum(rgb1, rgb_norm * max_reflectance_lut[data_offset]); break; } case "Power": { rgb = normalize_lum(rgb1, rgb_norm * 0.75 * max_power_lut[data_offset]); break; } } if (!clip_first) rgb = rgb.map(x => x + bg_fill); switch (clip_method) { case "Mix grey": rgb = rgbGreyDesaturate(rgb, {grey: 0}); break; case "Clip": rgb = rgb.map(d => Math.max(0, d)); break; case "Perceptual" : rgb = perceptualAutoDesat(rgb, {grey: 0, amount: 0, auto: true}); break; case "Perceptual/desat" : rgb = perceptualAutoDesat(rgb, {grey: 0, amount: 0.15, auto: true}); break; default: rgb = gamutAlert(rgb, p_x + p_y); } if (clip_first) rgb = rgb.map(x => x + bg_fill); rgb = sRGB(rgb); img_data.data[data_offset] = rgb[0] * 255; img_data.data[data_offset + 1] = rgb[1] * 255; img_data.data[data_offset + 2] = rgb[2] * 255; img_data.data[data_offset + 3] = 255; } } ctx.putImageData(img_data, 0, 0); return {canvas: ctx.canvas}; }39:Taf5,// Rasterize LUV gamut as one polygon, one column at a time starting form the left (minimum value of u′). // we don’t strictly have to limit ourselves to pixels inside the gamut but it makes the output look // less weird. // We do add (mostly) one pixel of padding outside the gamut, so if we use this raster to fill up a polygon, // we will not see jagged edges at the border where it interpolates with background pixels. This lets us get // away with a much lower resolution. // the output color is linear so this will look quite saturated by itself. gamut_raster = { var bg_fill = 0.50; var rgb_norm = 0.49; function intercept(u, index1, index2) { var u1 = uv_data[index1].u; var u2 = uv_data[index2].u; var t = (u - u1) / (u2 - u1); return (1 - t) * uv_data[index1].v + t * uv_data[index2].v; } var resolution = canvas_width; const data = new Float32Array(4 * canvas_width * canvas_width); const data_y_pitch = 4 * canvas_width; const p_scale = raster_extent.w / resolution; const p_offset = raster_extent.x; const p_inv_scale = 1 / p_scale; const p_inv_offset = -p_offset * p_inv_scale; // 1 extra pixel here const p_x_first = Math.round(uv_data[uv_min_u_index].u * p_inv_scale + p_inv_offset) - 1; var p_x = p_x_first; var blue_segment = uv_min_u_index; var red_segment = uv_min_u_index - 1; for ( ; p_x < resolution; ++p_x) { // u, v var u = (p_x + 0.5) * p_scale + p_offset; // for the first few columns, shift u so we get some padding on that leftmost bend var u1 = u; if (p_x < p_x_first + 2) u1 += 0.8 * p_scale; // find segments while (red_segment + 1 < uv_data.length && u1 >= uv_data[red_segment + 1].u) { ++red_segment; } if (red_segment + 1 == uv_data.length) { break; } while (blue_segment > 0 && u1 >= uv_data[blue_segment].u) { --blue_segment; } // intercepts (the last segment where blue_segment wraps around is the purple line) var intercept_a = intercept(u1, (blue_segment > 0 ? blue_segment : uv_data.length) - 1, blue_segment); var intercept_b = intercept(u1, red_segment, red_segment + 1); var p_a = Math.round(intercept_a * p_inv_scale + p_inv_offset) - 1; // 1 extra pixel at the top and bottom var p_b = Math.round(intercept_b * p_inv_scale + p_inv_offset) + 1; const M = RgbColorM.xyzToRgb; // finally, rasterize line for (var p_y = p_a ; p_y < p_b; ++p_y) { var v = (p_y + 0.5) * p_scale + p_offset; var xyz = Luv_uv_to_XYZ([u, v]); var rgb = apply_m(M, xyz); var ofs = data_y_pitch * (resolution - p_y - 1) + 4 * p_x; data[ofs] = rgb[0]; data[ofs + 1] = rgb[1]; data[ofs + 2] = rgb[2]; data[ofs + 3] = 1; } } return data; }3a:[{"id":"39499dbb4c0bc5dc09b5ac7aa2477465e83878414955e59cb706459cf67b0443ef1982796b5856be11d941942189558fc18fe64f99d7f729e818f1a890dba4bb","href":"https://static.observableusercontent.com/files/39499dbb4c0bc5dc09b5ac7aa2477465e83878414955e59cb706459cf67b0443ef1982796b5856be11d941942189558fc18fe64f99d7f729e818f1a890dba4bb","name":"Luv-maxreflectance-lut.png","type":"image/png","lastModified":1688830490804.755,"size":6524},{"id":"e2eb184c0ddd5c0eb34622a99c6e5ca0667bca3167b3d0b8779a92425e1c3af04b5c340961bce49b62f624e22610da211926b7260b368bf21ceb77366c0c8cdb","href":"https://static.observableusercontent.com/files/e2eb184c0ddd5c0eb34622a99c6e5ca0667bca3167b3d0b8779a92425e1c3af04b5c340961bce49b62f624e22610da211926b7260b368bf21ceb77366c0c8cdb","name":"Luv-maxpower-lut.png","type":"image/png","lastModified":1688830490797.218,"size":7107},{"id":"52d1afb9ae92200fe85128d6153ff96b11ce9dbc778d051f1377aae9515eeeaf8f0ff671d0c402abb18f67902d689f326c798dfe17c76d4320dbec80dce7fb27","href":"https://static.observableusercontent.com/files/52d1afb9ae92200fe85128d6153ff96b11ce9dbc778d051f1377aae9515eeeaf8f0ff671d0c402abb18f67902d689f326c798dfe17c76d4320dbec80dce7fb27","name":"Luv-maxpower-lut@1.png","type":"image/png","lastModified":1688832574062.519,"size":6945},{"id":"eb3142073a977963a42d6479b50daa5e30619e56ddd529ee2d2d0161d7ee2a2d620f56860f618d6dd1b4a4101d6511eca6473ff5bf0424b0b28f1323cfa61a28","href":"https://static.observableusercontent.com/files/eb3142073a977963a42d6479b50daa5e30619e56ddd529ee2d2d0161d7ee2a2d620f56860f618d6dd1b4a4101d6511eca6473ff5bf0424b0b28f1323cfa61a28","name":"Luv-maxreflectance-lut@1.png","type":"image/png","lastModified":1688832574076.605,"size":7195}] 32:{"id":"b2a623cfcfaba3f5","slug":"chromaticity-diagram","title":"Chromaticity Diagram","thumbnail":"6b31dbada70f5f712f525d9d98bfc16e21ca309d553a6f1470ff941df7d02af9","access_level":"public","create_time":"$D2023-05-29T21:37:40.359Z","update_time":"$D2025-04-07T00:30:45.333Z","view_time":null,"first_public_time":"$D2023-05-29T21:37:40.359Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"3ebafa4f59a35ad3","login":"roelandschoukens","name":"Roeland Schoukens","avatar_url":"https://avatars-next.observableusercontent.com/5f891a64a5a2649f6b6b94d7d2910cc1399672aa613af247dc080d9b0ecdd63e","tier":"starter_2024"},"version":1452,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bc0dceea753ec329","login":"roelandschoukens","name":"Roeland Schoukens","avatar_url":"https://avatars-next.observableusercontent.com/5f891a64a5a2649f6b6b94d7d2910cc1399672aa613af247dc080d9b0ecdd63e","tier":null}],"members":[{"type":"individual","id":"bc0dceea753ec329","login":"roelandschoukens","name":"Roeland Schoukens","avatar_url":"https://avatars-next.observableusercontent.com/5f891a64a5a2649f6b6b94d7d2910cc1399672aa613af247dc080d9b0ecdd63e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Chromaticity Diagram","cells":[{"id":0,"value":"# Chromaticity Diagram\n\nThe evil twin of the [Rendering a Spectrum](/@roelandschoukens/rendering-a-spectrum) notebook — with the same ideas, but now rendering a chromaticity diagram instead of a rainbow.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"display = {\n // div with resize handle, populated in `populateDisplay`\n // this is so the size doesn't reset on updates.\n var outerDiv = html`

`;\n return outerDiv;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"viewof settings1 = Inputs.form({\n bg_fill: Inputs.range([0, 0.5], {label: \"Background\", step: .001, value: .24}),\n norm_method: Inputs.radio([\"RGB max\", \"RGB 4-norm\", \"RGB 2-norm\", \"Luminance\", \"Reflectance\", \"Power\"], {label: \"Normalisation method\", value: \"Reflectance\"}),\n rgb_norm: Inputs.range([0, 1], {label: \"RGB norm\", step: .001, value: 0.68}),\n clip_method: Inputs.radio([\"Clip\", \"Mix grey\", \"Perceptual\", \"Perceptual/desat\", \"Alert\"], {label: \"Gamut clipping\", value: \"Mix grey\"}),\n clip_first: Inputs.toggle({label: \"Clip before bg\", value: false}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"viewof markSettings = Inputs.form({\n show: Inputs.checkbox([\"d\", \"bb\"], {label: \"Show illuminants:\", keyof: x => ({d:\"A + D-series\", bb:\"Blackbody\"}[x])}),\n show_mark: Inputs.toggle({label: \"Show mark\", value: false}),\n mark: multiChannel(2, {label: \"mark\", step: .0001, value: .3333, extent: [0, 1]}),\n space: Inputs.radio([\"uv\", \"xy\"], {label: \"Coordinate space\", value: \"xy\", keyof: x => ({xy:\"x\\u200ay\", uv:\"u′\\u200av′\"}[x])})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"viewof colorSpaceChoice\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"colorSpaceDisplay","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1203,"value":"### Color space","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1306,"value":"If supported by your browser, with _display-p3_ we are able to display more satureated greens and (especially) cyans. This is assuming your monitor also has a wider gamut than sRGB, and that you have color management set up for that monitor.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1371,"value":"// this cell has a dependency on populate display to make sure it resets back\n// to 0. Otherwise once clicked you'll download an SVG after every update.\n// (this uses the ‘comma operator’)\nviewof svg_button = populateDisplay, Inputs.button(\"Download diagram as SVG\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"## Making the SVG part","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":947,"value":"luv_chromaticity_chart = make_luv_chromaticity_chart(svg_width, settings1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1346,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"function get_canvas_with_image() {\n var image_data_url = uv_canvas1.canvas.toDataURL();\n var svg = make_luv_chromaticity_chart(600, {...settings1, image_url: image_data_url});\n\n var downloadLink = document.createElement('a');\n var name = 'luv.svg';\n downloadLink.setAttribute('download', name);\n svg.node.setAttribute(\"xmlns\", \"http://www.w3.org/2000/svg\");\n var svgBlob = new Blob(['\\n', svg.node.outerHTML], {type:\"image/svg+xml;charset=utf-8\"});\n var svgUrl = URL.createObjectURL(svgBlob);\n downloadLink.setAttribute('href', svgUrl);\n downloadLink.click(); \n URL.revokeObjectURL(svgUrl);\n };","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1374,"value":"{\n // warning: make sure the input is regenerated (or reset to 0) on updates\n \n if (!svg_button) return \"Click button to get SVG\";\n\n get_canvas_with_image();\n return \"Got SVG\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1224,"value":"colorSpaceDisplayHaveNote = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"svg_width = Math.min(width - 10, 700)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"## Fill","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":770,"value":"canvas_width = 250","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"// which rectangle is covered by our gamut raster\nraster_extent = ({x: -0.01, y: -0.01, w: 0.64, h: 0.64});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"uv_canvas1 = color_map_gamut(settings1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"### Rasterize function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":468,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1054,"value":"### Constant power","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1058,"value":"max_power_img = await FileAttachment(\"Luv-maxpower-lut@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"This lookup table gives the maximum brightness which can be achieved for a given chromaticity with a limited power budget. Mathematically this means the sum (or integral) of the entire spectrum equals a constant value. If you pick 1.0, the problem becomes equivalent to calculating the convex hull of the XYZ tristimulus values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1024,"value":"max_power_lut = image_as_data(max_power_img)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"### Reflectance","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1064,"value":"max_reflectance_img = await FileAttachment(\"Luv-maxreflectance-lut@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1071,"value":"This lookup table gives the maximal brightness which can be achieved for a given chromaticity by reflecting white light off a colored surface. This is called a *MacAdam limit surface*.\n\nA reflection spectra that gives optimal brightness for a chromaticity is always either a block shaped spectrum with 100% reflectance between two wavelengths, and 0% outside, or its inverse. (these inverses are effectively block shapes that are wrapped around the purple line). One can thus easily calculate a conical shape of XYZ values, where every ring consists of spectra with a certain width and varying centre wavelengths, with 100% white forming the vertex.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1026,"value":"max_reflectance_lut = image_as_data(max_reflectance_img)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1033,"value":"async function image_as_data(img)\n{\n var canvas = document.createElement('canvas');\n var ctx = canvas.getContext('2d');\n canvas.width = img.width;\n canvas.height = img.height;\n ctx.drawImage(img, 0, 0 );\n const data8 = ctx.getImageData(0, 0, img.width, img.height).data;\n const data = new Float32Array(data8.length);\n for (var i = 0; i < data8.length; ++i)\n {\n data[i] = inv_sRGB(data8[i] / 255);\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"function inv_sRGB(x)\n{\n return x > 0.04045 ? Math.pow((x + 0.055) / 1.055, 2.4) : x / 12.92;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"// XYZ to u′v′\nfunction XYZ_to_Luv_uv([x, y, z])\n{\n if (x == 0 && y == 0 && z == 0) {\n return [4 / 19, 9 / 19];\n }\n var u1 = 4 * x / (x + 15 * y + 3 * z);\n var v1 = 9 * y / (x + 15 * y + 3 * z);\n return [u1, v1];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"// u′v′ to XYZ\n// This starts only with a chromaticity, so we have to pick some arbitrary scale. Here the sum\n// x + y + z will be 1.0, so the first two coordinates are the xy coordinate.\nfunction Luv_uv_to_XYZ([u, v])\n{\n var x = 9 * u / (6 * u - 16 * v + 12);\n var y = 4 * v / (6 * u - 16 * v + 12);\n var z = 1 - x - y;\n return [x, y, z];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"function normalize_4norm([r, g, b], norm)\n{\n // normalize\n var scale = norm / Math.pow(r*r*r*r + g*g*g*g + b*b*b*b, .25);\n return [r * scale, g * scale, b * scale];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"function normalize_2norm([r, g, b], norm)\n{\n // normalize\n var scale = norm / Math.sqrt(r*r + g*g + b*b);\n return [r * scale, g * scale, b * scale];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"function normalize_infnorm([r, g, b], norm) {\n // normalize\n var scale = norm / Math.max(Math.abs(r), Math.abs(g), Math.abs(b));\n return [r * scale, g * scale, b * scale];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"function normalize_lum([r, g, b], norm)\n{\n const [m21, m22, m23] = RgbColorM.rgbToXyz[1];\n var scale = norm / (m21 * r + m22 * g + m23 * b);\n return [r * scale, g * scale, b * scale];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"uv_data = {\n var data = [];\n var rgbM = RgbColorM.xyzToRgb;\n for (var i = 0; i < cie1931.x.length; ++i)\n {\n var xyz = [cie1931.x[i], cie1931.y[i], cie1931.z[i]]\n var [u, v] = XYZ_to_Luv_uv(xyz);\n var [r, g, b] = apply_m(rgbM, xyz);\n data.push({wl: i+380, x:xyz[0], y:xyz[1], z:xyz[2], u:u, v:v, r:r, g:g, b:b});\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"function uv_at_wl(wl) { return {...uv_data[wl - 380]}; }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"uv_points = {\n var data = [];\n data.push(uv_at_wl(400));\n for (var i = 430; i < 660; i += 10) {\n data.push(uv_at_wl(i));\n }\n data.push(uv_at_wl(700));\n \n data[data.length - 2].notext = true;\n data[data.length - 4].notext = true;\n\n // vectors for text placement\n var u0, v0;\n data.forEach(d => {\n if (d.wl > 420)\n {\n var Δu = -(d.v - v0);\n var Δv = (d.u - u0);\n var len = Math.hypot(Δu, Δv);\n d.nu = Δu / len;\n d.nv = Δv / len;\n }\n else {\n d.nu = 0;\n d.nv = -1.4;\n }\n u0 = d.u;\n v0 = d.v;\n })\n \n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"uv_min_u_index = {\n var max_i = 100;\n while (uv_data[max_i].u > uv_data[max_i + 1].u) ++max_i;\n return max_i;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1385,"value":"function gamutAlert(rgb, offset)\n{\n const [r, g, b] = rgb;\n if (Math.min(r, g, b) < -0.0001) {\n return offset % 4 < 2 ? [.5, .5, .5] : [0, 0, 0];\n }\n else if (Math.max(r, g, b) > 1.0001) {\n return offset % 4 < 2 ? [.5, .5, .5] : [1, 1, 1];\n }\n else {\n return rgb;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {cie1931, viewof colorSpaceChoice, colorSpace, colorSpaceDisplay, rgbGreyDesaturate, OklabSaturate, perceptualAutoDesat, apply_m, RgbColorM, OklabLmsRgbM, sRGB, colorToCss}\n with {colorSpaceDisplayHaveNote as colorSpaceDisplayHaveNote}\n from \"@roelandschoukens/rendering-a-spectrum\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1429,"value":"import {multiChannel} from \"@roelandschoukens/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 33:"$32:body"