2d:null 2e:["$","title",null,{"children":"Euclidian Distance in RGB Color | Luc Iyer | Observable"}] 33:Ta4a,spectrum = function(scale) { const dimensions = { width: width, height: 420 } const svg = d3.create("svg") .attr("viewBox", [0, 0, dimensions.width, dimensions.height]); let colorScale = d3.scaleSequential(d3["interpolate" + scale]) .domain([0, width]) let showSelection = function(x, y, h) { svg.append("g") .attr("class", "selection") .append("rect") .attr("x", x) .attr("y", y) .attr("height", h) .attr("width", 4) .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke", "#FFF"); } let spectrumClick = function (d) { let rgbScales = generateScales(d3.color(colorScale(d))); svg.selectAll(".selection").remove(); svg.selectAll(".subspectrum").remove(); showSelection(d-2, 0, dimensions.height/2); Object.keys(rgbScales).map(function(s, i) { var stripeHeight = 40; var colorArray = ['R', 'G', 'B']; var offset = i * (stripeHeight + 10); svg.append("g") .attr("class", "subspectrum") .selectAll(".bars") .data(d3.range(width - 100), function(d) { return d; }) .enter().append("rect") .attr("class", "bars") .attr("x", function(d, i) { return i + 50; }) .attr("y", dimensions.height/2 + (40 + offset)) .attr("height", stripeHeight) .attr("width", 1) .style("fill", function(d) { return rgbScales[s](d/width); }) svg.append("g") .attr("class"," spectrum-label-left") .append("text") .attr("text-anchor", "start") .attr("transform", d => `translate(0, ${dimensions.height/2 + (65 + offset)})`) .text(colorArray[i] + ' - ' + euclid_scaleRange) svg.append("g") .attr("class"," spectrum-label-right") .append("text") .attr("text-anchor", "end") .attr("transform", d => `translate(${dimensions.width}, ${dimensions.height/2 + (65 + offset)})`) .text(colorArray[i] + ' + ' + euclid_scaleRange); }); showSelection(width/2, dimensions.height/2 + 40, 140); } svg.append("g") .attr("class", "spectrum") .selectAll(".bars") .data(d3.range(width), function(d) { return d; }) .enter().append("rect") .attr("class", "bars") .attr("x", function(d, i) { return i; }) .attr("y", 0) .attr("height", dimensions.height/2) .attr("width", 1) .style("fill", function(d, i ) { return colorScale(d); }) .on("click", spectrumClick); return svg.node(); }34:[] 31:{"id":"79b699a85adabdf0","slug":"euclidian-distance-in-rgb-color-space","title":"Euclidian Distance in RGB Color","thumbnail":"fa1174adfea29e82b573652f77a58fb0670aae6285952f47159e2aad9f375151","access_level":"public","create_time":"$D2020-01-28T15:41:46.474Z","update_time":"$D2020-02-14T01:40:17.754Z","view_time":null,"first_public_time":"$D2020-01-31T15:34:24.927Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"4a11f53b6e79e15d","login":"luciyer","name":"Luc Iyer","avatar_url":"https://avatars-next.observableusercontent.com/12a0401692377e6f4616cade51744bbb6e99a4c9216533c99100291905568d25","tier":"starter_2024"},"version":1030,"publish_version":1030,"role":null,"authored":false,"authors":[{"type":"individual","id":"b4d77a79b064a6c9","login":"luciyer","name":"Luc Iyer","avatar_url":"https://avatars-next.observableusercontent.com/12a0401692377e6f4616cade51744bbb6e99a4c9216533c99100291905568d25","tier":null}],"members":[{"type":"individual","id":"b4d77a79b064a6c9","login":"luciyer","name":"Luc Iyer","avatar_url":"https://avatars-next.observableusercontent.com/12a0401692377e6f4616cade51744bbb6e99a4c9216533c99100291905568d25","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"3c295052d9793fec","slug":"miscellaneous","title":"Miscellaneous","owner":{"id":"4a11f53b6e79e15d","login":"luciyer","name":"Luc Iyer"}},"type":"notebook","body":{"title":"Euclidian Distance in RGB Color","cells":[{"id":0,"value":"md`# Euclidian Distance in RGB Color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`### Introduction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"md`Euclidean Distance in n-space is generally defined by the following formula, where **p** and **q** are cartesian coordinates.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"tex`{\\displaystyle {\\begin{aligned}d(\\mathbf {p} ,\\mathbf {q} )=d(\\mathbf {q} ,\\mathbf {p} )&={\\sqrt {(q_{1}-p_{1})^{2}+(q_{2}-p_{2})^{2}+\\cdots +(q_{n}-p_{n})^{2}}}\\\\[8pt]&={\\sqrt {\\sum _{i=1}^{n}(q_{i}-p_{i})^{2}}}.\\end{aligned}}}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`Since RGB Color space is has three dimensions (R, G, B), its Euclidean Distance would be defined as the following:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"tex`{\\displaystyle \\mathrm {distance_e} ={\\sqrt {(R_{2}-R_{1})^{2}+(G_{2}-G_{1})^{2}+(B_{2}-B_{1})^{2}}}}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`There are several other formulae which attempt to control for human perception of color/brightness. I will also implement the following, to be able to gauge how the values differ:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"tex`{\\displaystyle {\\bar {r}}={{C_{1,R}+C_{2,R}} \\over 2}}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"tex`{\\displaystyle \\mathrm {distance_w} = {\\sqrt {\\left({2+{{\\bar {r}} \\over {256}}}\\right)\\times \\Delta R^{2}+4\\times \\Delta G^{2}+\\left({2+{{255-{\\bar {r}}} \\over {256}}}\\right)\\times \\Delta B^{2}}}}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`As we know, R, G, and B can all take values between 0 and 255. So let's get a sense of the minimum and maximum distances.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`The minimum distance is naturally zero, the difference between two of the same color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`The maximum distance is where...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"tex`{\\displaystyle {\\begin{cases}{R_2 - R_1 = 255},\\\\{G_2 - G_1 = 255},\\\\{B_2 - B_1 = 255}\\end{cases}}}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"md`ie.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"tex`(R_1, G_1, B_1) = (0, 0, 0)\\\\(R_2, G_2, B_2) = (255, 255, 255)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`ie. _black_ and _white_. A lot of LaTeX to describe something that's very intuitive, no? Let's substitute and calculate.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"tex`{\\displaystyle \\mathrm {distance_{e}} ={\\sqrt {255^{2}+255^{2}+255^{2}}}}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"tex`{\\displaystyle \\mathrm {distance_{e}} \\approx {441.67}}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`Again, the numbers produced by either function are only useful in reference to our own personal perceptions of color. As we did above, let's check the distance of black and white, as a baseline.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"tex`{\\displaystyle {\\bar {r}}={{255} \\over 2} = 127.5}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"tex`{\\displaystyle \\mathrm {distance_w} = {\\sqrt {\\left({2+{{127.5} \\over {256}}}\\right)\\times 255^{2}+4\\times 255^{2}+\\left({2+{{255-{127.5}} \\over {256}}}\\right)\\times 255^{2}}}}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"tex`{\\displaystyle \\mathrm {distance_w} = {\\sqrt {\\left({{{1279} \\over {512}}}\\right)\\times 255^{2}+4\\times 255^{2}+\\left({{{1279} \\over {512}}}\\right)\\times 255^{2}}}}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"tex`{\\displaystyle \\mathrm {distance_w} = \\Delta C \\approx 764.83}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"md`### A Baseline and Some Tests`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"displayColors([0,0,0], [255,255,255])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"displayColors([0,0,255], [255,0,0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"md`Difference of 25:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"displayColors([200, 105, 200], [225, 105, 200])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"displayColors([175, 200, 100], [200, 200, 100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"md`The above is an interesting example where the the euclidean distance is the same, but the weighted distance varies, if only slightly. To my eye, both are only slightly different... the circle to the right appearing slightly brighter.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"md`---\n### The Spectrum`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"md`Let's automate this a bit, shall we? Let's select a color from a scale of our choosing, and interpolate three ramps ranging from plus/minus the value we choose below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"md`> \\\\> Adjust the value of \\`euclid_scaleRange\\` below and click a color on the spectrum.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"euclid_scaleRange = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"spectrum(\"Rainbow\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"getMinMax = function(n, range) {\n var min = n - range >= 0 ? n - range : 0;\n var max = n + range <= 255 ? n + range : 255;\n return [min, max];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"generateScales = function(colorObject) {\n \n var q = colorObject;\n \n var rRange = getMinMax(q.r, euclid_scaleRange);\n var gRange = getMinMax(q.g, euclid_scaleRange);\n var bRange = getMinMax(q.b, euclid_scaleRange);\n\n let colorRanges = {\n red: {\n min: [rRange[0], q.g, q.b],\n max: [rRange[1], q.g, q.b]\n },\n green: {\n min: [q.r, gRange[0], q.b],\n max: [q.r, gRange[1], q.b]\n },\n blue: {\n min: [q.r, q.g, bRange[0]],\n max: [q.r, q.g, bRange[1]] \n }\n }\n\n return {\n rScale: d3.interpolateRgb(rgbString(colorRanges.red.min), rgbString(colorRanges.red.max)),\n gScale: d3.interpolateRgb(rgbString(colorRanges.green.min), rgbString(colorRanges.green.max)),\n bScale: d3.interpolateRgb(rgbString(colorRanges.blue.min), rgbString(colorRanges.blue.max))\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`### Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"function rgbString (array) {\n return 'rgb(' + array.join(', ') + ')';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"euclideanColorDistance = function (rgb1, rgb2) {\n return Math.sqrt(\n Math.pow(rgb1[0] - rgb2[0], 2) + Math.pow(rgb1[1] - rgb2[1], 2) + Math.pow(rgb1[2] - rgb2[2], 2)\n ).toFixed(2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"weightedEuclideanColorDistance = function(rgb1, rgb2) {\n let redMean = (rgb1[0] + rgb2[0]) / 2;\n let r = Math.pow(rgb1[0] - rgb2[0], 2);\n let g = Math.pow(rgb1[1] - rgb2[1], 2);\n let b = Math.pow(rgb1[2] - rgb2[2], 2);\n return Math.sqrt(((2+(redMean/256)) * r) + (4*g) + ((2+((255-redMean)/256))*b)).toFixed(2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"displayColors = function (rgb1, rgb2) {\n return html`\n

\n ${rgbString(rgb1)}\n

\n ${euclideanColorDistance(rgb1, rgb2)} | ${weightedEuclideanColorDistance(rgb1, rgb2)}\n

\n ${rgbString(rgb2)}\n

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"