2c:null 2d:["$","title",null,{"children":"Daltonismo (explicación con orientación matemática) | Ernesto Laval | Observable"}] 32:T548,{ const greenNormalRGB = { r:0, g:255, b:0 }; const greenNormalxyY = convertRGB2xyY(greenNormalRGB); const greenDaltonicRGB = daltoniseRGB(greenNormalRGB) const greenDaltonicxyY= convertRGB2xyY(greenDaltonicRGB) const interpolateY = _.range(0,1,0.05).map(d => d*greenDaltonicxyY.Y) const colors = interpolateY.map(d => convertxyl2RGB({ x:greenDaltonicxyY.x, y:greenDaltonicxyY.y, l:d/100 })) const picked = 18; return html` Por ejemplo el color verde (x:0.3, y:0.6, Y:71.52)
Un daltónico con deutaronipía lo verá como un color con la cromaticidad (x:0.4466, y:0.4639)
Para distintas luminosidades, este color se ve así:
${colors.map(d => ` `).join("")}

Si se selecciona la luminosidad adecuada, los dos colores serán similares para un daltónico. En particular, los siguientes 2 colores yo los veo iguales:
` }33:T1ec2,{ const Y = estimateY(selectedColor.x, selectedColor.y); const rgb = convertxyl2RGB({x:selectedColor.x, y:selectedColor.y, l:Y}); const confLine = {m:null, yi:null} const pointBG = {x:null, y:null} const pointBR = {x:null, y:null} const pointRG = {x:null, y:null} // get confusion line through point params confLine.m = (selectedColor.y-confusionFocus.y) / (selectedColor.x-confusionFocus.x); confLine.yi = selectedColor.y - confLine.m * selectedColor.x; var cx = ( daltonicLine.yi - confLine.yi ) / ( confLine.m - daltonicLine.m ); var cy = daltonicLine.m * cx + daltonicLine.yi; // If point is out of bg line pointBG.x = (rgbTriangleSides.bg.yi - confLine.yi)/(confLine.m - rgbTriangleSides.bg.m); pointBG.y = pointBG.x*rgbTriangleSides.bg.m + rgbTriangleSides.bg.yi; pointBR.x = (rgbTriangleSides.br.yi - confLine.yi)/(confLine.m - rgbTriangleSides.br.m); pointBR.y = pointBR.x*rgbTriangleSides.br.m + rgbTriangleSides.br.yi; pointRG.x = (rgbTriangleSides.rg.yi - confLine.yi)/(confLine.m - rgbTriangleSides.rg.m); pointRG.y = pointRG.x*rgbTriangleSides.rg.m + rgbTriangleSides.rg.yi; const topPoint = (insideBGLine({x:pointRG.x ,y:pointRG.y}) && insideRGBTriangle({x:pointRG.x,y:pointRG.y})) ? pointRG : pointBG const bottomPoint = pointBR const interpolationInterval = _.range(0,1.1,0.1); const sample = interpolationInterval.map(factor => { const x = topPoint.x * factor + bottomPoint.x * (1-factor); const y = topPoint.y * factor + bottomPoint.y * (1-factor); return ({ x: x, y: y, posH : factor }) }) const lumRange = _.range(0,105,5); const size = width/3.2; const fontSize = size/40; const matrix = sample.map(d => { return lumRange.map(Y => { debugger; const estY = estimateY(d.x, d.y); const validY = estY >= Y/100; const rgb= validY ? convertxyl2RGB({x:d.x, y:d.y, l:Y/100}) : {r:255, g:255, b:255} const rgbDaltonic= validY ? convertxyl2RGB({x:cx, y:cy, l:Y/100}) : {r:255, g:255, b:255} return { x: d.x, y: d.y, Y: Y, posH:d.posH, r:rgb && rgb.r, g:rgb && rgb.g, b:rgb && rgb.b, rd:rgbDaltonic && rgbDaltonic.r, gd:rgbDaltonic && rgbDaltonic.g, bd:rgbDaltonic && rgbDaltonic.b } }) }) const daltonicPoints = lumRange.map(Y => { const estY = estimateY(cx, cy); const validY = estY >= Y/100; const rgb= validY ? convertxyl2RGB({x:cx, y:cy, l:Y/100}) : {r:255, g:255, b:255} return { x: cx, y: cy, Y: Y, r:rgb && rgb.r, g:rgb && rgb.g, b:rgb && rgb.b } }) if ( !insideRGBTriangle({x:cx,y:cy})) { cx = (rgbTriangleSides.rg.yi - daltonicLine.yi)/(daltonicLine.m - rgbTriangleSides.rg.m); cy = cx*rgbTriangleSides.rg.m + rgbTriangleSides.rg.yi; } const colors = sample.map(d => { const Y = estimateY(d.x, d.y); const rgb = convertxyl2RGB({x:d.x, y:d.y, l:Y}); return rgb }) // return matrix const scaleH = d3.scaleLinear().range([0,size]).domain([1,0]); const scaleV = d3.scaleLinear().range([size,0]).domain([0,100]); const cellWidth = size/interpolationInterval.length; const cellHeight = size/lumRange.length; return html`

Colores que ve un no-daltónico y un daltónico en la misma línea de confusión
mover el mouse o tocar el teléfono en un color del triangulo de arriba

${matrix.map(r => ` ${r.map(c => `

`).join("")}

x:${d3.format(".2")(r[0].x)}

y:${d3.format(".2")(r[0].y)}

`)} ${lumRange.map(Y => `

Y ${d3.format(".0f")(Y)}

`).join("")}

No daltónico

${matrix.map(r => ` ${r.map(c => `

`).join("")}

x:${d3.format(".2")(r[0].x)}

y:${d3.format(".2")(r[0].y)}

`)} ${lumRange.map(Y => ` `).join("")}

Daltónico

` }34:T54e,daltonicCanvas = { const _width = xySettings.width; const _height = xySettings.height; const originalCanvas = d3.select(rgbTriangle).select("canvas").node(); const newCanvas = html`

` const canvasD3 = d3.select(newCanvas).select("canvas") .attr("width", _width) .attr("height", _height) .style("top",margin.top) .style("left",margin.left) const newCtx = canvasD3.node().getContext('2d'); newCtx.drawImage(originalCanvas, 0, 0); const newImageData = newCtx.getImageData(0, 0, _width, _height); const data = newImageData.data; for (var i = 0; i < data.length; i += 4) { var pixelPos = Math.floor(i / 4); var pixelY = Math.floor(pixelPos / _width); var pixelX = pixelPos % _width; const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; const a = data[i + 3]; const cc = new colorConverter(); if (a == 255) { try { const newRGB = daltoniseRGB({r:r,g:g,b:b}) data[i] = newRGB.r; // red data[i +1] = newRGB.g; // red data[i +2] = newRGB.b; // red } catch(err) { console.log({r:r,g:g,b:b}); console.error(err); } } } newCtx.putImageData(newImageData, 0, 0); return newCanvas }35:T3b1c,/* Creates a color visualisation for the CIE 1931 xy color space Draws the color gamut (horseshoe shape with colors defined by a single wavelength Draws rgb (srgb) triangle with colors visible in a RGB monitor */ class xyColorVis { constructor(elem, options) { this.container = d3.select(elem); debugger; this.margin = margin; this.width = options.width || width - this.margin.left-this.margin.right; this.height = options.height || width - this.margin.left-this.margin.right; this.xRange = options.xRange || [0, 1.5]; this.yRange = options.yRange || [-0.5, 1]; this.fullGamut = options.fullGamut; this.showAuxLines = options.showAuxLines; this.hideAuxLines = options.hideAuxLines; this.hideDaltonicReference = options.hideDaltonicReference; this.svgMainContainer = d3.select(elem).selectAll("svg") .data([null]) .join("svg") .attr("width", this.width+this.margin.left+this.margin.right) .attr("height", this.height+this.margin.top+this.margin.bottom) this.svgContainer = this.svgMainContainer.selectAll("g") .data([null]) .join("g") .attr("transform", "translate(" + this.margin.left + "," + this.margin.top+ ")"); var myself = this; this.xScale = d3.scaleLinear().domain(this.xRange); this.yScale = d3.scaleLinear().domain(this.yRange); this.xScale.range([0,this.width]); this.yScale.range([this.height,0]); this.axisY = d3.axisLeft(this.yScale); this.axisX = d3.axisBottom(this.xScale); this.specCurve = d3.line() .curve(d3.curveBasis) .x( d => this.xScale(d.x)) .y( d => this.yScale(d.y)); this.svgContainer .classed("container", true) this.svgContainer.selectAll("path.spectrum") .data([null]) .join("path") .attr("class", "spectrum") this.svgContainer.selectAll("g.spectrum") .data([null]) .join("g") .attr("class","spectrum") this.colorConverter = new colorConverter(); this.neutralLine = { x1 : 0, y1 : daltonicLine.yi, x2 : 1, y2 : 1 * daltonicLine.m + daltonicLine.yi, } this.neutralLineCoords = { x1 : this.xScale(0), y1 : this.yScale(daltonicLine.yi), x2 : this.xScale(1), y2 : this.yScale(1 * daltonicLine.m + daltonicLine.yi), } this.neutralLineDist = Math.sqrt(Math.pow(this.neutralLineCoords.y2-this.neutralLineCoords.y1, 2) + Math.pow(this.neutralLineCoords.x2-this.neutralLineCoords.x1, 2)) const slope=(this.neutralLineCoords.y2-this.neutralLineCoords.y1) / (this.neutralLineCoords.x2-this.neutralLineCoords.x1) this.neutralLineAngle = 180*Math.atan(slope)/Math.PI; this.svgContainer.selectAll("line.neutral") .data([null]) .join("line") .attr("class","neutral") .attr("stroke-width",5) .attr("stroke", "yellow") .attr("opacity",0) .attr("opacity", this.hideAuxLines ? 0 : 0) this.svgContainer.selectAll("g.confusion.lines") .data([null]) .join("g") .attr("class","confusion lines") .attr("opacity", this.hideAuxLines ? 0 : 1) this.svgContainer.selectAll("g.wavelength.labels") .data([null]) .join("g") .attr("class","wavelength labels"); this.svgContainer.selectAll("g.focus") .data([null]) .join("g") .attr("class","focus") .append("circle") .attr("r",5) .attr("opacity", this.hideAuxLines ? 0 : 1) this.svgContainer.selectAll("g.blind.rect") .data([null]) .join("g") .attr("class","blind rect") .attr("transform", `translate(${this.neutralLineCoords.x1}, ${this.neutralLineCoords.y1}) rotate(${this.neutralLineAngle})`) .attr("opacity", this.hideAuxLines || this.hideDaltonicReference ? 0 : 1) this.svgContainer.select("g.blind.rect").selectAll("rect") .data([null]) .join("rect") .attr("width", this.neutralLineDist) .attr("height", 10) .attr("y", -5) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1) this.svgContainer.append("g") .attr("class","axis Y"); this.svgContainer.append("g") .attr("class","axis X") .attr("transform",`translate(0, ${this.height})`); this.svgContainer.selectAll("text.labelX") .data([null]) .join("text") .attr("class","labelX") .attr("transform",`translate(${this.width}, ${this.height})`) .attr("dy",-5) .attr("font-size",12) .style("text-anchor", "end") .text("x"); this.svgContainer.selectAll("text.labelY") .data([null]) .join("text") .attr("class","labelY") .attr("y",0) .attr("x",0 ) .attr("dy",10) .attr("dx", 5 ) .attr("font-size",12) .style("text-anchor", "start") .text("y"); //var neutralBwl = 465; //var neutralGwl = 575; //var neutralRwl = 590; /* this.neutralLineGCoords = { x1 : this.wavelength2xy(neutralBwl).x, y1 : this.wavelength2xy(neutralBwl).y, x2 : this.wavelength2xy(neutralGwl).x, y2 : this.wavelength2xy(neutralGwl).y, } this.neutralLineGCoords.m = (this.neutralLineGCoords.y2 - this.neutralLineGCoords.y1) / (this.neutralLineGCoords.x2 - this.neutralLineGCoords.x1) this.neutralLineGCoords.yi = this.neutralLineGCoords.y1 - this.neutralLineGCoords.m * this.neutralLineGCoords.x1 this.neutralLineRCoords = { x1 : this.wavelength2xy(neutralBwl).x, y1 : this.wavelength2xy(neutralBwl).y, x2 : this.wavelength2xy(neutralRwl).x, y2 : this.wavelength2xy(neutralRwl).y, } this.neutralLineRCoords.m = (this.neutralLineRCoords.y2 - this.neutralLineRCoords.y1) / (this.neutralLineRCoords.x2 - this.neutralLineRCoords.x1) this.neutralLineRCoords.yi = this.neutralLineRCoords.y1 - this.neutralLineRCoords.m * this.neutralLineRCoords.x1 */ /* this.svgContainer.append("g") .attr("class","neutral line g") .append("line") this.svgContainer.append("g") .attr("class","neutral line r") .append("line") this.svgContainer.append("g") .attr("class","simulated g") .append("circle") .attr("r",5) this.svgContainer.append("g") .attr("class","simulated r") .append("circle") .attr("r",5) this.svgContainer.append("g") .attr("class","new simulation") .append("circle") .attr("r",10) */ var drag = d3.drag() .on("drag", d => { this.onDragConfusionPoint() }) .on("end", d => { this.onEndDragConfusionPoint() }) //var confusionFocus = getConfusionFocus(); this.svgContainer.append("g") .attr("class","confusion point") .attr("opacity", this.hideAuxLines ? 0 : 1) .call(drag) .attr("transform", "translate("+this.xScale(confusionFocus.x)+","+this.yScale(confusionFocus.y)+")") .append("circle") .attr("r",10) this.svgContainer .on("mousemove", function(event) { myself.onMouseMove(event); }) this.fullGamut ? this.duplicateFullGamut(elem) : this.duplicateRGBTriangle(elem); this.render(); } duplicateRGBTriangle(elem) { const originalCanvas = d3.select(rgbTriangle).select("canvas").node(); //create a new canvas this.canvas = d3.select(elem).select('canvas').node(); const context = this.canvas.getContext('2d'); //set dimensions this.canvas.width = originalCanvas.width; this.canvas.height = originalCanvas.height; //apply the old canvas to the new one context.drawImage(originalCanvas, 0, 0); } duplicateFullGamut(elem) { const originalCanvas = d3.select(colorGamut).select("canvas").node(); //create a new canvas this.canvas = d3.select(elem).select('canvas').node(); const context = this.canvas.getContext('2d'); //set dimensions this.canvas.width = originalCanvas.width; this.canvas.height = originalCanvas.height; //apply the old canvas to the new one context.drawImage(originalCanvas, 0, 0); } render(data) { this.xScale.range([0,this.width]); this.yScale.range([this.height,0]); this.svgContainer.select(".axis.Y") .call(this.axisY) this.svgContainer.select(".axis.X") .call(this.axisX) var confusionWL = [475,480,482.5,485,487.5,490,492.5,495,497.5,500,502.5,505,507.5,510,512.5,515,520,540, 560, 580]; this.confusionLinesData = _.map(confusionWL, wl=> { var coords = this.wavelength2xy(wl); return {x1:coords.x, y1:coords.y, x2: confusionFocus.x, y2:confusionFocus.y}; }) /* this.svgContainer.select(".neutral.line.g line") .attr("x1", this.xScale(this.neutralLineGCoords.x1)) .attr("x2", this.xScale(this.neutralLineGCoords.x2)) .attr("y1", this.yScale(this.neutralLineGCoords.y1)) .attr("y2", this.yScale(this.neutralLineGCoords.y2)) this.svgContainer.select(".neutral.line.r line") .attr("x1", this.xScale(this.neutralLineRCoords.x1)) .attr("x2", this.xScale(this.neutralLineRCoords.x2)) .attr("y1", this.yScale(this.neutralLineRCoords.y1)) .attr("y2", this.yScale(this.neutralLineRCoords.y2)) */ var waveLengthLabelsData = [460,470,480,490,500,510,520,530,540,550,560,570,580,590,600,610,620,630]; var waveLengthLabels = this.svgContainer.select("g.wavelength.labels").selectAll("text") .data(waveLengthLabelsData); waveLengthLabels.enter() .append("text") .attr("x", d => this.xScale(this.wavelength2xy(d).x)) .attr("y", d => this.yScale(this.wavelength2xy(d).y)) .attr("text-anchor", d=> d < 520 ? "end" : "start") .attr("dy", d=> d < 520 ? 5 : -5) .attr("dx", d=> d < 520 ? -5 : 5) .text(d=>d) var confLines = this.svgContainer.select("g.confusion.lines").selectAll("line.confusion") .data(this.confusionLinesData); confLines = confLines.enter() .append("line") .attr("class", "confusion") .merge(confLines); confLines .attr("x1", d => this.xScale(d.x1)) .attr("x2", d => this.xScale(d.x2)) .attr("y1", d => this.yScale(d.y1)) .attr("y2", d => this.yScale(d.y2)) this.svgContainer.select("line.neutral") .attr("x1", this.xScale(this.neutralLine.x1)) .attr("x2", this.xScale(this.neutralLine.x2)) .attr("y1", this.yScale(this.neutralLine.y1)) .attr("y2", this.yScale(this.neutralLine.y2)) this.svgContainer.select("path.spectrum") .datum(_.slice(getSpectrumCoordinates(),0,70)) .attr("class", "spectrum") .style("stroke", "grey") .attr("d", this.specCurve); var specVis = this.svgContainer.select("g.spectrum") .selectAll("circle") .data(getSpectrumCoordinates()); specVis.enter() .append("circle") .attr("cx", d => this.xScale(d.x)) .attr("cy", d => this.yScale(d.y)) .attr("fill", d=> { return "grey" }) .attr("r", 2) } onEndDragConfusionPoint() { mutable confusionFocus = { x: this.xScale.invert(d3.event.x), y: this.yScale.invert(d3.event.y) } } onDragConfusionPoint(d) { this.svgContainer.select("g.confusion.point") .attr("transform", "translate("+d3.event.x+","+d3.event.y+")") changeConfusionFocus({ x: this.xScale.invert(d3.event.x), y: this.yScale.invert(d3.event.y) }) this.render(); } onMouseMove(event) { debugger; var posX = d3.pointer(event,this.svgContainer.node())[0]; var posY = d3.pointer(event,this.svgContainer.node())[1]; this.svgContainer.select("g.focus") .attr("transform", "translate("+posX+","+posY+")") var ciex = this.xScale.invert(posX); var ciey = this.yScale.invert(posY); mutable selectedColor = {x : ciex, y: ciey} var simulatedPoints = this.daltonise({x:ciex, y:ciey}); this.svgContainer.select("g.simulated.g") .attr("transform", "translate("+this.xScale(simulatedPoints.gx)+","+this.yScale(simulatedPoints.gy)+")") this.svgContainer.select("g.simulated.r") .attr("transform", "translate("+this.xScale(simulatedPoints.rx)+","+this.yScale(simulatedPoints.ry)+")") var distFocus2Target = this.distanceToconfusionfocus({ x: ciex, y: ciey}); var distSimG2Target = this.distanceToconfusionfocus({ x: simulatedPoints.gx, y: simulatedPoints.gy}); var distSimR2Target = this.distanceToconfusionfocus({ x: simulatedPoints.rx, y: simulatedPoints.ry}); var daltonicPoint; if (distFocus2Target < distSimR2Target) { daltonicPoint = { x: simulatedPoints.rx, y: simulatedPoints.ry} } else if (distFocus2Target > distSimG2Target) { daltonicPoint = { x: simulatedPoints.gx, y: simulatedPoints.gy} } else { daltonicPoint = { x: ciex, y: ciey} } var Y = estimateY(ciex, ciey); var rgbtarget = convertXYZtoRGB({X : ciex * Y / ciey, Y : Y, Z : (1-ciex-ciey) * Y / ciey }); } daltoniseRGB(rgb) { if (rgb) { var xyY = this.canvas.convertRGB2xyY({r:rgb.r, g:rgb.g, b:rgb.b}); var simulatedPoints = this.daltonise({x:xyY.x, y:xyY.y}); var Y = estimateY(simulatedPoints.cx, simulatedPoints.cy); var rgbSimulated = this.canvas.convertXY2RGB({x:simulatedPoints.cx,y:simulatedPoints.cy,l:Y}) return { r:rgbSimulated.r, g:rgbSimulated.g, b:rgbSimulated.b } } else { return { r:0, g:0, b:0 } } } distanceToconfusionfocus(p1) { var confusionFocus = getConfusionFocus(); return Math.sqrt(Math.pow((p1.x-confusionFocus.x),2) + Math.pow((p1.y-confusionFocus.y),2)); } // transforms an xyPoint into the visible point by a deutan daltonise(xyPoint) { var confusionFocus = getConfusionFocus(); //var daltonicLine = getDaltonicLine(); // get confusion line through point params var clm = (xyPoint.y-confusionFocus.y) / (xyPoint.x-confusionFocus.x); var clyi = xyPoint.y - clm * xyPoint.x; // get params for neutralG & neutralR lines var ngm = this.neutralLineGCoords.m; var ngyi = this.neutralLineGCoords.yi; var nrm = this.neutralLineRCoords.m; var nryi = this.neutralLineRCoords.yi; // get intersection points (candidates for simulation) var gx = ( ngyi - clyi ) / ( clm - ngm ); var gy = ngm * gx + ngyi; var rx = ( nryi - clyi ) / ( clm - nrm ); var ry = nrm * rx + nryi; var cx = ( daltonicLine.yi - clyi ) / ( clm - daltonicLine.m ); var cy = daltonicLine.m * cx + daltonicLine.yi; return { "gx" : gx, "gy": gy, "rx" : rx, "ry" : ry , "cx" : cx, "cy" : cy } } daltoniseImageData(imageData) { var data = imageData.data; for (var i = 0; i < data.length; i += 4) { var rgbOrig = { R : data[i], G : data[i + 1], B : data[i + 2], } var rgbDalton = blind(rgbOrig, "deutan", true); data[i] = rgbDalton.R; // red data[i + 1] = rgbDalton.G; // green data[i + 2] = rgbDalton.B; // blue } return imageData; } /** * Returns xy coordinates for a given spectrum wavelength */ wavelength2xy(wl) { // We have data for wl every 5 nm // we will have to interpolate between adjacent values var index = ( wl-380 ) / 5; var integerPart = Math.floor(index); var decimalPart = index -integerPart; var spectrumCoords = getSpectrumCoordinates(); var coordsL = spectrumCoords[integerPart]; var coordsH = spectrumCoords[integerPart+1]; var x = coordsL.x + ( coordsH.x - coordsL.x ) * decimalPart; var y = coordsL.y + ( coordsH.y - coordsL.y ) * decimalPart; return { "x" : x, "y" : y } } }36:T544,function convertxyl2RGBXtended(options) { var x = options.x; var y = options.y; var l = options.l; var cc = new colorConverter(); var rawRGB = cc._xyYtoRGB([x,y,l]) //rawRGB[0] = rawRGB[0] > 0 ? rawRGB[0] : 0; //rawRGB[1] = rawRGB[1] > 0 ? rawRGB[1] : 0; //rawRGB[2] = rawRGB[2] > 0 ? rawRGB[2] : 0; debugger; if (rawRGB[0] >= 0 && rawRGB[1] >= 0 && rawRGB[2] >= 0) { debugger; rawRGB[0] = rawRGB[0] < 255 ? rawRGB[0] : 255; rawRGB[1] = rawRGB[1] < 255 ? rawRGB[1] : 255; rawRGB[2] = rawRGB[2] < 255 ? rawRGB[2] : 255; var tmp_rgb = d3.rgb(rawRGB[0],rawRGB[1],rawRGB[2]); //var rgb = d3.rgb(hslColor) var rgb = tmp_rgb; if (rgb.r > 255 || rgb.g >255 || rgb.b > 255) { console.log("ANOMALY", rgb); } return {r:rgb.r, g:rgb.g, b:rgb.b} } else { const nearPoint = pointInTriangle({x:x, y:y}) rawRGB = cc._xyYtoRGB([nearPoint.x,nearPoint.y,l]) rawRGB[0] = rawRGB[0] > 0 ? rawRGB[0] : 0; rawRGB[1] = rawRGB[1] > 0 ? rawRGB[1] : 0; rawRGB[2] = rawRGB[2] > 0 ? rawRGB[2] : 0; rawRGB[0] = rawRGB[0] < 255 ? rawRGB[0] : 255; rawRGB[1] = rawRGB[1] < 255 ? rawRGB[1] : 255; rawRGB[2] = rawRGB[2] < 255 ? rawRGB[2] : 255; let rgb = d3.rgb(rawRGB[0],rawRGB[1],rawRGB[2]); return {r:rgb.r, g:rgb.g, b:rgb.b} } }37:T436,// transforms an xyPoint into the visible point by a colorblind /* Requires externally defined confusionFocus: Point ( {x:number, y:number} ) focus of confusion lines daltonicLine: Line ( {m:number, yi:number} ) which defines colors seen by color blinds */ function daltonise(xyPoint) { // get confusion line through point params var clm = (xyPoint.y-confusionFocus.y) / (xyPoint.x-confusionFocus.x); var clyi = xyPoint.y - clm * xyPoint.x; var cx = ( daltonicLine.yi - clyi ) / ( clm - daltonicLine.m ); var cy = daltonicLine.m * cx + daltonicLine.yi; // If point is out of bg line if ( !insideBGLine({x:cx,y:cy}) && !insideRGBTriangle({x:cx,y:cy})) { cx = (rgbTriangleSides.bg.yi - daltonicLine.yi)/(daltonicLine.m - rgbTriangleSides.bg.m); cy = cx*rgbTriangleSides.bg.m + rgbTriangleSides.bg.yi; } else if ( !insideRGBTriangle({x:cx,y:cy})) { cx = (rgbTriangleSides.rg.yi - daltonicLine.yi)/(daltonicLine.m - rgbTriangleSides.rg.m); cy = cx*rgbTriangleSides.rg.m + rgbTriangleSides.rg.yi; } return { "cx" : cx, "cy" : cy } } 38:T456,html` `39:Ta1f,/* Creates a canvas for the xy color space (where each xy coordinate represents a color The xy pspace will have coordinates defined by ranges in xyRanges xyRanges = ({ x : [0,1.5], y : [1,-0.5] }) And pixel dimensions defined by xyDomensions xyDimensions = ({ width: width - margin.left - margin.right, height: height }) Inside the canvas, the RBG triangle (according to sRGB standard) will be displayed) */ function rgbCanvas(options, fullGamut) { debugger; const width = options.width; const height = options.height; const fixedY = options.fixedY || null; const canvas = html`

` const specCurve = d3.line() .curve(d3.curveBasis) .x( d => d.x) .y( d => d.y) const spectrumCoordinates = _.slice(getSpectrumCoordinates(), 0, 70); spectrumCoordinates.push(spectrumCoordinates[0]); const spectrumPath = specCurve(spectrumCoordinates); function visiblePoint(point) { return pointInPolygon.isInside([point.x,point.y],spectrumPath); } var ctx = canvas.getContext('2d'); var myImageData = ctx.createImageData(width, height); var data = myImageData.data; // Scales to transform from pyixel x/y coordinates to [0,1] valuesB var wToxScale = d3.scaleLinear().range(options.xRange).domain([0,width]); var hToyScale = d3.scaleLinear().range(options.yRange).domain([height,0]); // Traverese every pixel in the array (each pixel uses 4 array positions for R, G, B & Alplha) for (var i = 0; i < data.length; i += 4) { var pixelPos = Math.floor(i / 4); var pixelY = Math.floor(pixelPos / width); var pixelX = pixelPos % width; //Calculate cie x, y coordinates in the canvas var cie_x = wToxScale(pixelX); var cie_y = hToyScale(pixelY); var Y = fixedY || estimateY(cie_x, cie_y); var rgb = fullGamut ? convertxyl2RGBXtended({x:cie_x,y:cie_y,l:Y}) : convertxyl2RGB({x:cie_x,y:cie_y,l:Y}) const hidePoint = fullGamut ? !visiblePoint({x:cie_x, y: cie_y}) : false; if (rgb && cie_x >= 0 && cie_y >= 0 && cie_x <= 1 && cie_y <= 1 && !hidePoint) { //console.log(cie_x,cie_y,Y, rgb) data[i] = Math.floor(rgb.r); // red data[i + 1] = Math.floor(rgb.g); // green data[i + 2] = Math.floor(rgb.b); // blue data[i + 3] = 255; } else { data[i] = 255; // red data[i + 1] = 255; // green data[i + 2] = 255; // blue data[i + 3] = 0; } } ctx.putImageData(myImageData, 0, 0); return canvas }3a:[{"id":"19923200175f0ff9383ab07f40dd2d08639c670bdcd0a28c8adf7c34de245d1a091de9a542b129081bd49e5ea4492c87a13c11a6404ac39047fe0a28af1b5b63","href":"https://static.observableusercontent.com/files/19923200175f0ff9383ab07f40dd2d08639c670bdcd0a28c8adf7c34de245d1a091de9a542b129081bd49e5ea4492c87a13c11a6404ac39047fe0a28af1b5b63","name":"cie1931Gamut.png","type":"image/png","lastModified":1578315477282.194,"size":258159},{"id":"ef07d65c889aa0a9d3d2ba09aedee7c8d0e3915845b7891e52154603f08deae11a51c8cbd2f658662a5cce0d1b379b1613f56966d10947f50d74ca1feb0440c7","href":"https://static.observableusercontent.com/files/ef07d65c889aa0a9d3d2ba09aedee7c8d0e3915845b7891e52154603f08deae11a51c8cbd2f658662a5cce0d1b379b1613f56966d10947f50d74ca1feb0440c7","name":"normal0.png","type":"image/png","lastModified":1578361911827.112,"size":409907},{"id":"b215c8faf21da626c12d61497cf529b6e392b26e1878e2cdfc68fef3834c08aa616d523ac2924ade124faae98f3a911572269463db8feae412798a66fed46c70","href":"https://static.observableusercontent.com/files/b215c8faf21da626c12d61497cf529b6e392b26e1878e2cdfc68fef3834c08aa616d523ac2924ade124faae98f3a911572269463db8feae412798a66fed46c70","name":"deuteranopia0.png","type":"image/png","lastModified":1578361920024.24,"size":383166},{"id":"6570b2f6c34792a1fc934f173db26976aa3961239be1fe4a09eaf43da1046d24e105788eaf1066820067db6af5e0848c6d61f5236372ac52ec5537950c68ba33","href":"https://static.observableusercontent.com/files/6570b2f6c34792a1fc934f173db26976aa3961239be1fe4a09eaf43da1046d24e105788eaf1066820067db6af5e0848c6d61f5236372ac52ec5537950c68ba33","name":"protanConfusionLines.png","type":"image/png","lastModified":1578400572445.522,"size":406315},{"id":"7d6f54c15c4059f3920b0dc7bb2bad1b44be189c5471e7ccfb1ed3b2e4e2d891d845b05b9963a30156ad70fe1aa3463462826f44166b84fdc02a558f8864b999","href":"https://static.observableusercontent.com/files/7d6f54c15c4059f3920b0dc7bb2bad1b44be189c5471e7ccfb1ed3b2e4e2d891d845b05b9963a30156ad70fe1aa3463462826f44166b84fdc02a558f8864b999","name":"tritanConfusionLines.png","type":"image/png","lastModified":1578400573508.44,"size":345426},{"id":"868104c34fb1df8769bc8dc9ed954a450501951e843562beb294b81072bfa2835ba33d318eb315eed07e0363d09145b6cc68a7b9ec6c9f9b565232953d654fe9","href":"https://static.observableusercontent.com/files/868104c34fb1df8769bc8dc9ed954a450501951e843562beb294b81072bfa2835ba33d318eb315eed07e0363d09145b6cc68a7b9ec6c9f9b565232953d654fe9","name":"tritanTriangle.png","type":"image/png","lastModified":1578407151724.287,"size":142307},{"id":"12d9aa7d936840c5309ec93a5385833b71efcf03156ad585d85be77190fd4ad452bf520828292cb66ca71fb4511bd83e861a3ecff98483fdf7ef37af0427d26e","href":"https://static.observableusercontent.com/files/12d9aa7d936840c5309ec93a5385833b71efcf03156ad585d85be77190fd4ad452bf520828292cb66ca71fb4511bd83e861a3ecff98483fdf7ef37af0427d26e","name":"normalTriangle.png","type":"image/png","lastModified":1578407153758.455,"size":160707},{"id":"d57c9d5a4abc0670806f6ec26ca10276b8e796602a563e422b58941a6bcf2495c367e942df3468b47f3dc40e114e41639b1a70228eccb1bff1a8e47bd6e364a0","href":"https://static.observableusercontent.com/files/d57c9d5a4abc0670806f6ec26ca10276b8e796602a563e422b58941a6bcf2495c367e942df3468b47f3dc40e114e41639b1a70228eccb1bff1a8e47bd6e364a0","name":"protanTriangle.png","type":"image/png","lastModified":1578407153689.884,"size":146692},{"id":"fbc376052d06ade42e8e06fad9d6fb37c6e2cde5d7efdccf601240b2e71109a8affb3e8b89ad81654653cf725b0c55140c424d12fccbe1930271a7f977d9eb14","href":"https://static.observableusercontent.com/files/fbc376052d06ade42e8e06fad9d6fb37c6e2cde5d7efdccf601240b2e71109a8affb3e8b89ad81654653cf725b0c55140c424d12fccbe1930271a7f977d9eb14","name":"deutanTriangle.png","type":"image/png","lastModified":1578407153492.555,"size":121508},{"id":"6d19c10d9b5911419da34a1b32b0e2f77763c53bca7ea1b0abe0808486d9079576fa8d759a0b4e50ca05f626e2298098eed24605f630a952da8eb47ba6482cf9","href":"https://static.observableusercontent.com/files/6d19c10d9b5911419da34a1b32b0e2f77763c53bca7ea1b0abe0808486d9079576fa8d759a0b4e50ca05f626e2298098eed24605f630a952da8eb47ba6482cf9","name":"gamut 0.3,0.6.png","type":"image/png","lastModified":1578590807413.834,"size":801258},{"id":"ab3b5664ae5751bef571080350b4d3634ed2837a5b7db7c655c53307ddca4226c37382b74d79fdb0cdedf68f0b7a494a327d0ba4a9fe38614623a733e15d6320","href":"https://static.observableusercontent.com/files/ab3b5664ae5751bef571080350b4d3634ed2837a5b7db7c655c53307ddca4226c37382b74d79fdb0cdedf68f0b7a494a327d0ba4a9fe38614623a733e15d6320","name":"Líneas & punto de confusión.png","type":"image/png","lastModified":1578595689460.873,"size":410274},{"id":"93e22cfb0e3fe3aa24b5685245976ab41df22c6d4085a2370c434a0a6f63cdb1adb3e081d577cd2aa5900b9412f300b0d3bab2cc8e984db74edaff7aad81a0c2","href":"https://static.observableusercontent.com/files/93e22cfb0e3fe3aa24b5685245976ab41df22c6d4085a2370c434a0a6f63cdb1adb3e081d577cd2aa5900b9412f300b0d3bab2cc8e984db74edaff7aad81a0c2","name":"deutanConfusionLines (1).png","type":"image/png","lastModified":1578611191993.179,"size":600986},{"id":"181d2f565513e86eeb6bbce41aa2bf743f9380dc5407fe74853db18a3ecd7e7ef26821b7e537738e87daf15d4a0165643642297032c1ac09c0424b71a5aae62f","href":"https://static.observableusercontent.com/files/181d2f565513e86eeb6bbce41aa2bf743f9380dc5407fe74853db18a3ecd7e7ef26821b7e537738e87daf15d4a0165643642297032c1ac09c0424b71a5aae62f","name":"WhatsApp Image 2020-01-09 at 00.33.29.jpeg","type":"image/jpeg","lastModified":1578610523709.611,"size":133241}] 30:{"id":"07b41dc7b75c1755","slug":"daltonismo-explicacion-con-orientacion-matematica","title":"Daltonismo (explicación con orientación matemática)","thumbnail":"3009d7ff2065f4b10e56b79fae90628ba4aa0e468a987bba2ec8298275e98bd2","access_level":"public","create_time":"$D2020-01-01T21:57:58.321Z","update_time":"$D2020-10-17T18:55:42.481Z","view_time":null,"first_public_time":"$D2020-01-07T19:18:42.073Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"0843f5dc42ca68a0","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":"starter_2024"},"version":2135,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e04cd7b5f4351ae9","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":null}],"members":[{"type":"individual","id":"e04cd7b5f4351ae9","login":"elaval","name":"Ernesto Laval","avatar_url":"https://avatars-next.observableusercontent.com/089f0414fc9025dadb05cc06d7a406bc9be10093187c46729cb4ba3a4098dc30","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Daltonismo (explicación con orientación matemática)","cells":[{"id":0,"value":"md`# Daltonismo (explicación con orientación matemática)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1247,"value":"md`Una de las experiencas frecuentes de los daltónicos es que la gente no daltónica te pregunta \"De que color es esto? (apuntando a un chaleco verde). Es muy difícil explicar cómo vemos los daltónicos, y es muy difícil para nosotros entender qué es lo que no vemos. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1253,"value":"md`Las nuevas tecnologías permiten hacer simulaciones de \"visión daltónica\", y transformar imágenes en como las ve un daltónico. Cuando le muestro a un no daltónico que las dos imágenes de abajo las veo iguales, y percibo su sorpresa, me doy cuenta de lo diferente que es el mundo que vemos. Me dicen que mi mundo es en \"sepia\", pero para mi siempre ha sido bastante colorido (y lo que yo entiendo como sepia para mi es bastante descolorido)`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1257,"value":"html`\n

\n
Fuente: http://www.colourblindawareness.org/colour-blindness/causes-of-colour-blindness/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1278,"value":"md`Hace tiempo que he querido \"entender\" qué colores vemos los daltónicos y, como además siempre me ha gustado la Matemática, me puse a estudiar modelos matemáticos de colores (y del daltonismo).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"md`# Espacio de color CIE 1931\nEn 1931 la Comisión Internacional de Iluminación - Comission Internationale de l´Éclairage - (CIE) creó una especificación que permite representar el espectro de colores visibles en un plano de coordenadas xy: el espacio de colores XYZ de CIE`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"md`Cada color, se puede representar por coordenadas X, Y, Z.\n\nPor ejemplo el *rojo* tiene parámetros (X:41.24, \nY:21.26, \nZ: 1.93)\n\nEl valor Y representa la luminoscidad o brillo, en valores que van de 0 a 100\n\nLos valores X, Y, Z (EN MAYUSCULA) se pueden normalizar en parámetros x,y,z (en minúscula) que tienen valores en el rango [0,1] cada uno.\n\nx = X / (X + Y + Z)\n\ny = Y / (X + Y + Z)\n\nz = 1 - x - z\n\nCada color tiene 2 componentes: la cromaticidad y la luminosidad\n\nLa luminosidad se representa por Y como mencionamos arriba y la cromaticidad se puede representar por 2 parámetros _x_ e _y_ que corresponde a los valores normalizados de XYZ\n\nDe esta manera podemos representar cualquier color como un valor (x,y) que va de 0 a 1 más un valor de luminosidad Y que va de 0 a 100.\n\nLa siguiente figura representa cromaticidad de los colores en el espacio de colores visibles \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"html`\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"md`La frontera exterior de esta figura en forma de \"lengua\" es el nicho espectral (o monocromático) que representa los colores formados por luz que tiene una única longitud de onda (ej 600nm). Una única longitud de onda es equivalente a una frecuencia pura (ej 600nm equivalen a una onda con frecuencia 499.7 terahertz).\n\nPero la mayoría de los colores que vemos no corresponden a una única frecuencia, sino que a una combinación de colores con distinta frecuencia. Estos son todos los colores que se encuentran al interior de la figura de espectro de colores CIE 1931.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1308,"value":"md`En la figura anterior te darás cuenta que no están todos los colores que puedes ver. Eso es porque muestra los colores con una única luminosidad (para efectos de ilustración, a cada valor x,y se le asignó la máxima luminosidad posible).\n\nEsta es una representación en 2 dimensiones de un espacio en 3 dimensiones. Falta variar la luminosidad (Y) para generar distintos colores de una misma cromaticidad.\n\nPor ejemplo para la cromaticidad x=0.3, y=0.6, se pueden asociar los siguientes colores para diferentes valores de Y:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1312,"value":"\n{\n const x = 0.3\n const y = 0.6\n //return convertxyl2RGB({x:x, y:y, l:1})\n const YValues = [0,10,20,30,40,50,60,70,80,90,100]\n const data = YValues.map(d => {\n const rgb = convertxyl2RGB({x:x, y:y, l:d/100})\n return {Y:d, r:rgb.r, g:rgb.g, b:rgb.b}\n })\n //return convertRGB2xyY({r:0, g:255, b:0})\n \n return html`

\n ${_.reverse(data).map(d => `\n
x:${x} y:${y} Y:${d.Y} \n `)}\n

\n\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1351,"value":"md`# Triángulo de colores RGB\n\nSi bien el espectro de colores visibles está al interior de la \"lengua\" en el espacio de colores CIE 1931, los colores que producen los dispositivos electrónicos son la combinación de 3 colores: Rojo (red), Verde (green) y Azul (blue) comunmente conocido como RGB.\n\nLa combinación de estos colores se encuentra en un espacio de colores más reducido que el de todos los colores visibles, representado como un triángulo con los colores RGB en sus vértices.\n\nExisten distintas convenciones para elegir los colores RGB de los vértices.\n\nsRGB (standard Red Green Blue) fue creada en forma cooperativa por HP y Microsoft en 1996 y define. \n\nR (x:0.64, y:0.33)\n\nG (x:0.30, y: 0.6)\n\nB (x:0.15, y:0.06)\n\nY se define el punto blanco como (x:0.3127, y:0.3290)\n` \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1358,"value":"elTriangle = {\n const el = html`\n

\n\n \n

\n`\n\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1371,"value":"md`Los colores fuera del triángulo no se pueden representar en dispositivos electrónicos (de hecho en la primera imagen del espacio de colores CIE 1931 - más arriba - se usaron colores aproximados para los colores fuera del triangulo)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1374,"value":"md`# ¿Qué colores confunde un daltónico?\nLo primero es que no todos los daltónicos ven de la misma manera. El daltonismo se divide en tipos según los colores con los que tienen dificultades de percepción: __deutanopía__, __protanopía__ y __tritanopía__.\n\n## Líneas de confusión\nPara los daltónicos hay colores que se ven iguales, siendo que para los no daltónicos pueden ser muy distintos. Diversos estudios han identificado que los colores que confunde un daltónico están en una misma línea del espacio de colores CIE 1931, líneas que se conocen como líneas de confusión.\n\nTodas las líneas de confusión para un mismo daltónico se intersectan en un único punto, llamado punto de confusión (co-punctal point).\n\nRef: https://www.color-blindness.com/2007/01/23/confusion-lines-of-the-cie-1931-color-space/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1953,"value":"html`\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1959,"value":"md`Para alguién con __deuteranopía__, el punto de confusión es x:1.4, y:-0.4 (nótese que este es un punto que está fuera del espacio de colores visibles, pero matemáticamente es un punto válido en el sistema de coordenadas)\n\nEn teoría, todos los colores alineados en una misma línea de confusión, los daltónicos los ven con la misma cromaticidad (equivalen a un mismo punto con coordenadas x,y). Los daltónicos creen ver colores diferentes en esa línea, pero en realidad ven el mismo color con distinta luminosidad.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1966,"value":"md`La siguiente figura ilustra los colores que se encuentran en una misma línea de confusión. Para cada color (punto x,y) se presenta también un gráfico con distintos niveles de luminosidad.\n\nEn gráfico adyacente se simula como vería un daltónico esos mismos colores. Aunque les soprenda a los no daltónicos, los daltónicos, no vemos diferencia en esos dos gráficos. No veo el rojo como ustedes lo conocen y tampoco veo el verde como ustedes lo conocen. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1962,"value":"html`\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1976,"value":"md`Para poder simular los colores que ven los daltónicos, se puede definir una línea de simulación que corta las líneas de confusión. Los puntos de intersección entre la línea de simulación y las líneas de confusión son los colores que ven los daltónicos.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"html`\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1399,"value":"md`En la figura anterior se muestran la líneas de confusión junto a una línea de simulación (representada como un rectángulo transparente) que sería - en teoría - el espacio de colores que ve una persona con deuteranopía (para cualquiér color del triángulo, el color que ve un daltónico es el que corresponde a la intersección de la respectiva línea de confusión y la línea de simulación)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1408,"value":"md`__Los colores que ve un daltónico son sólo los que se encuentran en la línea de simulación - al interior de este rectángulo delgado!!__\n\nEsto ilustra cuan estrecho es el espacio de colores que vemos los daltónicos en comparación con los no-daltónicos. Nosotros vemos una línea y el resto ve el triángulo completo.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1407,"value":"md`Para personas con __protanopía__, se define un distinto punto de confusión (x:0.7465, y:0.2535) y una nueva línea que representa los colores que se ven.\n\nPara algunos colores rojos y verdes las líneas de confusión de la deuteranopía son muy similares a los de la protanopía. Las personas con deuteranopía o protanopía pueden ver el azul y el amarillo, pero tienen dificultades para ver los rojos y verdes, por eso suelen llamarse daltónicos con dificultades para ver colores \"rojo y verde\".\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"md`Para personas con __tritanopía__ (una proporción muy menor de los daltónicos), el punto de confusión es (x: 0.1748, y: 0) y las líneas de confusión son muy diferentes a las de la deuteranopía y protanopía. \n\nLas personas con tritanopía no pueden ver el azul.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"md`## Simulación de colores que ven los daltónicos\nUtilizando las líneas de confusión y la línea de simulación de colores que ven los daltónicos, es posible transformar un color y simular cómo lo vería un daltónico.\n\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1469,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1573,"value":"md`La siguiente es una simulación de los colores en el triangulo RGB para distintos tipos de daltonismo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1444,"value":"html`\n

\nNormal\n

\nDeuteranopía\n

\nProtanopía\n

\nTritanopía\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2059,"value":"md`Los triángulos de arriba parecerán muy distintos para un no daltónico. Pero para la mayoría de los daltónicos (con detueranopía y protanopía) __los 3 primeros son muy parecidos__`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1719,"value":"md`# Herramienta interactiva de simulación (en desarrollo)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1941,"value":"md`Mueva el mouse (o toque la pantalla en un dispositivo móvil) sobre un color para seleccionar la respectiva línea de confusión. En el diagrama de más abajo se muestran los colores que ve un no daltónico y un daltónico a lo largo de esa línea.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":" viewof defaultColorBlindType = select({\n title: \"Tipo de daltonismo\",\n description: \"Seleccionar un tipo para definir punto de confusión y líneas de simulación.\",\n options: [\n { label: \"Deuteranopía\", value: \"deutan\" },\n { label: \"Protanopía\", value: \"protan\" },\n { label: \"Tritanopía\", value: \"tritan\" }\n ],\n value: \"deutan\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"el = {\n const el = html`\n

\n\n \n

\n`\n\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1770,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1726,"value":"md`## Fin del documento`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1709,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1596,"value":"md`# Componentes auxiliares`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"value":"mutable selectedColor = ({x:null, y: null})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1601,"value":"md`### Canvas con triangulo RGB visto por un daltónico`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1610,"value":"md`### Colorvis - Clase que genera visualización de espacio de color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1625,"value":"md`### Código que gatilla la generación de visualizaciones de espacio de colores en elementos del DOM`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"runVisualization = {\n el;\n \n new xyColorVis(elTriangle, {\n width : xySettings.width,\n height : xySettings.height,\n xRange : xySettings.xRange, //[0,1], //xySettings.xRange,\n yRange : xySettings.yRange, //[0,1], //xySettings.yRange,\n fullGamut : false,\n hideAuxLines : true,\n hideDaltonicReference:true\n })\n \n \n \n new xyColorVis(el, {\n width : xySettings.width,\n height : xySettings.height,\n xRange : xySettings.xRange,\n yRange : xySettings.yRange,\n fullGamut : false,\n hideAuxLines : false,\n hideDaltonicReference:true\n\n\n })\n \n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1685,"value":"md`### pointInTriangle - función que chequea si un punto (x,y) está al interior del triángulo RGB`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"function pointInTriangle(point) {\n \n const whitePoint = convertRGB2xyY({r:255, g:255, b:255});\n \n const intersectBG = lineIntersection.findSegmentIntersection([point, whitePoint, rgbTriangleSides.green_xy, rgbTriangleSides.blue_xy])\n const intersectRG = lineIntersection.findSegmentIntersection([point, whitePoint, rgbTriangleSides.green_xy, rgbTriangleSides.red_xy])\n const intersectBR = lineIntersection.findSegmentIntersection([point, whitePoint, rgbTriangleSides.blue_xy, rgbTriangleSides.red_xy])\n \n return intersectBG || intersectBR || intersectRG;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1676,"value":"md`### convertxly2RGBXtended - convierte un color con coordenadas xyl (l = Y/100) en un color RGB. Si el punto está fuera del triángulo RGB, se aproxima al color que esté en un borde del triángulo en la línea que une el punto con el punto blanco`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1673,"value":"md`### daltoniseRGB - Función que tranforma color RGB en color visto por un daltónico`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"//transforms an rgb color ({r:number, g:number, b:nuumber}) into the equivalen rgb color seen by a color blind \nfunction daltoniseRGB(rgb) {\n if (rgb) {\n var xyY = (rgb) && convertRGB2xyY({r:rgb.r, g:rgb.g, b:rgb.b});\n\n var simulatedPoints = daltonise({x:xyY.x, y:xyY.y});\n var rgbSimulated = convertxyl2RGB({x:simulatedPoints.cx,y:simulatedPoints.cy,l:xyY.Y/100})\n \n\n return rgbSimulated && { r:rgbSimulated.r, g:rgbSimulated.g, b:rgbSimulated.b } || { r:255, g:255, b:255 }\n } else {\n return { r:255, g:255, b:255 }\n }\n\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1667,"value":"md`### daltonise - Función que transforma punto (x,y) en punto equivalente visto por un daltónico`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1658,"value":"md`### Estilos CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1638,"value":"md`### rgbTriangle - Elemento que contiene canvas con triangulo RGB (se utiliza como base para otras visualizaciones)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"rgbTriangle = {\n const el = html`

`\n debugger;\n const canvas = rgbCanvas({height:xySettings.height,\n width: xySettings.width,\n xRange: xySettings.xRange,\n yRange: xySettings.yRange,\n fixedY: null})\n el.appendChild(canvas)\n\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1758,"value":"colorGamut = {\n const el = html`

`\n debugger;\n //const canvas = rgbCanvas(xySettings)\n //el.appendChild(canvas)\n\n //return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1361,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"mutable cp = ({})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1646,"value":"md`## daltonicLine - parámetros de la línea que define colores vistos por daltónicos para el tipo de daltonismo seleccionado`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"daltonicLine = {\n\tvar params = {\n\t\t\"m\": \tblinder[defaultColorBlindType].m,\n\t\t\"yi\": \tblinder[defaultColorBlindType].yi,\n\t}\n\n\treturn params;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1655,"value":"md`## xySettings - configuraciónde dimensionsiones y márgenes utilizadas en visualizaciones`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"margin = ({\n left : 50,\n right : 20,\n top : 20,\n bottom : 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"xySettings = {\n const xRange= [0,1.5]\n const yRange= [-0.5,1]\n const w = width*1.0 - margin.left - margin.right;\n const h = w * (xRange[1]-xRange[0]) / (yRange[1]-yRange[0]) \n \n return {\n width: w,\n height: h,\n xRange: xRange,\n yRange: yRange\n}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1632,"value":"md`### rgbCanvas - genera un camnvas con triángulo RGB`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"gamutUrl = FileAttachment(\"cie1931Gamut.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"style_bootstrap","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"mutable confusionFocus = {\n\tvar point = {\n\t\t\"x\": \tblinder[defaultColorBlindType].x,\n\t\t\"y\": \tblinder[defaultColorBlindType].y,\n\t}\n\n\treturn point;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":838,"value":"lineIntersection = require('https://bundle.run/line-intersection@1.0.9')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"import {color,select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"pointInPolygon = require('https://bundle.run/point-in-svg-polygon@1.0.25')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"import {colorConverter, blind, getConfusionFocus, getSpectrumCoordinates, changeConfusionFocus, convertXYZtoRGB, blinder, convertRGB2xyY, convertxyl2RGB, rgbTriangleSides, estimateY, insideRGBTriangle, insideBGLine, insideRGLine, RGBCoords} from \"@elaval/color-utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {style_bootstrap} from \"@elaval/utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 31:"$30:body"