2c:null 2d:["$","title",null,{"children":"Perceptually Smooth Multi-Color Linear Gradients | Matt DesLauriers | Observable"}] 32:T4eee,svg``33:T29be,palettes = { const palettes = [[[188,137,43],[120,205,208],[181,177,216]],[[166,161,89],[0,180,155],[0,91,141],[185,132,175]],[[216,163,123],[80,19,69],[161,163,154]],[[181,147,146],[226,181,64],[0,110,184]],[[183,31,87],[216,163,123],[163,106,165]],[[255,239,174],[238,167,140],[85,88,50]],[[243,162,87],[248,237,67],[98,198,191]],[[248,237,67],[0,151,141],[0,148,101],[188,228,229]],[[218,82,93],[197,159,107],[150,209,170],[185,132,175]],[[193,159,44],[113,80,47],[84,112,118]],[[243,162,87],[37,49,34],[182,191,193]],[[244,128,103],[131,126,49],[150,209,170]],[[253,212,189],[131,126,49],[175,212,114],[0,113,144]],[[253,212,189],[178,183,62],[180,205,194]],[[209,176,167],[0,147,165],[64,69,106]],[[197,83,71],[121,51,39],[165,200,209]],[[226,181,64],[249,157,27],[193,107,39]],[[204,18,54],[255,242,0],[26,116,68],[17,19,20]],[[128,38,38],[226,181,64],[166,161,89]],[[253,197,126],[178,183,62],[118,44,25],[17,19,20]],[[128,38,38],[238,180,128],[131,126,49],[0,113,144]],[[248,182,186],[221,64,39],[183,194,169],[0,147,165]],[[188,137,43],[99,90,58],[26,116,68]],[[235,211,162],[249,157,27],[151,172,200]],[[244,128,103],[181,222,204],[150,209,170]],[[174,82,36],[235,211,162],[99,90,58],[6,79,110]],[[244,128,103],[251,230,160],[17,47,44]],[[168,66,34],[246,140,80],[75,51,23],[0,144,138]],[[238,180,128],[193,196,148],[100,80,161]],[[128,38,38],[249,157,27],[180,205,194]],[[181,222,204],[150,209,170],[52,69,76]],[[181,147,146],[245,236,194],[37,49,34],[151,172,200]],[[181,147,146],[216,163,123],[181,222,204]],[[235,83,36],[113,148,112],[0,79,70]],[[243,127,148],[253,212,189],[175,212,114],[17,19,20]],[[193,196,148],[67,119,66],[37,49,34],[80,19,69]],[[248,237,67],[118,44,25],[181,222,204]],[[174,82,36],[252,179,21],[0,147,155],[64,69,106]],[[243,162,87],[246,140,80],[64,69,106],[6,79,110]],[[151,172,200],[5,18,48],[182,191,193]],[[253,191,104],[249,157,27],[0,151,141],[0,110,184]],[[112,114,124],[140,76,98],[89,37,106]],[[187,113,37],[235,211,162],[107,113,64],[52,69,76]],[[243,127,148],[154,114,170],[89,37,106]],[[202,179,86],[241,90,48],[0,180,155],[188,228,229]],[[242,114,145],[84,112,118],[122,68,86]],[[183,31,87],[150,209,170],[9,145,151],[17,47,44]],[[163,103,82],[180,205,194],[17,19,20]],[[174,82,36],[249,157,27],[107,113,64],[64,69,106]],[[0,91,141],[192,169,179],[163,106,165]],[[248,182,186],[98,198,191],[154,114,170]],[[181,147,146],[174,82,36],[241,90,48],[181,222,204]],[[249,193,206],[253,212,189],[120,205,208]],[[187,113,37],[255,221,0],[0,151,141],[28,66,134]],[[128,38,38],[238,167,140],[79,64,134]],[[214,180,62],[243,116,32],[17,47,44]],[[199,209,79],[0,180,155],[150,209,170],[120,205,208]],[[245,236,194],[241,90,48],[175,212,114],[135,197,64]],[[224,179,182],[121,51,39],[90,130,179]],[[166,44,55],[255,239,174],[182,191,193]],[[218,82,93],[187,113,37],[193,159,44],[9,145,151]],[[174,82,36],[238,180,128],[181,222,204],[52,69,76]],[[121,51,39],[194,174,147],[214,180,62],[84,112,118]],[[253,191,104],[194,174,147],[188,228,229],[0,113,144]],[[187,113,37],[217,102,41],[0,147,155]],[[171,36,57],[152,111,45],[151,172,200]],[[171,84,77],[128,38,38],[113,148,112],[98,198,191]],[[246,140,80],[166,161,89],[5,18,48]],[[245,142,132],[245,236,194],[129,146,56],[165,200,209]],[[248,237,67],[37,49,34],[98,198,191]],[[130,36,31],[249,157,27],[79,64,134],[52,69,76]],[[238,167,140],[255,221,0],[167,212,228]],[[124,66,38],[216,163,123],[85,88,50]],[[166,44,55],[252,179,21],[0,79,70],[192,169,179]],[[226,98,94],[255,221,0],[0,180,155],[0,79,70]],[[121,51,39],[216,163,123],[0,110,184]],[[174,82,36],[248,237,67],[150,209,170],[0,110,184]],[[187,113,37],[181,222,204],[112,147,144],[72,155,110]],[[243,127,148],[252,179,21],[178,183,62]],[[221,64,39],[252,179,21],[79,64,134]],[[187,113,37],[255,221,0],[249,157,27],[67,119,66]],[[166,44,55],[193,196,148],[113,148,112]],[[130,36,31],[176,159,54],[0,180,155]],[[242,114,145],[183,63,116],[131,126,49],[30,14,63]],[[204,18,54],[253,191,104],[0,151,141]],[[241,90,48],[0,180,155],[182,191,193],[17,19,20]],[[245,236,194],[67,119,66],[151,172,200]],[[235,83,36],[72,155,110],[17,19,20]],[[128,38,38],[216,163,123],[26,116,68]],[[218,82,93],[251,230,160],[226,181,64],[17,47,44]],[[174,82,36],[255,221,0],[72,155,110]],[[253,191,104],[192,169,179],[80,19,69],[52,69,76]],[[243,127,148],[121,51,39],[255,239,174],[66,83,62]],[[253,197,126],[28,66,134],[163,106,165],[17,19,20]],[[235,211,162],[226,181,64],[28,66,134]],[[174,82,36],[249,157,27],[112,147,144],[0,91,141]],[[253,197,126],[113,80,47],[167,212,228]],[[244,128,103],[67,119,66],[37,49,34],[165,200,209]],[[188,137,43],[28,66,134],[132,86,91]],[[245,236,194],[238,180,128],[131,126,49],[37,49,34]],[[255,239,174],[0,151,141],[150,209,170],[0,113,144]],[[171,84,77],[128,110,75],[28,66,134]],[[248,182,186],[243,162,87],[194,117,68]],[[166,44,55],[79,64,134],[80,19,69]],[[181,147,146],[202,179,86],[180,205,194]],[[0,110,184],[185,132,175],[161,163,154]],[[243,127,148],[102,98,156],[182,191,193]],[[183,63,116],[194,117,68],[165,200,209]],[[197,60,105],[238,167,140],[129,146,56],[0,113,144]],[[187,113,37],[238,167,140],[194,174,147],[18,53,78]],[[235,211,162],[249,157,27],[192,169,179]],[[249,157,27],[100,75,30],[122,68,86],[17,19,20]],[[245,236,194],[243,162,87],[176,159,54]],[[204,18,54],[238,180,128],[5,18,48]],[[243,127,148],[174,82,36],[26,116,68],[17,19,20]],[[245,142,132],[203,47,67],[37,49,34],[0,79,70]],[[221,64,39],[255,239,174],[197,165,110],[84,112,118]],[[248,237,67],[246,140,80],[80,19,69],[52,69,76]],[[209,176,167],[203,47,67],[217,102,41],[150,209,170]],[[204,18,54],[181,177,216],[163,106,165],[80,19,69]],[[187,113,37],[166,44,55],[79,64,134]],[[121,51,39],[253,191,104],[139,131,91],[0,151,141]],[[143,160,113],[151,172,200],[150,209,170]],[[221,64,39],[243,162,87],[28,66,134]],[[244,128,103],[245,236,194],[243,162,87],[191,88,146]],[[197,83,71],[253,197,126],[100,143,123]],[[166,44,55],[129,146,56],[18,53,78],[52,69,76]],[[178,183,62],[167,212,228],[100,80,161]],[[167,33,68],[255,242,0],[26,116,68],[52,69,76]],[[109,65,69],[253,191,104],[79,64,134]],[[109,65,69],[202,146,168],[113,59,76],[17,19,20]],[[218,82,93],[235,211,162],[176,159,54],[67,119,66]],[[255,239,174],[243,116,32],[181,222,204],[151,172,200]],[[187,113,37],[202,179,86],[120,205,208],[17,19,20]],[[245,236,194],[253,191,104],[67,119,66],[151,172,200]],[[224,179,182],[242,114,145],[109,65,69]],[[169,65,81],[193,159,44],[151,172,200]],[[212,109,122],[143,160,113],[185,132,175]],[[248,182,186],[245,236,194],[131,126,49],[202,146,168]],[[216,163,123],[217,102,41],[165,200,209],[64,69,106]],[[227,31,38],[252,179,21],[0,110,184],[163,106,165]],[[130,36,31],[0,148,101],[79,64,134],[89,37,106]],[[249,193,206],[125,19,58],[163,103,82],[182,191,193]],[[243,127,148],[202,179,86],[167,212,228],[120,205,208]],[[248,182,186],[192,169,179],[122,68,86]],[[167,33,68],[255,239,174],[120,205,208],[161,163,154]],[[244,128,103],[251,230,160],[0,144,138]],[[128,38,38],[150,135,77],[181,177,216]],[[248,237,67],[199,209,79],[64,69,106],[30,14,63]],[[242,114,145],[235,211,162],[132,128,97]],[[238,167,140],[243,116,32],[0,148,101],[17,19,20]],[[166,44,55],[182,191,193],[17,19,20]],[[227,31,38],[235,211,162],[143,160,113],[163,106,165]],[[243,162,87],[0,113,144],[52,69,76]],[[253,191,104],[255,242,0],[0,110,184],[30,14,63]],[[197,60,105],[30,14,63],[154,114,170],[79,64,134]],[[242,114,145],[255,239,174],[182,191,193]],[[193,196,148],[188,228,229],[151,172,200],[9,145,151]],[[214,180,62],[252,179,21],[0,147,165]],[[125,19,58],[214,180,62],[90,130,179]],[[253,191,104],[0,110,184],[191,88,146]],[[235,211,162],[165,200,209],[9,145,151]],[[241,90,48],[139,131,91],[90,130,179],[154,114,170]],[[171,36,57],[90,130,179],[163,106,165],[182,191,193]],[[171,36,57],[253,191,104],[183,194,169],[199,209,79]],[[243,127,148],[188,137,43],[181,177,216],[112,67,87]],[[235,211,162],[163,103,82],[79,64,134]],[[253,191,104],[75,51,23],[112,114,124]],[[194,174,147],[167,212,228],[6,79,110]],[[121,51,39],[188,228,229],[98,198,191],[100,80,161]],[[248,237,67],[194,117,68],[135,197,64]],[[197,83,71],[194,174,147],[118,44,25],[122,68,86]],[[253,197,126],[100,143,123],[102,98,156]],[[246,145,126],[255,242,0],[0,147,165]],[[251,230,160],[241,90,48],[37,49,34],[182,191,193]],[[255,221,0],[188,137,43],[151,172,200]],[[187,113,37],[128,38,38],[163,106,165],[17,19,20]],[[235,83,36],[0,151,141],[5,18,48]],[[235,211,162],[217,102,41],[17,19,20]],[[253,197,126],[154,114,170],[182,191,193]],[[245,236,194],[9,145,151],[0,113,144]],[[248,237,67],[6,79,110],[140,76,98]],[[128,110,75],[66,83,62],[0,79,70],[17,47,44]],[[244,128,103],[253,191,104],[181,222,204],[120,205,208]],[[245,236,194],[216,163,123],[113,80,47],[52,69,76]],[[187,113,37],[75,51,23],[5,18,48]],[[253,191,104],[214,180,62],[67,119,66],[0,79,70]],[[181,147,146],[197,97,39],[109,126,119],[0,113,144]],[[253,197,126],[248,237,67],[85,88,50]],[[183,63,116],[243,116,32],[17,19,20]],[[243,127,148],[121,51,39],[28,66,134],[78,29,76]],[[243,116,32],[175,212,114],[18,53,78]],[[238,180,128],[255,221,0],[178,183,62],[181,222,204]],[[183,63,116],[181,222,204],[199,209,79],[109,126,119]],[[218,82,93],[245,236,194],[107,113,64],[67,119,66]],[[204,18,54],[255,242,0],[0,110,184]],[[203,47,67],[0,148,101],[89,37,106]],[[248,182,186],[253,191,104],[152,111,45],[37,49,34]],[[181,147,146],[187,113,37],[37,49,34],[188,228,229]],[[183,63,116],[252,179,21],[89,37,106]],[[248,182,186],[168,66,34],[245,236,194],[253,197,126]],[[249,193,206],[165,200,209],[0,147,165]],[[124,66,38],[238,180,128],[0,91,141]],[[181,147,146],[197,83,71],[255,239,174]],[[109,65,69],[255,239,174],[85,88,50],[150,209,170]],[[204,18,54],[0,79,70],[112,67,87]],[[245,142,132],[248,237,67],[122,68,86]],[[255,239,174],[238,180,128],[197,165,110],[194,174,147]],[[0,91,141],[181,177,216],[112,114,124]],[[212,109,122],[255,221,0],[166,161,89],[30,14,63]],[[242,114,145],[130,36,31],[181,222,204]],[[227,31,38],[235,211,162],[143,160,113],[0,151,141]],[[218,82,93],[85,88,50],[202,146,168],[122,68,86]],[[212,109,122],[238,167,140],[180,205,194],[0,180,155]],[[248,182,186],[255,239,174],[161,163,154]],[[187,113,37],[248,237,67],[241,90,48],[17,19,20]],[[252,199,155],[194,174,147],[248,237,67],[181,222,204]],[[166,44,55],[150,135,77],[64,69,106]],[[124,66,38],[178,183,62],[30,14,63]],[[248,237,67],[9,145,151],[0,91,141],[161,163,154]],[[214,180,62],[150,209,170],[79,64,134]],[[245,236,194],[249,157,27],[6,79,110]],[[255,221,0],[181,222,204],[0,113,144]],[[194,117,68],[0,113,144],[89,37,106]],[[243,127,148],[187,113,37],[194,174,147],[192,169,179]],[[235,83,36],[253,212,189],[90,130,179]],[[166,44,55],[118,44,25],[151,172,200]],[[227,31,38],[168,66,34],[191,88,146],[100,80,161]]]; return shuffle(palettes); }34:Tb29,LabConvert = { // All taken from https://github.com/ibezkrovnyi/image-quantization const refX = 0.95047; // ref_X = 95.047 Observer= 2°, Illuminant= D65 const refY = 1.0; // ref_Y = 100.000 const refZ = 1.08883; // ref_Z = 108.883 const LAB_MIN = [0,-100,-100]; const LAB_MAX = [100,100,100]; function rgb2lab(rgb) { rgb = rgb.map(n => inRange0to255Rounded(n)); const xyz = rgb2xyz(rgb); return xyz2lab(xyz); } function lab2rgb(lab, scaled = true) { lab = lab.map((n, i) => { return Math.max(LAB_MIN[i], Math.min(LAB_MAX[i], n)); }); const xyz = lab2xyz(lab); return xyz2rgb(xyz, scaled); } function pivot_xyz2lab(n) { return n > 0.008856 ? Math.pow(n, (1 / 3)) : 7.787 * n + 16 / 116; } function xyz2lab([ x, y, z ]) { x = pivot_xyz2lab(x / refX); y = pivot_xyz2lab(y / refY); z = pivot_xyz2lab(z / refZ); if (116 * y - 16 < 0) throw new Error('Invalid input for XYZ'); return [ Math.max(0, 116 * y - 16), 500 * (x - y), 200 * (y - z), ]; } function rgb2xyz([ r, g, b ]) { // gamma correction, see https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation r = correctGamma_rgb2xyz(r / 255); g = correctGamma_rgb2xyz(g / 255); b = correctGamma_rgb2xyz(b / 255); // Observer. = 2°, Illuminant = D65 return [ r * 0.4124 + g * 0.3576 + b * 0.1805, r * 0.2126 + g * 0.7152 + b * 0.0722, r * 0.0193 + g * 0.1192 + b * 0.9505 ]; } function lab2xyz([ L, a, b ]) { const y = (L + 16) / 116; const x = a / 500 + y; const z = y - b / 200; return [ refX * pivot_lab2xyz(x), refY * pivot_lab2xyz(y), refZ * pivot_lab2xyz(z) ]; } function pivot_lab2xyz(n) { return n > 0.206893034 ? Math.pow(n, 3) : (n - 16 / 116) / 7.787; } function correctGamma_rgb2xyz(n) { return n > 0.04045 ? Math.pow(((n + 0.055) / 1.055), 2.4) : n / 12.92; } // // gamma correction, see https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation function correctGamma_xyz2rgb(n) { return n > 0.0031308 ? 1.055 * Math.pow(n, (1 / 2.4)) - 0.055 : 12.92 * n; } function xyz2rgb([x, y, z], scaled = true) { // Observer. = 2°, Illuminant = D65 const r = correctGamma_xyz2rgb(x * 3.2406 + y * -1.5372 + z * -0.4986); const g = correctGamma_xyz2rgb(x * -0.9689 + y * 1.8758 + z * 0.0415); const b = correctGamma_xyz2rgb(x * 0.0557 + y * -0.204 + z * 1.057); if (scaled) { return [ inRange0to255Rounded(r * 255), inRange0to255Rounded(g * 255), inRange0to255Rounded(b * 255) ]; } else { return [ r, g, b ]; } } function inRange0to255Rounded(n) { n = Math.round(n); if (n > 255) n = 255; else if (n < 0) n = 0; return n; } return { rgb2lab, lab2rgb }; }35:T904,drawSplineGradient = (colors, opts = {}) => { const { space = 'CIELAB', // 'RGB', 'LinearRGB', 'CIELAB', 'Jzazbz' or 'XYB' jitter = true, // using some fudged gaussian jittering closed = false, tension = 0.5, type = 'uniform' } = opts; let from = (a) => a; let to = (a) => a; let jitterInSpace = a => a.map(n => n + randomGaussian(0, 0.5)); if (space === 'LinearRGB') { from = rgb => rgb.map(n => sRGB.gammaToLinear(n / 255)); to = srgb => srgb.map(n => Math.round(255 * sRGB.linearToGamma(n))); jitterInSpace = a => a.map(n => n + randomGaussian(0, 0.002)); } else if (space === 'CIELAB') { from = rgb => LabConvert.rgb2lab(rgb); to = lab => LabConvert.lab2rgb(lab); jitterInSpace = lab => jitterLab(lab, 0.5); } else if (space === 'Oklab') { from = rgb => { const srgb = rgb.map(n => sRGB.gammaToLinear(n / 255)); const { L, a, b } = oklab.sRGBToOklab({ r: srgb[0], g: srgb[1], b: srgb[2] }); return [ L, a, b ]; }; to = ([ L, a, b ]) => { const rgb = oklab.oklabTosRGB({ L, a, b }); const srgb = [ rgb.r, rgb.g, rgb.b ]; return srgb.map(n => Math.round(255 * sRGB.linearToGamma(n))); }; jitterInSpace = (lab) => jitterLab(lab, 0.005); } else if (space === 'XYB') { from = rgb => XYBConvert.rgb2xyb(rgb); to = xyb => XYBConvert.xyb2rgb(xyb); jitterInSpace = xyb => xyb.map(n => n + randomGaussian(0, 0.0005)); } else if (space === 'Jzazbz') { const displayWhiteLuminance = 10000; // nits from = rgb => { const srgb = rgb.map(n => n / 255); const xyz_abs = srgb_to_xyz(srgb).map(n => n * displayWhiteLuminance / 100); return Jzazbz.forward(xyz_abs); }; to = Jab => { const xyz_abs = Jzazbz.inverse(Jab); const srgb = xyz_to_srgb(xyz_abs.map(n => n / displayWhiteLuminance * 100)); return srgb.map(n => Math.max(0, Math.min(255, Math.round(n * 255)))); }; jitterInSpace = Jab => Jab.map(n => n + randomGaussian(0, 0.0025)); } const points = colors.map(rgb => from(rgb)); const spline = CatmullRomSpline(points, { closed, tension, type }); return ramp(u => { const sample = spline.getPoint(u); let point = jitter ? jitterInSpace(sample) : sample; return to(point); }); };36:T44e,ramp = (interpolator) => { const { context, width, height } = createContext(512, 256); // Faster but doesn't allow per-pixel jittering // const imgCanvas = document.createElement('canvas'); // imgCanvas.width = samples.length; // imgCanvas.height = 4; // const imgCtx = imgCanvas.getContext('2d'); // for (let x = 0; x < samples.length; x++) { // let Lab = samples[x]; // let [ R, G, B ] = LabConvert.lab2rgb(Lab); // imgCtx.fillStyle = `rgb(${R}, ${G}, ${B})`; // imgCtx.fillRect(x, 0, 1, imgCanvas.height); // } // context.drawImage(imgCanvas, 0, 0, width, height); const img = context.createImageData(context.canvas.width, context.canvas.height); for (let x = 0; x < img.width; x++) { for (let y = 0; y < img.height; y++) { const u = x / (img.width - 1); const [ R, G, B ] = interpolator(u, x, img.width); const i = x + y * img.width; img.data[i * 4 + 0] = R; img.data[i * 4 + 1] = G; img.data[i * 4 + 2] = B; img.data[i * 4 + 3] = 255; } } context.putImageData(img, 0, 0); return context.canvas; };37:Tfc3,getCatmullRomPoint = { // Extracted from ThreeJS, modified to plain arrays /* Based on an optimized c++ solution in - http://stackoverflow.com/questions/9489736/catmull-rom-curve-with-no-cusps-and-no-self-intersections/ - http://ideone.com/NoEbVM This CubicPoly class could be used for reusing some variables and calculations, but for three.js curve use, it could be possible inlined and flatten into a single function call which can be placed in CurveUtils. */ function CubicPoly() { let c0 = 0, c1 = 0, c2 = 0, c3 = 0; /* * Compute coefficients for a cubic polynomial * p(s) = c0 + c1*s + c2*s^2 + c3*s^3 * such that * p(0) = x0, p(1) = x1 * and * p'(0) = t0, p'(1) = t1. */ function init(x0, x1, t0, t1) { c0 = x0; c1 = t0; c2 = -3 * x0 + 3 * x1 - 2 * t0 - t1; c3 = 2 * x0 - 2 * x1 + t0 + t1; } return { initCatmullRom: function (x0, x1, x2, x3, tension) { init(x1, x2, tension * (x2 - x0), tension * (x3 - x1)); }, initNonuniformCatmullRom: function (x0, x1, x2, x3, dt0, dt1, dt2) { // compute tangents when parameterized in [t1,t2] let t1 = (x1 - x0) / dt0 - (x2 - x0) / (dt0 + dt1) + (x2 - x1) / dt1; let t2 = (x2 - x1) / dt1 - (x3 - x1) / (dt1 + dt2) + (x3 - x2) / dt2; // rescale tangents for parametrization in [0,1] t1 *= dt1; t2 *= dt1; init(x1, x2, t1, t2); }, calc: function (t) { let t2 = t * t; let t3 = t2 * t; return c0 + c1 * t + c2 * t2 + c3 * t3; }, }; } const tmp1 = []; const tmp2 = []; const px = new CubicPoly(); const py = new CubicPoly(); const pz = new CubicPoly(); return function getCatmullRomPoint (opts, t, out) { opts = opts || {}; out = out || []; if (Array.isArray(opts)) { opts = { points: opts }; } const { closed = false, type = 'uniform', tension = 0.5 } = opts; const points = opts.points || []; const l = points.length; const p = (l - (closed ? 0 : 1)) * t; let intPoint = Math.floor(p); let weight = p - intPoint; if (closed) { intPoint += intPoint > 0 ? 0 : (Math.floor(Math.abs(intPoint) / l) + 1) * l; } else if (weight === 0 && intPoint === l - 1) { intPoint = l - 2; weight = 1; } let p0, p1, p2, p3; // 4 points if (closed || intPoint > 0) { p0 = points[(intPoint - 1) % l]; } else { // extrapolate first point vec3.sub(tmp1, points[0], points[1]); vec3.add(tmp1, tmp1, points[0]); p0 = tmp1; } p1 = points[intPoint % l]; p2 = points[(intPoint + 1) % l]; if (closed || intPoint + 2 < l) { p3 = points[(intPoint + 2) % l]; } else { // extrapolate last point vec3.sub(tmp2, points[l - 1], points[l - 2]) vec3.add(tmp2, tmp2, points[l - 1]); p3 = tmp2; } if (type === "centripetal" || type === "chordal") { // init Centripetal / Chordal Catmull-Rom let pow = type === "chordal" ? 0.5 : 0.25; let dt0 = Math.pow(vec3.distSq(p0, p1), pow); let dt1 = Math.pow(vec3.distSq(p1, p2), pow); let dt2 = Math.pow(vec3.distSq(p2, p3), pow); // safety check for repeated points if (dt1 < 1e-4) dt1 = 1.0; if (dt0 < 1e-4) dt0 = dt1; if (dt2 < 1e-4) dt2 = dt1; px.initNonuniformCatmullRom(p0[0], p1[0], p2[0], p3[0], dt0, dt1, dt2); py.initNonuniformCatmullRom(p0[1], p1[1], p2[1], p3[1], dt0, dt1, dt2); pz.initNonuniformCatmullRom(p0[2], p1[2], p2[2], p3[2], dt0, dt1, dt2); } else if (type === "catmullrom" || type === "uniform") { px.initCatmullRom(p0[0], p1[0], p2[0], p3[0], tension); py.initCatmullRom(p0[1], p1[1], p2[1], p3[1], tension); pz.initCatmullRom(p0[2], p1[2], p2[2], p3[2], tension); } out[0] = px.calc(weight); out[1] = py.calc(weight); out[2] = pz.calc(weight); return out; } }38:Tbcc,CatmullRomSpline = { function CatmullRomSpline (points = [], opts = {}) { const { closed = false, type = 'uniform', tension = 0.5, arcLengthDivisions = 200 } = opts; const spline = { closed, type, tension, points, arcLengthDivisions, getArcLengths, getPoints, getPoint, getSpacedPoint, getUtoTMapping }; return spline; function getPoints (n, spaced) { const arclengths = getArcLengths(); const paths = []; for (let i = 0; i < n; i++) { const t = spline.closed ? (i / n) : (i / (n - 1)); const p = spaced ? getSpacedPoint(t, null, arclengths) : getPoint(t); paths.push(p); } return paths; } function getPoint (t, out) { return getCatmullRomPoint(spline, t, out); } function getSpacedPoint (u, out, arcLengths) { let t = getUtoTMapping(u, null, arcLengths); return getPoint(t, out); } function getUtoTMapping (u, distance, arcLengths) { arcLengths = arcLengths || getArcLengths(); var i = 0, il = arcLengths.length; var targetArcLength; // The targeted u distance value to get if (distance != null) { targetArcLength = distance; } else { targetArcLength = u * arcLengths[il - 1]; } // binary search for the index with largest value smaller than target u distance var low = 0, high = il - 1, comparison; while (low <= high) { i = Math.floor(low + (high - low) / 2); // less likely to overflow, though probably not issue here, JS doesn't really have integers, all numbers are floats comparison = arcLengths[i] - targetArcLength; if (comparison < 0) { low = i + 1; } else if (comparison > 0) { high = i - 1; } else { high = i; break; // DONE } } i = high; if (arcLengths[i] === targetArcLength) { return i / (il - 1); } // we could get finer grain at lengths, or use simple interpolation between two points var lengthBefore = arcLengths[i]; var lengthAfter = arcLengths[i + 1]; var segmentLength = lengthAfter - lengthBefore; // determine where we are between the 'before' and 'after' points var segmentFraction = (targetArcLength - lengthBefore) / segmentLength; // add that fractional amount to t var t = (i + segmentFraction) / (il - 1); return t; } function getArcLengths (divisions) { divisions = divisions || spline.arcLengthDivisions; var out = []; var current; var last = getPoint(0); var p; var sum = 0; out.push(0); for (p = 1; p <= divisions; p++) { current = getPoint(p / divisions); sum += vec3.dist(current, last); out.push(sum); last = current; } return out; } } return CatmullRomSpline; }39:T1215,XYBConvert = { // Unscaled values for kOpsinAbsorbanceBias const kB0 = 0.96723368009523958; const kB1 = kB0; const kB2 = kB0; const kScale = 255.0; const kScaleR = 1.0; const kScaleG = 1.0; const kInvScaleR = 1.0; const kInvScaleG = 1.0; const kOpsinAbsorbanceBias = [ kB0 / kScale, kB1 / kScale, kB2 / kScale, ]; // Parameters for opsin absorbance. const kM02 = 0.078; const kM00 = 0.30; const kM01 = 1.0 - kM02 - kM00; const kM12 = 0.078; const kM10 = 0.23; const kM11 = 1.0 - kM12 - kM10; const kM20 = 0.24342268924547819; const kM21 = 0.20476744424496821; const kM22 = 1.0 - kM20 - kM21; const kOpsinAbsorbanceMatrix = [ kM00 / kScale, kM01 / kScale, kM02 / kScale, kM10 / kScale, kM11 / kScale, kM12 / kScale, kM20 / kScale, kM21 / kScale, kM22 / kScale, ]; // Must be the inverse matrix of kOpsinAbsorbanceMatrix and match the spec. const kDefaultInverseOpsinAbsorbanceMatrix = [ 2813.04956, -2516.07070, -41.9788641, -829.807582, 1126.78645, -41.9788641, -933.007078, 691.795377, 496.211701 ]; const kNegOpsinAbsorbanceBiasRGB = [ -kOpsinAbsorbanceBias[0], -kOpsinAbsorbanceBias[1], -kOpsinAbsorbanceBias[2], 255 ]; const kNegOpsinAbsorbanceBiasCbrt = kNegOpsinAbsorbanceBiasRGB.map(c => Math.cbrt(c)); const premul_absorb = new Array(12).fill(0); for (let i = 0; i < 9; i++) { premul_absorb[i] = kOpsinAbsorbanceMatrix[i]; } for (let i = 0; i < 3; i++) { const neg_bias_cbrt = -Math.cbrt(kOpsinAbsorbanceBias[i]); premul_absorb[9 + i] = neg_bias_cbrt; } function OpsinAbsorbance (r, g, b) { const bias = kOpsinAbsorbanceBias; const m = premul_absorb; const mixed0 = MulAdd(m[0], r, MulAdd(m[1], g, MulAdd(m[2], b, bias[0]))); const mixed1 = MulAdd(m[3], r, MulAdd(m[4], g, MulAdd(m[5], b, bias[1]))); const mixed2 = MulAdd(m[6], r, MulAdd(m[7], g, MulAdd(m[8], b, bias[2]))); return [ mixed0, mixed1, mixed2 ]; } function NegMulAdd (a, b, c) { return -a * b + c; } function MulAdd (a, b, c) { return a * b + c; } function rgbToXYB (rgb) { const [ lR, lG, lB ] = rgb.map(n => 255 * sRGB.gammaToLinear(n / 255)); let [ mixed0, mixed1, mixed2 ] = OpsinAbsorbance(lR, lG, lB); // mixed should be non-negative even for wide-gamut, so clamp to zero. mixed0 = Math.max(0, mixed0); mixed1 = Math.max(0, mixed1); mixed2 = Math.max(0, mixed2); // CubeRootAndAdd mixed0 = Math.cbrt(mixed0) + premul_absorb[9]; mixed1 = Math.cbrt(mixed1) + premul_absorb[10]; mixed2 = Math.cbrt(mixed2) + premul_absorb[11]; return LinearXybTransform(mixed0, mixed1, mixed2); } function LinearXybTransform (r, g, b) { return [ 0.5 * (r - g), 0.5 * (r + g), b ]; } function xybToRGB (xyb) { const [ opsin_x, opsin_y, opsin_b ] = xyb; const inv_scale_x = kInvScaleR; const inv_scale_y = kInvScaleG; const neg_bias_r = kNegOpsinAbsorbanceBiasRGB[0]; const neg_bias_g = kNegOpsinAbsorbanceBiasRGB[1]; const neg_bias_b = kNegOpsinAbsorbanceBiasRGB[2]; // Color space: XYB -> RGB let gamma_r = inv_scale_x * (opsin_y + opsin_x); let gamma_g = inv_scale_y * (opsin_y - opsin_x); let gamma_b = opsin_b; gamma_r -= kNegOpsinAbsorbanceBiasCbrt[0]; gamma_g -= kNegOpsinAbsorbanceBiasCbrt[1]; gamma_b -= kNegOpsinAbsorbanceBiasCbrt[2]; // Undo gamma compression: linear = gamma^3 for efficiency. const gamma_r2 = gamma_r * gamma_r; const gamma_g2 = gamma_g * gamma_g; const gamma_b2 = gamma_b * gamma_b; const mixed_r = MulAdd(gamma_r2, gamma_r, neg_bias_r); const mixed_g = MulAdd(gamma_g2, gamma_g, neg_bias_g); const mixed_b = MulAdd(gamma_b2, gamma_b, neg_bias_b); const inverse_matrix = kDefaultInverseOpsinAbsorbanceMatrix; // Unmix (multiply by 3x3 inverse_matrix) let linear_r, linear_g, linear_b; linear_r = inverse_matrix[0] * mixed_r; linear_g = inverse_matrix[3] * mixed_r; linear_b = inverse_matrix[6] * mixed_r; linear_r = MulAdd(inverse_matrix[1], mixed_g, linear_r); linear_g = MulAdd(inverse_matrix[4], mixed_g, linear_g); linear_b = MulAdd(inverse_matrix[7], mixed_g, linear_b); linear_r = MulAdd(inverse_matrix[2], mixed_b, linear_r); linear_g = MulAdd(inverse_matrix[5], mixed_b, linear_g); linear_b = MulAdd(inverse_matrix[8], mixed_b, linear_b); return [ linear_r, linear_g, linear_b ].map(n => Math.round(sRGB.linearToGamma(n / 255) * 255)); } return { rgb2xyb: rgbToXYB, xyb2rgb: xybToRGB }; }3a:T606,Jzazbz = { const {pow} = Math; const PQ = function perceptual_quantizer(X) { const XX = pow(X*1e-4, 0.1593017578125); return pow( (0.8359375 + 18.8515625*XX) / (1 + 18.6875*XX), 134.034375); }; const PQ_inv = function perceptual_quantizer_inverse(X) { const XX = pow(X, 7.460772656268214e-03); return 1e4 * pow( (0.8359375 - XX) / (18.6875*XX - 18.8515625), 6.277394636015326); }; return { forward([X, Y, Z]) { const Lp = PQ(0.674207838*X + 0.382799340*Y - 0.047570458*Z), Mp = PQ(0.149284160*X + 0.739628340*Y + 0.083327300*Z), Sp = PQ(0.070941080*X + 0.174768000*Y + 0.670970020*Z), Iz = 0.5 * (Lp + Mp), az = 3.524000*Lp - 4.066708*Mp + 0.542708*Sp, bz = 0.199076*Lp + 1.096799*Mp - 1.295875*Sp, Jz = (0.44 * Iz) / (1 - 0.56*Iz) - 1.6295499532821566e-11; return [Jz, az, bz]; }, inverse([Jz, az, bz]) { Jz = Jz + 1.6295499532821566e-11; const Iz = Jz / (0.44 + 0.56*Jz), L = PQ_inv(Iz + 1.386050432715393e-1*az + 5.804731615611869e-2*bz), M = PQ_inv(Iz - 1.386050432715393e-1*az - 5.804731615611891e-2*bz), S = PQ_inv(Iz - 9.601924202631895e-2*az - 8.118918960560390e-1*bz); return [ + 1.661373055774069e+00*L - 9.145230923250668e-01*M + 2.313620767186147e-01*S, - 3.250758740427037e-01*L + 1.571847038366936e+00*M - 2.182538318672940e-01*S, - 9.098281098284756e-02*L - 3.127282905230740e-01*M + 1.522766561305260e+00*S]; } }; }3b:T43d,oklab = { // Source: // https://www.npmjs.com/package/oklab return { oklabTosRGB: ({L, a, b}) => { const l = (L + a * +0.3963377774 + b * +0.2158037573) ** 3; const m = (L + a * -0.1055613458 + b * -0.0638541728) ** 3; const s = (L + a * -0.0894841775 + b * -1.2914855480) ** 3; return { r: l * +4.0767245293 + m * -3.3072168827 + s * +0.2307590544, g: l * -1.2681437731 + m * +2.6093323231 + s * -0.3411344290, b: l * -0.0041119885 + m * -0.7034763098 + s * +1.7068625689 }; }, sRGBToOklab: ({r, g, b}) => { const l = Math.cbrt(r * +0.4121656120 + g * +0.5362752080 + b * +0.0514575653); const m = Math.cbrt(r * +0.2118591070 + g * +0.6807189584 + b * +0.1074065790); const s = Math.cbrt(r * +0.0883097947 + g * +0.2818474174 + b * +0.6302613616); return { L: l * +0.2104542553 + m * +0.7936177850 + s * -0.0040720468, a: l * +1.9779984951 + m * -2.4285922050 + s * +0.4505937099, b: l * +0.0259040371 + m * +0.7827717662 + s * -0.8086757660 }; } } }3c:[] 30:{"id":"82696b485eff353e","slug":"perceptually-smooth-multi-color-linear-gradients","title":"Perceptually Smooth Multi-Color Linear Gradients","thumbnail":"a4a30a39701d260bf1e85176db2f49a4a5124a7876e81fffa9171b132ded9c71","access_level":"public","create_time":"$D2020-06-10T11:51:20.903Z","update_time":"$D2021-01-25T09:53:29.771Z","view_time":null,"first_public_time":"$D2020-06-10T17:21:45.318Z","fork":false,"stars":100,"starred":false,"owner":{"type":"team","id":"6a6d8c4395a66601","login":"mattdesl","name":"Matt DesLauriers","avatar_url":"https://avatars-next.observableusercontent.com/c56b913b57df4f51df47a2b37bed8bfe87f7641f0c679c55f4a45afa195173df","tier":"starter_2024"},"version":1106,"publish_version":1106,"role":null,"authored":false,"authors":[{"type":"individual","id":"e7d02dcc944c1115","login":"mattdesl","name":"Matt DesLauriers","avatar_url":"https://avatars-next.observableusercontent.com/c56b913b57df4f51df47a2b37bed8bfe87f7641f0c679c55f4a45afa195173df","tier":null}],"members":[{"type":"individual","id":"e7d02dcc944c1115","login":"mattdesl","name":"Matt DesLauriers","avatar_url":"https://avatars-next.observableusercontent.com/c56b913b57df4f51df47a2b37bed8bfe87f7641f0c679c55f4a45afa195173df","tier":null,"role":"editor"}],"comments":[{"id":"e23018a3defe93e5","reply_to_id":null,"content":"I'm not entirely sure because the names differ, but this is a centripetal Catmull-Rom spline, right? At least I presume the `tension` parameter is equivalent to alpha in the formulas in the links. I'm asking because supposedly centr. CR splines are the only version which will never have self-intersections or cusps, which seems to be relevant to what you're using them for.\n\nhttps://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline\nhttp://www.cemyuksel.com/research/catmullrom_param/","create_time":"$D2020-06-11T11:50:18.838Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"bb7591cc6e4ab319","reply_to_id":"e23018a3defe93e5","content":"The code for the splines is from Three.js CatmullRomCurve3, and includes centripetal, chordal, or 'catmullrom' (i.e. uniform?) type. The tension only applies to the latter type. Good to know about self-intersection, thanks!","create_time":"$D2020-06-11T12:06:22.721Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"e7d02dcc944c1115","login":"mattdesl","name":"Matt DesLauriers","avatar_url":"https://avatars-next.observableusercontent.com/c56b913b57df4f51df47a2b37bed8bfe87f7641f0c679c55f4a45afa195173df","tier":null}},{"id":"198c95c4ec24acce","reply_to_id":"e23018a3defe93e5","content":"Check! And the Catmull-Rom section of the wikipedia page on Cubic Hermite Splines suggests that \"uniform\" is indeed the default Catmull-Rom spline.\n\nhttps://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull%E2%80%93Rom_spline","create_time":"$D2020-06-11T13:15:20.287Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":37,"collection":null,"type":"notebook","body":{"title":"Perceptually Smooth Multi-Color Linear Gradients","cells":[{"id":0,"value":"md`# Perceptually Smooth Multi-Color Linear Gradients\n\n> ^{*The code for this notebook stemmed from a simple standalone demo [here](https://gist.github.com/mattdesl/2a7b2013492cbcbafc797d3f9164e92c).*}\n\nIf you try evenly spacing different colors across a typical linear gradient (e.g. made with Photoshop or HTML5 Canvas), you may find it leads to sharp or unusual transitions across the surface. Here's a typical linear gradient with Red, Green and Blue color stops:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":631,"value":"drawLinearGradient([ [ 255, 0, 0 ], [ 0, 255, 0 ], [ 0, 0, 255 ] ]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":637,"value":"md`Broadly speaking, there are two problems with this approach:\n\n1. RGB color space is not linear and not perceptually uniform, so if you interpolate through it you may sometimes find surprising colors appearing in your gradients, or dull browns/grays.\n2. Creating a path with linear interpolation leads to sharp joins at each data point.\n\nTo demonstrate the latter issue, see the graphic below, in which spline interpolation produces a much smoother curve through the 2D space.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":614,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":649,"value":"md`In order to solve these issues, we can:\n\n1. Use a more perceptually uniform color space such as [CIELAB (L\\\\*a\\\\*b\\\\*)](https://en.wikipedia.org/wiki/CIELAB_color_space).\n2. Use Catmull-Rom spline interpolation to smoothly transition from one 3D L\\\\*a\\\\*b\\\\* vector to the next.\n\nCatmull-Rom is selected as it means that the input color stops will also appear on the final curve that we trace through 3D color space.\n\nAfter these changes, the result of our algorithm looks like this with the same Red, Green, and Blue color stops:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":642,"value":"drawSplineGradient([ [ 255, 0, 0 ], [ 0, 255, 0 ], [ 0, 0, 255 ] ]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":662,"value":"md`# Exploring Palette Gradients\n\nIn order to visualize these improvements with real-world color palettes, you can click the button below to cycle through random 'beautiful' 3- and 4-color palettes.\n\nThis dataset has been taken from [dictionary-of-colour-combinations](https://github.com/mattdesl/dictionary-of-colour-combinations).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"drawRandomizeButton()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":344,"value":"{\n const { context, width, height } = createContext(512, 32);\n drawSamples(context, colors, 0, 0, width, height);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":229,"value":"md`Below is the standard linear gradient in RGB space:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"drawLinearGradient(colors);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":233,"value":"md`And below is the same set of color stops, but interpolated with a Catmull-Rom spline in ${getColorSpaceMarkdown(curColorSpace)} color space:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"drawSplineGradient(colors, {\n space: curColorSpace\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":852,"value":"viewof curColorSpace = {\n const input = html`\n \n `;\n const div = html`

`;\n const text = html`Color space to interpolate within:`;\n div.appendChild(text);\n div.appendChild(input);\n input.oninput = () => {\n div.value = input.value;\n console.log(div.value);\n };\n input.oninput();\n return div;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1016,"value":"md`**Update June 12:** After posting this notebook, I had some suggestions to try interpolating in other spaces such as Linear RGB, [Oklab](https://bottosson.github.io/posts/oklab/), [Jzazbz](https://observablehq.com/@jrus/jzazbz), and [XYB from JPEG XL](https://twitter.com/jyzg/status/1270840749253369856). You can use the above drop-down to change the color space used during interpolation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":678,"value":"md`# Bonus: Reduced Banding\n\nAnother (optional) feature in this notebook is a subtle jittering in L\\\\*a\\\\*b\\\\* space to reduce visual banding. Banding generally occurs because we are taking a vast range of colors and reducing them to discrete R, G, B bytes, i.e. represented by whole numbers within the range 0 and 255.\n\nA simple trick to reducing visual banding is to add noise, which can be done in the CIELAB space while we generate these per-pixel gradients.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":378,"value":"md`# Bonus: Augmenting a Color Palette\n\nAs a bonus, we can also use this approach to create new color schemes from small input palettes. This is done by sampling additional points along the 3D L\\\\*a\\\\*b\\\\* spline. The \\`widenPalette\\` takes a variable number of augmentations and ensures that the input colors are represented in the final expanded palette.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":405,"value":"drawRandomizeButton()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":420,"value":"{\n const { context, width, height } = createContext();\n drawSamples(context, colors, 0, 0, width, height);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":381,"value":"{\n const augmentations = 1;\n const { context, width, height } = createContext();\n const widePalette = widenPalette(colors, augmentations)\n drawSamples(context, widePalette, 0, 0, width, height);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":439,"value":"{\n const { context, width, height } = createContext();\n const widePalette = widenPalette(colors, augmentations)\n drawSamples(context, widePalette, 0, 0, width, height);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":737,"value":"viewof augmentations = {\n const input = html``;\n const div = html`

`;\n const text = html``;\n div.appendChild(input);\n div.appendChild(text);\n input.oninput = () => {\n div.value = parseFloat(input.value);\n text.textContent = `${div.value} augmentation(s)`;\n };\n input.oninput();\n return div;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1028,"value":"md`# Overshooting the RGB Gamut\n\nOne drawback worth noting with this approach is that curves can sometimes \"overshoot\" outside of the valid RGB gamut, and potentially produce unusual gradients. Something like [Monotonic interpolation](https://observablehq.com/@jviide/monotone-cubic-interpolation) has been suggested to resolve this, but it may not be trivial to translate this concept into an arbitrary 3D color space geometry.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":690,"value":"md`# Going Further\n\nThis code is relatively basic, doing everything per-pixel for the entire graphic. Instead, you could create a small (e.g. 4px high) texture and draw it scaled up vertically, which would be much faster to compute, although without the per-pixel CIELAB jittering. \n\nOr, this algorithm could be implemented in a shader to make it much more efficient to render and animate.\n\nIt would also be interesting to explore 3D surfaces (such as NURBS) to create gradients and perceptually smooth graphics that are not simple 2D ramps, or to test these ideas with other uniform color spaces such as [DIN99o](https://observablehq.com/@danburzo/the-din99o-color-space), IPT, [CAM16-UCS](https://observablehq.com/@jrus/cam16), or OSA-UCS.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"md`# Additional Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":712,"value":"createContext = (w = 512, h = 128) => {\n if (width < w) {\n let ratio = w / h;\n w = width;\n h = w / ratio;\n }\n const context = DOM.context2d(w, h);\n return { context, width: w, height: h };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":374,"value":"mutable colors = shuffle(palettes[Math.floor(Math.random() * palettes.length)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1022,"value":"getColorSpaceMarkdown = (id) => {\n return {\n CIELAB: 'L\\\\*a\\\\*b\\\\*',\n RGB: 'RGB',\n Oklab: 'Oklab',\n LinearRGB: 'Linear RGB',\n Jzazbz: 'J_za_zb_z',\n XYB: 'XYB'\n }[id];\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"drawLinearGradient = {\n const gammaConstant = 2.2;\n // To linear 0..1 sRGB\n const toLinear = n => Math.pow(n / 255, 1 / gammaConstant);\n // To gamma 0..255 RGB\n const toGamma = n => Math.max(0, Math.min(255, Math.round(Math.pow(n, gammaConstant) * 255)));\n\n return function drawLinearGradient (colors, linear = false) {\n const inputs = linear ? colors.map(rgb => rgb.map(toLinear)) : colors;\n return ramp(u => {\n const output = lerpFrames(inputs, u)\n return linear ? output.map(toGamma) : output;\n });\n }; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":599,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"vec3 = {\n function add (o, a, b) {\n o = o || [];\n o[0] = a[0] + b[0];\n o[1] = a[1] + b[1];\n o[2] = a[2] + b[2];\n return o;\n }\n\n function sub (o, a, b) {\n o = o || [];\n o[0] = a[0] - b[0];\n o[1] = a[1] - b[1];\n o[2] = a[2] - b[2];\n return o;\n }\n\n function distSq (a, b) {\n const dx = b[0] - a[0];\n const dy = b[1] - a[1];\n const dz = b[2] - a[2];\n return dx * dx + dy * dy + dz * dz;\n }\n\n function dist (a, b) {\n return Math.sqrt(distSq(a, b))\n }\n \n return { add, sub, distSq, dist };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"drawSamples = {\n return function drawSamples (context, samples, x, y, width, height) {\n x = x || 0;\n y = y || 0;\n samples.forEach((color, i, list) => {\n let w = 1 / samples.length * width;\n let h = height;\n context.fillStyle = `rgb(${color.join(', ')})`;\n context.fillRect(Math.floor(x), y, Math.ceil(w), h);\n x += w;\n });\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":285,"value":"randomGaussian = {\n // https://github.com/mattdesl/canvas-sketch-util/blob/master/random.js\n let _nextGaussian = null;\n let _hasNextGaussian = false;\n return function randomGaussian (mean = 0, standardDerivation = 1) {\n // https://github.com/openjdk-mirror/jdk7u-jdk/blob/f4d80957e89a19a29bb9f9807d2a28351ed7f7df/src/share/classes/java/util/Random.java#L496\n if (_hasNextGaussian) {\n _hasNextGaussian = false;\n var result = _nextGaussian;\n _nextGaussian = null;\n return mean + standardDerivation * result;\n } else {\n var v1 = 0;\n var v2 = 0;\n var s = 0;\n do {\n v1 = Math.random() * 2 - 1; // between -1 and 1\n v2 = Math.random() * 2 - 1; // between -1 and 1\n s = v1 * v1 + v2 * v2;\n } while (s >= 1 || s === 0);\n var multiplier = Math.sqrt(-2 * Math.log(s) / s);\n _nextGaussian = (v2 * multiplier);\n _hasNextGaussian = true;\n return mean + standardDerivation * (v1 * multiplier);\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":806,"value":"insideSphere = (radius = 1, out = []) => {\n let u = Math.random() * Math.PI * 2;\n let v = Math.random() * 2 - 1;\n let k = Math.random();\n let phi = u;\n let theta = Math.acos(v);\n let r = radius * Math.cbrt(k);\n out[0] = r * Math.sin(theta) * Math.cos(phi);\n out[1] = r * Math.sin(theta) * Math.sin(phi);\n out[2] = r * Math.cos(theta);\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":308,"value":"jitterLab = {\n return function jitterLab (lab, s = 1) {\n const lw = 100 / 200;\n const K = 2.624;\n const [ x, y, z ] = insideSphere(randomGaussian(0, s * K))\n const [ L, a, b ] = lab;\n return [ L + x * lw, a + y, b + z ];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":370,"value":"widenPalette = (rgbColors, augmentations, opt = {}) => {\n const labColors = rgbColors.map(rgb => LabConvert.rgb2lab(rgb));\n const spline = CatmullRomSpline(labColors, opt);\n const tvals = [];\n const samples = [];\n const len = labColors.length;\n for (let i = 0; i < len; i++) {\n let t = spline.closed ? (i / len) : (i / (len - 1));\n tvals.push(t);\n }\n const maxlen = spline.closed ? len : (len - 1);\n const interpolatedVals = [];\n for (let i = 0; i < maxlen; i++) {\n const t0 = tvals[i];\n const t1 = i == len - 1 ? 1 : tvals[(i + 1) % len];\n const line = augmentations + 2;\n interpolatedVals.push(t0);\n for (let k = 1; k < line - 1; k++) {\n const j = k / (line - 1);\n const nt = lerp(t0, t1, j);\n interpolatedVals.push(nt);\n }\n if (!spline.closed && i === maxlen - 1) interpolatedVals.push(t1);\n }\n return interpolatedVals.map(t => spline.getPoint(t))\n .map(lab => LabConvert.lab2rgb(lab));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":588,"value":"lerp = function lerp (min, max, t) {\n return min * (1 - t) + max * t;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"drawRandomizeButton = () => {\n const button = html``;\n let idx = 0;\n button.onclick = () => {\n mutable colors = shuffle(palettes[idx++ % palettes.length]);\n };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":557,"value":"shuffle = function shuffle (arr) {\n var rand;\n var tmp;\n var len = arr.length;\n var ret = arr.slice();\n while (len) {\n rand = Math.floor(Math.random() * len--);\n tmp = ret[len];\n ret[len] = ret[rand];\n ret[rand] = tmp;\n }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":597,"value":"lerpFrames = {\n function lerpArray (min, max, t, out) {\n out = out || [];\n if (min.length !== max.length) {\n throw new TypeError('min and max array are expected to have the same length');\n }\n for (var i = 0; i < min.length; i++) {\n out[i] = lerp(min[i], max[i], t);\n }\n return out;\n }\n\n return function lerpFrames (values, t, out) {\n var len = values.length - 1;\n var whole = t * len;\n var frame = Math.floor(whole);\n var fract = whole - frame;\n\n var nextFrame = Math.min(frame + 1, len);\n var a = values[frame % values.length];\n var b = values[nextFrame % values.length];\n if (typeof a === 'number' && typeof b === 'number') {\n return lerp(a, b, fract);\n } else if (Array.isArray(a) && Array.isArray(b)) {\n return lerpArray(a, b, fract, out);\n } else {\n throw new TypeError('Mismatch in value type of two array elements: ' + frame + ' and ' + nextFrame);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":811,"value":"sRGB = {\n function gammaToLinear (n) {\n return n <= 0.0404482362771082 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);\n }\n\n function linearToGamma (n) {\n return n <= 0.00313066844250063 ? n * 12.92 : 1.055 * Math.pow(n, 1 / 2.4) - 0.055;\n }\n \n return { gammaToLinear, linearToGamma };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":789,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":939,"value":"import {srgb_to_xyz, xyz_to_srgb} from \"@jrus/srgb\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":950,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1037,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 31:"$30:body"