31:T1390,async function make_luv_chromaticity_chart(chart_size, settings, image_url) { chart_size = Math.min(width, chart_size); // 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; var xscale = d3.scaleLinear() .domain([-offset, graph_range - offset]) .range([0, graph_size]); var yscale = d3.scaleLinear() .domain([graph_range - offset, -offset]) .range([0, graph_size]); var f = settings.bg_fill; var bg_color = colorToCss(sRGB([f, f, f])); // create SVG const svg = d3.create("svg") .attr("viewBox", [0, 0, width, chart_size]); var chart = { node:svg.node() }; chart.defs = svg.append("defs"); // gamut image pattern 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", image_url); var g = svg.append("g"); // gamut background color g.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", graph_size) .attr("height", graph_size) .attr('fill', bg_color); // gamut outline + fill var line_gamut = d3.line() .x(d => xscale(d.u)) .y(d => yscale(d.v)) .curve(d3.curveLinearClosed); chart.contour = g.append("path") .attr('stroke', 'black') .attr('strokewidth', '2') .attr('fill', 'url(#uv_gamut_fill)') .attr("d", line_gamut(uv_data)); // sRGB gamut var line = d3.line() .x(d => xscale(d[0])) .y(d => yscale(d[1])) .curve(d3.curveLinearClosed); const { redWL, greenWL, blueWL } = gamutVertices; var rgb_uv = [ uv_at_wl(redWL), uv_at_wl(greenWL), uv_at_wl(blueWL) ].map(({u,v})=>[u,v]); var g_gamut = g.append("g"); // gamut triangle g_gamut.append("path") .attr('fill', 'transparent') .attr('stroke', 'white') .attr('stroke-width', 2) .attr('stroke-opacity', 1) .attr("d", line(rgb_uv)); // 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("fill", "white") .attr("style", "text-shadow: rgba(40, 40, 40, .3) 1px 1px 1px") .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().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().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() .scale(xscale).ticks(6) .tickSize(graph_size) .tickFormat("")) .call(g => g.selectAll(".tick line") .attr("stroke", "white") .attr("stroke-opacity", 0.2)); g.append("g").attr("transform", `translate(0, 0)`) .call(d3.axisRight() .scale(yscale).ticks(6) .tickSize(graph_size) .tickFormat("")) .call(g => g.selectAll(".tick line") .attr("stroke", "white") .attr("stroke-opacity", 0.2)); // await until the image is decoded (it is too bad we have to encode // it as PNG in the first place). This avoids flicker when changing settings. if (pat_img.node().decode) await pat_img.node().decode(); return chart; }32:T9c5,// Map the RGB values from our rasterized gamut to display colors function color_map_gamut(settings) { var { bg_fill = 0.25, rgb_norm = 0.70, pre_perceptual_desat = 0, norm_method = "RGB 4-norm", clip_method = "Mix grey", perceptual_hue_correct = false } = settings; const resolution = canvas_width; const canvas = DOM.canvas(resolution, resolution); const ctx = canvas.getContext("2d", {colorSpace: "srgb"}); 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]]; if (pre_perceptual_desat > 0) { rgb1 = OklabSaturate(rgb1, 1 - pre_perceptual_desat); } 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 * 0.72 * max_reflectance_lut[data_offset]); break; } case "Power": { rgb = normalize_lum(rgb1, rgb_norm * 0.50 * max_power_lut[data_offset]); break; } } rgb = rgb.map(x => x + bg_fill); rgb = clip_method == "Mix grey" ? rgbGreyDesaturate(rgb, {grey: 0}) : rgb.map(d => Math.max(0, d)); if (perceptual_hue_correct) { rgb = OklabCopyHue(rgb, rgb1); } 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; } } var div = html`

`; ctx.putImageData(img_data, 0, 0); div.appendChild(ctx.canvas); ctx.canvas.style.width = resolution + 'px'; ctx.canvas.style.height = resolution + 'px'; div[gamut_canvas_symbol] = ctx.canvas; div[gamut_url_symbol] = ctx.canvas.toDataURL('image/png'); return div; }33:Tad2,// 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; // 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 = XYZ_to_rgb(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; }34:[{"id":"52d1afb9ae92200fe85128d6153ff96b11ce9dbc778d051f1377aae9515eeeaf8f0ff671d0c402abb18f67902d689f326c798dfe17c76d4320dbec80dce7fb27","href":"https://static.observableusercontent.com/files/52d1afb9ae92200fe85128d6153ff96b11ce9dbc778d051f1377aae9515eeeaf8f0ff671d0c402abb18f67902d689f326c798dfe17c76d4320dbec80dce7fb27","name":"Luv-maxpower-lut@1.png","type":"image/png","lastModified":1706723948211.979,"size":6945},{"id":"eb3142073a977963a42d6479b50daa5e30619e56ddd529ee2d2d0161d7ee2a2d620f56860f618d6dd1b4a4101d6511eca6473ff5bf0424b0b28f1323cfa61a28","href":"https://static.observableusercontent.com/files/eb3142073a977963a42d6479b50daa5e30619e56ddd529ee2d2d0161d7ee2a2d620f56860f618d6dd1b4a4101d6511eca6473ff5bf0424b0b28f1323cfa61a28","name":"Luv-maxreflectance-lut@1.png","type":"image/png","lastModified":1706723948211.979,"size":7195}] 2f:{"title":"Chromaticity Diagram","cells":[{"id":0,"value":"# Chromaticity Diagram","pinned":false,"hidden":false,"mode":"md"},{"id":1123,"value":"viewof gamutVertices = {\n const blueWL = Inputs.range([400, 700], {label: \"BLUE (nm)\", value: 450, step: 1});\n const greenWL = Inputs.range([400, 700], {label: \"GREEN (nm)\", value: 500, step: 1});\n const redWL = Inputs.range([400, 700], {label: \"RED (nm)\", value: 620, step: 1});\n const buttons = Inputs.button(\n gamuts.map(([name,B,G,R]) => [name, () => {\n blueWL.value = B;\n greenWL.value = G;\n redWL.value = R;\n }])\n );\n return Inputs.form({blueWL,greenWL,redWL,buttons});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"graph = luv_chromaticity_chart.node","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"viewof settings1 = Inputs.form({\n bg_fill: Inputs.range([0, 0.5], {label: \"Background\", step: .001, value: .15}),\n norm_method: Inputs.radio([\"RGB max\", \"RGB 4-norm\", \"RGB 2-norm\", \"Luminance\", \"Reflectance\", \"Power\"], {label: \"Normalisation method\", value: \"RGB 4-norm\"}),\n rgb_norm: Inputs.range([0, 1], {label: \"RGB norm\", step: .001, value: .70}),\n clip_method: Inputs.radio([\"Clip\", \"Mix grey\"], {label: \"Gamut clipping\", value: \"Mix grey\"}),\n perceptual_hue_correct: Inputs.toggle({label: \"Perceptual hue correction\", value: true})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"gamuts = [\n [\"HDTV\", 465, 530, 630],\n [\"iPhone\", 467, 544, 615],\n [\"sRGB\", 465, 535, 612],\n [\"Neopixel\", 470, 522, 625],\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"luv_chromaticity_chart = make_luv_chromaticity_chart(700, settings1, uv_canvas1[gamut_url_symbol])","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"As with the rainbow, we are severely limited by sRGB’s inability to represent saturated greens and cyans.\n\nBut 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.","pinned":false,"hidden":false,"mode":"md"},{"id":960,"value":"## Making the SVG part","pinned":false,"hidden":false,"mode":"md"},{"id":189,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":462,"value":"## Fill","pinned":true,"hidden":false,"mode":"md"},{"id":770,"value":"canvas_width = 250","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":565,"value":"uv_canvas1 = color_map_gamut(settings1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":939,"value":"### Rasterize function","pinned":false,"hidden":false,"mode":"md"},{"id":601,"value":"gamut_canvas_symbol = Symbol('canvas')","pinned":true,"hidden":false,"mode":"ojs"},{"id":933,"value":"gamut_url_symbol = Symbol('url')","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":759,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1023,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":1054,"value":"### Constant power","pinned":false,"hidden":false,"mode":"md"},{"id":1058,"value":"max_power_img = await FileAttachment(\"Luv-maxpower-lut@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":1024,"value":"max_power_lut = image_as_data(max_power_img)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1066,"value":"### Reflectance","pinned":false,"hidden":false,"mode":"md"},{"id":1064,"value":"max_reflectance_img = await FileAttachment(\"Luv-maxreflectance-lut@1.png\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":1026,"value":"max_reflectance_lut = image_as_data(max_reflectance_img)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":177,"value":"function XYZ_to_rgb([x, y, z]) {\n return [\n 3.2404542 * x - 1.5371385 * y - 0.4985314 * z,\n -0.9692660 * x + 1.8760108 * y + 0.0415560 * z,\n 0.0556434 * x - 0.2040259 * y + 1.0572252 * z];\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":851,"value":"function rgb_to_XYZ([r, g, b])\n{\n return [\n 0.4124564 * r + 0.3575761 * g + 0.1804375 * b,\n 0.2126729 * r + 0.7151522 * g + 0.0721750 * b,\n 0.0193339 * r + 0.1191920 * g + 0.9503041 * b];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":968,"value":"function normalize_lum([r, g, b], norm)\n{\n var scale = norm / (0.2126729 * r + 0.7151522 * g + 0.0721750 * b);\n return [r * scale, g * scale, b * scale];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"uv_data = {\n var data = [];\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] = XYZ_to_rgb(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"},{"id":228,"value":"function uv_at_wl(wl) { return {...uv_data[wl - 380]}; }","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":6,"value":"import {cie1931, rgbGreyDesaturate, OklabSaturate, OklabCopyHue, colorToCss, sRGB} from \"@roelandschoukens/rendering-a-spectrum\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}