31:T42e,canvasImage = (cbSimulation, width) => { const targetImage = image; const canvas = DOM.canvas( targetImage.naturalWidth, targetImage.naturalHeight ); const context = canvas.getContext("2d"); canvas.style = `width: ${width}px`; context.drawImage( targetImage, 0, 0, targetImage.naturalWidth, targetImage.naturalHeight ); const imageData = context.getImageData( 0, 0, targetImage.naturalWidth, targetImage.naturalHeight ); const chunkSize = Math.max(Math.floor(imageData.data.length / 5), 1); let chunkEnd = Math.min(0 + chunkSize, imageData.data.length); for (let i = 0; i < chunkEnd; i += 4) { chunkEnd = Math.min(i + chunkSize, imageData.data.length); const rgb = [ imageData.data[i], imageData.data[i + 1], imageData.data[i + 2] ]; let filteredRGB = cbSimulation(rgb); imageData.data[i] = filteredRGB[0]; imageData.data[i + 1] = filteredRGB[1]; imageData.data[i + 2] = filteredRGB[2]; } context.putImageData(imageData, 0, 0); return canvas; }32:T784,function blindMK(rgb, t) { const gamma = 2.2; const wx = 0.312713; const wy = 0.329016; const wz = 0.358271; const b = rgb[2]; const g = rgb[1]; const r = rgb[0]; const cr = powGammaLookup[r]; const cg = powGammaLookup[g]; const cb = powGammaLookup[b]; // rgb -> xyz const cx = 0.430574 * cr + 0.34155 * cg + 0.178325 * cb; const cy = 0.222015 * cr + 0.706655 * cg + 0.07133 * cb; const cz = 0.020183 * cr + 0.129553 * cg + 0.93918 * cb; const sum_xyz = cx + cy + cz; let cu = 0; let cv = 0; if (sum_xyz != 0) { cu = cx / sum_xyz; cv = cy / sum_xyz; } const nx = (wx * cy) / wy; const nz = (wz * cy) / wy; let clm; const dy = 0; if (cu < rBlind[t].cpu) { clm = (rBlind[t].cpv - cv) / (rBlind[t].cpu - cu); } else { clm = (cv - rBlind[t].cpv) / (cu - rBlind[t].cpu); } const clyi = cv - cu * clm; const du = (rBlind[t].ayi - clyi) / (clm - rBlind[t].am); const dv = clm * du + clyi; const sx = (du * cy) / dv; const sy = cy; const sz = ((1 - (du + dv)) * cy) / dv; // xzy->rgb let sr = 3.063218 * sx - 1.393325 * sy - 0.475802 * sz; let sg = -0.969243 * sx + 1.875966 * sy + 0.041555 * sz; let sb = 0.067871 * sx - 0.228834 * sy + 1.069251 * sz; const dx = nx - sx; const dz = nz - sz; // xzy->rgb const dr = 3.063218 * dx - 1.393325 * dy - 0.475802 * dz; const dg = -0.969243 * dx + 1.875966 * dy + 0.041555 * dz; const db = 0.067871 * dx - 0.228834 * dy + 1.069251 * dz; const adjr = dr ? ((sr < 0 ? 0 : 1) - sr) / dr : 0; const adjg = dg ? ((sg < 0 ? 0 : 1) - sg) / dg : 0; const adjb = db ? ((sb < 0 ? 0 : 1) - sb) / db : 0; const adjust = Math.max( adjr > 1 || adjr < 0 ? 0 : adjr, adjg > 1 || adjg < 0 ? 0 : adjg, adjb > 1 || adjb < 0 ? 0 : adjb ); sr = sr + adjust * dr; sg = sg + adjust * dg; sb = sb + adjust * db; return [inversePow(sr), inversePow(sg), inversePow(sb)]; }33:[{"id":"fe15d5679290046b45de0fcacfc8260ea09cdc745b6b60c6d252993c4d71c0329c002860e34ecfe116eddf9e4e3284ca57c0d158538c8f7b7d34fb65fcd089ef","href":"https://static.observableusercontent.com/files/fe15d5679290046b45de0fcacfc8260ea09cdc745b6b60c6d252993c4d71c0329c002860e34ecfe116eddf9e4e3284ca57c0d158538c8f7b7d34fb65fcd089ef","name":"4-adding-more-colors.png","type":"image/png","lastModified":1712828912680.796,"size":34939},{"id":"310d495f8eb4784d48844f436eb3f70d04486ec19d0c2b87f863be4788056be771b150e61887ab851449fa175fbfe1a760a22e5dae76f3e7d45f23dc0d09bf79","href":"https://static.observableusercontent.com/files/310d495f8eb4784d48844f436eb3f70d04486ec19d0c2b87f863be4788056be771b150e61887ab851449fa175fbfe1a760a22e5dae76f3e7d45f23dc0d09bf79","name":"TurboHeatmap.png","type":"image/png","lastModified":1673424073352.365,"size":453436}] 2f:{"title":"HCIRN Colorblind Simulation","cells":[{"id":0,"value":"# HCIRN Colorblind Simulation\nPorted from [hcirn_colorblind_simulation.js](https://github.com/MaPePeR/jsColorblindSimulator/blob/master/hcirn_colorblind_simulation.js).\n\n```\nThe Color Blind Simulation function is\ncopyright (c) 2000-2001 by Matthew Wickline and the\nHuman-Computer Interaction Resource Network ( http://hcirn.com/ ).\nIt is used with the permission of Matthew Wickline and HCIRN,\nand is freely available for non-commercial use. For commercial use, please\ncontact the Human-Computer Interaction Resource Network ( http://hcirn.com/ ).\n```","pinned":false,"hidden":false,"mode":"md"},{"id":197,"value":"_Upload image to compare across colorblindness simulations..._","pinned":false,"hidden":false,"mode":"md"},{"id":235,"value":"viewof defaultImg = Inputs.select([\"Map\", \"Scatter\"], {\n label: \"Select default image\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"viewof imagefile = Inputs.file({\n label: \"Image file\",\n accept: \".png,.jpg\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"

\n ${Object.keys(fBlind).map(d => html`

${d}

${canvasImage(fBlind[d],300)}

`)}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":222,"value":"### Original Image","pinned":false,"hidden":false,"mode":"md"},{"id":183,"value":"image = imagefile\n ? imagefile.image()\n : defaultImg === \"Scatter\"\n ? await FileAttachment(\"4-adding-more-colors.png\").image()\n : FileAttachment(\"TurboHeatmap.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"viewof sim = Inputs.select(Object.keys(fBlind), {\n label: \"Select simulation\",\n valueof: (d) => fBlind[d]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"canvasImage(sim)","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"fBlind = ({\n Normal: function (v) {\n return v;\n },\n Protanopia: function (v) {\n return blindMK(v, \"protan\");\n },\n Protanomaly: function (v) {\n return anomylize(v, blindMK(v, \"protan\"));\n },\n Deuteranopia: function (v) {\n return blindMK(v, \"deutan\");\n },\n Deuteranomaly: function (v) {\n return anomylize(v, blindMK(v, \"deutan\"));\n },\n Tritanopia: function (v) {\n return blindMK(v, \"tritan\");\n },\n Tritanomaly: function (v) {\n return anomylize(v, blindMK(v, \"tritan\"));\n },\n Achromatopsia: function (v) {\n return monochrome(v);\n },\n Achromatomaly: function (v) {\n return anomylize(v, monochrome(v));\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"rBlind = ({\n protan: { cpu: 0.735, cpv: 0.265, am: 1.273463, ayi: -0.073894 },\n deutan: { cpu: 1.14, cpv: -0.14, am: 0.968437, ayi: 0.003331 },\n tritan: { cpu: 0.171, cpv: -0.003, am: 0.062921, ayi: 0.292119 }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"powGammaLookup = {\n let _powGammaLookup = Array(256);\n for (let i = 0; i < 256; i++) {\n _powGammaLookup[i] = Math.pow(i / 255, 2.2);\n }\n return _powGammaLookup;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"function inversePow(v) {\n return 255 * (v <= 0 ? 0 : v >= 1 ? 1 : Math.pow(v, 1 / 2.2));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"function anomylize(a, b) {\n const v = 1.75;\n const d = v * 1 + 1;\n\n return [\n (v * b[0] + a[0] * 1) / d,\n (v * b[1] + a[1] * 1) / d,\n (v * b[2] + a[2] * 1) / d\n ];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"function monochrome(r) {\n const z = Math.round(r[0] * 0.299 + r[1] * 0.587 + r[2] * 0.114);\n return [z, z, z];\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}