2b:null 2c:["$","title",null,{"children":"Why is Color Negative Film Orange? | Evan Dorsky | Observable"}] 31:T5aa,{ const pd = 2 const ymarg = 40 const ypad = 50 const ymargpad = ymarg + ypad let w = 1400 let h = 310 + ypad + ymarg let text1y = 35 let text2y = ymargpad-10 const ctx = DOM.context2d(w/pd, h/pd, pd) let basetf = ctx.getTransform() function colcenter(i) { return colw*i - colw/2 } // measurements let iw = imOrig.width/pd let ih = imOrig.height/pd let colw = 350/pd // column 1 let imstart1 = colcenter(1) - iw/2 ctx.fillStyle = "black" ctx.fillRect(0, 0, colw, h) cxtext(ctx, "Light", [colcenter(1), text1y], "white", 28) cxtext(ctx, "Projected Image", [colcenter(1), text2y], "white") cxdrawImageData(ctx, imOrig, [colcenter(1), (ymargpad+ih/2)]) // column 2 let imstart2 = colcenter(2) - iw/2 cxtext(ctx, "Dye", [colcenter(2), text1y], "black", 28) cxtext(ctx, "Dye Image", [colcenter(2), text2y]) cxdrawImageData(ctx, imShiftInv, [colcenter(2), (ymargpad+ih/2)]) // column 3 let imstart3 = colcenter(3) - iw/2 ctx.fillStyle = "black" ctx.fillRect(colw*2, 0, colw, h) cxtext(ctx, "Light", [colcenter(3), text1y], "white", 28) cxtext(ctx, "Reproduced Image", [colcenter(3), text2y], "white") cxdrawImageData(ctx, imShiftReprod, [colcenter(3), (ymargpad+ih/2)]) // arrows carrow(ctx, [imstart1+iw,ymargpad+ih/2], [imstart2,ymargpad+ih/2]) carrow(ctx, [imstart2+iw,ymargpad+ih/2], [imstart3,ymargpad+ih/2]) return ctx.canvas }32:T42a,{ const pd = 2 const ymarg = 0 const ypad = 50 const ymargpad = ymarg + ypad let w = 1400 let h = 310 + ypad + ymarg let text1y = 35 let text2y = ymargpad-10 const ctx = DOM.context2d(w/pd, h/pd, pd) let basetf = ctx.getTransform() function colcenter(i) { return colw*i - colw/2 } // measurements let iw = imOrig.width/pd let ih = imOrig.height/pd let colw = 320/pd // column 1 let imstart1 = colcenter(1) - iw/2 ctx.fillStyle = "black" ctx.fillRect(0, 0, colw, h) // cxtext(ctx, "Light", [colcenter(1), text1y], "white", 28) cxtext(ctx, "Projected Image", [colcenter(1), text2y], "white") cxdrawImageData(ctx, imOrig, [colcenter(1), (ymargpad+ih/2)]) // column 3 let imstart3 = colcenter(2) - iw/2 ctx.fillStyle = "black" ctx.fillRect(colw*1, 0, colw, h) // cxtext(ctx, "Light", [colcenter(2), text1y], "white", 28) cxtext(ctx, "Reproduced Image", [colcenter(2), text2y], "white") cxdrawImageData(ctx, imShiftReprod, [colcenter(2), (ymargpad+ih/2)]) return ctx.canvas }33:T7a5,## Challenges of accurate color reproduction in the real world If we could use ideal dyes, the film we constructed above would work perfectly, and our work as film emulsion designers would be done. But then the film would have no orange mask, and we'd be missing out on all the interesting stuff. So let's learn about dyes, understand the "nonideal" dyes we _can_ use, and figure out how to achieve accurate color reproduction with those dyes. ### Dye and ideal dyes A [dye](https://en.wikipedia.org/wiki/Dye) is simply a substance that absorbs only some wavelengths of visible light. The color we see when we look at a dye is the color of the wavelengths of light that the dye does _not_ absorb. That light reflects off the dye and into our eyes. For our purposes, **ideal dyes** are dyes that absorb _only one color_. - Dye that absorbs only ${tcs('blue')} light is ${tcs('yellow')}. - Dye that absorbs only ${tc('green', "#0f0")} light is ${tcs('magenta')}. - Dye that absorbs only ${tcs('red')} light is ${tcs('cyan')}. ### Why do we want ideal dyes? Ideal dyes allow color film to create dye layers that absorb light in perfect proportion to the amount of light that hit their corresponding light-sensitive layer. Let's use the ${tcs("blue")}-sensitive layer as an example. It turns out that we _can_ use ideal ${tcs("yellow")} dye. After processing, the film contains a ${tcs("yellow")} dye layer that appears as a negative image of the ${tcs("blue")} light channel of the original image. #### ${tcs("Blue")} Channel and ${tcs("Yellow")} Dye Layer Since the ${tcs("yellow")} dye layer is a _perfect negative_ of the ${tcs("blue")} light channel, the ${tcs("yellow")} dye layer will absorb ${tcs("blue")} light in proportion to the amount of light the ${tcs("blue")}-sensitive layer of the film absorbed. That means that the more ${tcs("blue")} light there was in a given spot, the _darker_ the ${tcs("yellow")} layer will be in that spot:34:T5b8,{ const pd = 2 const ymarg = 40 const ypad = 50 const ymargpad = ymarg + ypad let w = 1400 let h = 310 + ypad + ymarg let text1y = 35 let text2y = ymargpad-10 const ctx = DOM.context2d(w/pd, h/pd, pd) let basetf = ctx.getTransform() function colcenter(i) { return colw*i - colw/2 } // measurements let iw = imOrig.width/pd let ih = imOrig.height/pd let colw = 350/pd // column 1 let imstart1 = colcenter(1) - iw/2 ctx.fillStyle = "black" ctx.fillRect(0, 0, colw, h) cxtext(ctx, "Light", [colcenter(1), text1y], "white", 28) cxtext(ctx, "Blue Channel", [colcenter(1), text2y], "white") cxdrawImageData(ctx, imRGB[2], [colcenter(1), (ymargpad+ih/2)]) // column 2 let imstart2 = colcenter(2) - iw/2 cxtext(ctx, "Dye", [colcenter(2), text1y], "black", 28) cxtext(ctx, "Yellow Dye Layer", [colcenter(2), text2y]) cxdrawImageData(ctx, imCMYShift[2], [colcenter(2), (ymargpad+ih/2)]) // column 3 let imstart3 = colcenter(3) - iw/2 ctx.fillStyle = "black" ctx.fillRect(colw*2, 0, colw, h) cxtext(ctx, "Light", [colcenter(3), text1y], "white", 28) cxtext(ctx, "Reproduced Blue", [colcenter(3), text2y], "white") cxdrawImageData(ctx, imShiftReprodRGB[2], [colcenter(3), (ymargpad+ih/2)]) // arrows carrow(ctx, [imstart1+iw,ymargpad+ih/2], [imstart2,ymargpad+ih/2]) carrow(ctx, [imstart2+iw,ymargpad+ih/2], [imstart3,ymargpad+ih/2]) return ctx.canvas }35:T5bc,{ const pd = 2 const ymarg = 40 const ypad = 50 const ymargpad = ymarg + ypad let w = 1400 let h = 310 + ypad + ymarg let text1y = 35 let text2y = ymargpad-10 const ctx = DOM.context2d(w/pd, h/pd, pd) let basetf = ctx.getTransform() function colcenter(i) { return colw*i - colw/2 } // measurements let iw = imOrig.width/pd let ih = imOrig.height/pd let colw = 350/pd // column 1 let imstart1 = colcenter(1) - iw/2 ctx.fillStyle = "black" ctx.fillRect(0, 0, colw, h) cxtext(ctx, "Light", [colcenter(1), text1y], "white", 28) cxtext(ctx, "Green Channel", [colcenter(1), text2y], "white") cxdrawImageData(ctx, imRGB[1], [colcenter(1), (ymargpad+ih/2)]) // column 2 let imstart2 = colcenter(2) - iw/2 cxtext(ctx, "Dye", [colcenter(2), text1y], "black", 28) cxtext(ctx, "\"Magenta\" Dye Layer", [colcenter(2), text2y]) cxdrawImageData(ctx, imCMYShift[1], [colcenter(2), (ymargpad+ih/2)]) // column 3 let imstart3 = colcenter(3) - iw/2 ctx.fillStyle = "black" ctx.fillRect(colw*2, 0, colw, h) cxtext(ctx, "Light", [colcenter(3), text1y], "white", 28) cxtext(ctx, "Reproduced Green", [colcenter(3), text2y], "white") cxdrawImageData(ctx, imCMYShiftRGB[1], [colcenter(3), (ymargpad+ih/2)]) // arrows carrow(ctx, [imstart1+iw,ymargpad+ih/2], [imstart2,ymargpad+ih/2]) carrow(ctx, [imstart2+iw,ymargpad+ih/2], [imstart3,ymargpad+ih/2]) return ctx.canvas }36:T5b5,{ const pd = 2 const ymarg = 40 const ypad = 50 const ymargpad = ymarg + ypad let w = 1400 let h = 310 + ypad + ymarg let text1y = 35 let text2y = ymargpad-10 const ctx = DOM.context2d(w/pd, h/pd, pd) let basetf = ctx.getTransform() function colcenter(i) { return colw*i - colw/2 } // measurements let iw = imOrig.width/pd let ih = imOrig.height/pd let colw = 350/pd // column 1 let imstart1 = colcenter(1) - iw/2 ctx.fillStyle = "black" ctx.fillRect(0, 0, colw, h) cxtext(ctx, "Light", [colcenter(1), text1y], "white", 28) cxtext(ctx, "Red Channel", [colcenter(1), text2y], "white") cxdrawImageData(ctx, imRGB[0], [colcenter(1), (ymargpad+ih/2)]) // column 2 let imstart2 = colcenter(2) - iw/2 cxtext(ctx, "Dye", [colcenter(2), text1y], "black", 28) cxtext(ctx, "\"Cyan\" Dye Layer", [colcenter(2), text2y]) cxdrawImageData(ctx, imCMYShift[0], [colcenter(2), (ymargpad+ih/2)]) // column 3 let imstart3 = colcenter(3) - iw/2 ctx.fillStyle = "black" ctx.fillRect(colw*2, 0, colw, h) cxtext(ctx, "Light", [colcenter(3), text1y], "white", 28) cxtext(ctx, "Reproduced Red", [colcenter(3), text2y], "white") cxdrawImageData(ctx, imCMYShiftRGB[0], [colcenter(3), (ymargpad+ih/2)]) // arrows carrow(ctx, [imstart1+iw,ymargpad+ih/2], [imstart2,ymargpad+ih/2]) carrow(ctx, [imstart2+iw,ymargpad+ih/2], [imstart3,ymargpad+ih/2]) return ctx.canvas }37:T5bb,{ let dw = 400 let dh = 100 const svg = d3.create("svg") .attr("viewBox", [0, 0, dw, dh]) let w = 60 let s = 60 let dx = 150 let p0 = 40 let p1 = w+dx let c = (p1+w+p0)/2 let py = 25 svg.append("text") .text("Color Film: Two Machines") .attr("text-anchor", "middle") .attr("font-size", 12) .attr("x", c) .attr("y", 10) const eBefore = new Emulsion("Before: Recording Machine", [ new ELayer("Blue Sensitive", ["rgba(0,0,255,.5)"]), new ELayer("Yellow Dye (Inactive)", ["rgba(0,0,0,0)"]), new ELayer("Green Sensitive", ["rgba(0,255,0,.5)"]), new ELayer("Magenta Dye (Inactive)", ["rgba(0,0,0,0)"]), new ELayer("Red Sensitive", ["rgba(255,0,0,.5)"]), new ELayer("Cyan Dye (Inactive)", ["rgba(0,0,0,0)"]) ]) const eAfter = new Emulsion("After: Display Machine", [ new ELayer("", ["rgba(0,0,0,0)"]), new ELayer("Yellow Dye", ["rgba(255,255,0,1)"]), new ELayer("", ["rgba(0,0,0,0)"]), new ELayer("Magenta Dye", ["rgba(255,0,255,1)"]), new ELayer("", ["rgba(0,0,0,0)"]), new ELayer("Cyan Dye", ["rgba(0,255,255,1)"]), ]) eBefore.draw(svg, [p0, py], "left") eAfter.draw(svg, [p1, py], "right") arrow(svg, [[p0+w+5,py+40], [p1-10,py+40]]) svg.append("text") .text("Chemical Processing") .attr("text-anchor", "middle") .attr("font-size", 8) .attr("x", c) .attr("y", py+32) return svg.node() }38:T414,#### Naive digital methods won't do The above exercise demonstrates why we can't trivially use digital methods on the final image to correct for dye impurities: **When there are dye impurities, we have no way of knowing which dye layer was responsible for a color change in the reproduced image.** For example, ${tc('green', "#00ff00")} light in the reproduced image can come from either the ${tc('magenta', "#ff00ff")} layer or the ${tc('cyan', "#00ffff")} layer – thus, ${tc('green', "#00ff00")} light in the reproduced image can be caused by either the ${tc('green', "#00ff00")} channel or ${tc('red', "#ff0000")} from the scene! Dye impurities cause us to lose color information in the reproduced image, because the ${tc('red', "#ff0000")} and ${tc('green', "#00ff00")} channels of the original image each affect multiple color channels of the reproduced image _in unpredictable ways_. If we can make the effects of the dye impurities predictable – that is, not dependent on the light from the scene – we can remove them easily.39:T488,### Method: Make the imperfection constant There is no way to reduce the impurity levels of the dyes. Some dyes will always absorb some amount of the "wrong" color of light. But absorption on its own is not a problem, per se. The problem is that different parts of the image have different amounts of incorrect absorption. What does this mean? Any given spot on the ${tcs('magenta')} layer of the negative will absorb some ${tcs('blue')} light _in proportion_ to how much ${tcs('green')} light hit the film in that spot. This is because, as of now, the dye coupler (the molecule that transforms into the dye during development) absorbs no light, and the dye absorbs ${tcs('green')} along with some ${tcs('blue')} light. What if the ${tcs('magenta')} dye **coupler** was also made to absorb ${tcs('blue')} light? Then, the ${tcs('magenta')} dye **layer** would always absorb some ${tcs('blue')} light! If we tuned the ${tcs('blue')} light absorption of the dye coupler correctly, then we could make the ${tcs('magenta')} layer always absorb _the same amount of ${tcs('blue')} light, no matter how much ${tcs('green')} light hit the ${tcs('magenta')} layer!_3a:T40e,## Colored dye couplers Colored dye couplers will change the way our film looks. Let's explore how. The ${tcs("magenta")} dye impurity is ${tcs("blue")} light absorption. So the ${tcs("magenta")} dye coupler will have to absorb ${tcs("blue")} light, which means it will be colored ${tcs("yellow")}. And the ${tcs("cyan")} dye impurity is ${tcs("green")} light absorption. So the ${tcs("cyan")} dye coupler will have to absorb ${tcs("green")} light, which means it will be colored ${tcs("magenta")}. What will this look like? After development, the dye coupler will be wherever the dye is _not_. So the _less_ light hit the film in a given spot, the _more_ dye coupler will remain there after development. Since the dye produces a negative image, this means that the dye coupler will produce a _positive_ image. The ${tcs("magenta")} dye layer will have a faint ${tcs("yellow")} positive image. And the ${tcs("cyan")} dye layer will have a faint ${tcs("magenta")} positive image. Here are the dye layers next to their dye couplers:3b:T5bc,{ const pd = 2 const ymarg = 40 const ypad = 50 const ymargpad = ymarg + ypad let w = 1400 let h = 310 + ypad + ymarg let text1y = 35 let text2y = ymargpad-10 const ctx = DOM.context2d(w/pd, h/pd, pd) let basetf = ctx.getTransform() function colcenter(i) { return colw*i - colw/2 } // measurements let iw = imOrig.width/pd let ih = imOrig.height/pd let colw = 350/pd // column 1 let imstart1 = colcenter(1) - iw/2 ctx.fillStyle = "black" ctx.fillRect(0, 0, colw, h) cxtext(ctx, "Light", [colcenter(1), text1y], "white", 28) cxtext(ctx, "Projected Image", [colcenter(1), text2y], "white") cxdrawImageData(ctx, imOrig, [colcenter(1), (ymargpad+ih/2)]) // column 2 let imstart2 = colcenter(2) - iw/2 cxtext(ctx, "Dye", [colcenter(2), text1y], "black", 28) cxtext(ctx, "Masked Dye Image", [colcenter(2), text2y]) cxdrawImageData(ctx, imCouplersInv, [colcenter(2), (ymargpad+ih/2)]) // column 3 let imstart3 = colcenter(3) - iw/2 ctx.fillStyle = "black" ctx.fillRect(colw*2, 0, colw, h) cxtext(ctx, "Light", [colcenter(3), text1y], "white", 28) cxtext(ctx, "Reproduced Image", [colcenter(3), text2y], "white") cxdrawImageData(ctx, imCouplersReprodColor, [colcenter(3), (ymargpad+ih/2)]) // arrows carrow(ctx, [imstart1+iw,ymargpad+ih/2], [imstart2,ymargpad+ih/2]) carrow(ctx, [imstart2+iw,ymargpad+ih/2], [imstart3,ymargpad+ih/2]) return ctx.canvas }3c:Ta0d,ELayer = { function splitColor(color) { let r = d3.color("rgba(255,0,0,1)") let g = d3.color("rgba(0,255,0,1)") let b = d3.color("rgba(0,0,255,1)") r.opacity = color.r / 300 g.opacity = color.g / 300 b.opacity = color.b / 300 let colors = [r, g, b] return colors } class ELayer { constructor(label, colors, thickness=10, type="emulsion", absorbs="rgba(0,0,0,1)", drawLight=true) { this.label = label this.colors = colors this.thickness = thickness this.width = 100 this.labelPadding = 5 this.textSize = 10 this.type = type this.absorbs = d3.color(absorbs) this.drawLight = drawLight } passLight(color) { let c = d3.color(color) let cNew = d3.color(color) if (this.absorbs != "rgba(0,0,0,1)") { cNew.r = Math.max(0, c.r * (1-(this.absorbs.r*this.absorbs.opacity)/255)) cNew.g = Math.max(0, c.g * (1-(this.absorbs.g*this.absorbs.opacity)/255)) cNew.b = Math.max(0, c.b * (1-(this.absorbs.b*this.absorbs.opacity)/255)) } return cNew } interactsWithLight() { return !(this.absorbs.r == 0 && this.absorbs.g == 0 && this.absorbs.b == 0 && this.absorbs.opacity == 1) } draw(svg, origin, textPos, width=-1) { if (width != -1) { this.width = width } let strokeColor = "black" if (this.type == "light") { strokeColor = d3.color("#00000000") } let ncolors = this.colors.length if (this.type == "light") { ncolors = 3 this.colors = splitColor(this.colors[0]) } const sectionWidth = this.width / ncolors for (let c = 0; c < ncolors; ++c) { svg.append("rect") .attr("x", origin[0]+sectionWidth*c) .attr("y", origin[1]) .attr("width", sectionWidth) .attr("height", this.thickness) .attr("fill", this.colors[c]) .style("stroke-width", 0.5) .style("stroke", strokeColor) } let textx = origin[0]+this.width+this.labelPadding let textAlign = "start" if (textPos == "left") { textx = origin[0]-this.labelPadding textAlign = "end" } svg.append("text") .attr("x", origin[0] + this.width/2) .style("text-anchor", "middle") .attr("y", origin[1]+this.thickness/2-0.5) .attr("dy", this.textSize/4) .style("font-size", this.textSize/2) .text(this.label) } } return ELayer }3d:T544,Emulsion = { class Emulsion { constructor(title, layers, width=60) { this.title = title this.layers = layers this.width = width this.lights = [] } passLight(color) { this.lights = [] let light = color for (let l = 0; l < this.layers.length; ++l) { let layer = this.layers[l] light = layer.passLight(light) let llayer = new ELayer("LIGHT", [light], 30, "light") this.lights.push(llayer) } return light } draw(svg, origin, textPos, drawLights=false) { let eOrigin = [origin[0], origin[1]+12] svg.append("text") .attr("x", origin[0] + this.width/2) .attr("y", origin[1]+5) .attr("text-anchor", "middle") .style("font-size", 8) .text(this.title) for (let l = 0; l < this.layers.length; ++l) { let elayer = this.layers[l] elayer.draw(svg, eOrigin, textPos, this.width) eOrigin[1] += elayer.thickness if (drawLights) { if (this.lights.length) { let llayer = this.lights[l] if (elayer.interactsWithLight() && elayer.drawLight) { llayer.draw(svg, eOrigin, textPos, this.width) eOrigin[1] += llayer.thickness } } } } } } return Emulsion }3e:T8ae,function reproducedImageDive(stage, shiftDyes=true) { const pd = dpi const ymarg = 20 const ypad = 30 const ymargpad = ymarg + ypad const iw = imOrig.width/pd const ih = imOrig.height/pd const colw = iw*1.4 const w = (4*colw + 2*ypad) * pd const h = (3*ih + 2*ypad + ymarg) * pd const text1y = 35 const text2y = ymargpad-10 let cmy = imCMY let inv = imInv if (shiftDyes) { cmy = imCMYShift inv = imShiftInv } const ctx = DOM.context2d(w/pd, h/pd, pd) function colcenter(i) { return colw*i - colw/2 } // column 1 ctx.fillStyle = "white" ctx.fillRect(0, 0, colw, h) let imstart1 = colcenter(1) - iw/2 cxtext(ctx, "Dye Layers", [colcenter(1), text2y]) for (let i = 0; i < cmy.length; ++i) { cxdrawDyeImage(ctx, cmy[cmy.length-1-i], [colcenter(1), (ymargpad+ih*i+ih/2)]) } // column 2 ctx.fillStyle = "white" ctx.fillRect(colw, 0, colw, h) let imstart2 = colcenter(2) - iw/2 cxtext(ctx, "Dye Image on Film", [colcenter(2), text2y+ih-25]) cxdrawDyeImage(ctx, inv, [colcenter(2), (ymargpad+ih+ih/2)]) cxfilmstrip(ctx, [colcenter(2), (ymargpad+ih+ih/2)]) // column 3 let imstart3 = colcenter(3) - iw/2 ctx.fillStyle = "black" ctx.fillRect(2*colw, 0, colw, h) cxtext(ctx, "Reproduced Image", [colcenter(3), text2y+ih], "white") cxdrawLightImage(ctx, imShiftReprod, [colcenter(3), ymargpad+ih+ih/2]) // arrows for (let i = 0; i < imCMY.length; ++i) { let y = ymargpad + ih*i + ih/2 // 2 to 3 carrow(ctx, [imstart2+iw,ymargpad+ih+ih/2], [imstart3,ymargpad+ih+ih/2]) } // column 4 let imstart4 = colcenter(4) - iw/2 ctx.fillStyle = "black" ctx.fillRect(3*colw, 0, colw, h) cxtext(ctx, "Color Channels", [colcenter(4), text2y], "white") for (let i = 0; i < imShiftReprodRGB.length; ++i) { cxdrawLightImage(ctx, imShiftReprodRGB[imShiftReprodRGB.length-1-i], [colcenter(4), (ymargpad+ih*i+ih/2)]) } // arrows for (let i = 0; i < imCMY.length; ++i) { let y = ymargpad + ih*i + ih/2 // 1 to 2 carrow(ctx, [imstart1+iw,y], [imstart2,ymargpad+ih+ih/2]) // 3 to 4 carrow(ctx, [imstart3+iw,ymargpad+ih+ih/2], [imstart4,y]) } return ctx.canvas }3f:T9f0,function centralDogma(stage, shiftDyes=false) { const pd = dpi const ymarg = 50 const ypad = 30 const ymargpad = ymarg + ypad const iw = imOrig.width/pd const ih = imOrig.height/pd const colw = iw*1.4 const w = (4*colw + 2*ypad) * pd const h = (3*ih + 2*ypad + ymarg) * pd const text1y = 35 const text2y = ymargpad-10 let cmy = imCMY let inv = imInv if (shiftDyes) { cmy = imCMYShift inv = imShiftInv } const ctx = DOM.context2d(w/pd, h/pd, pd) function colcenter(i) { return colw*i - colw/2 } ctx.fillStyle = "black" ctx.fillRect(0, 0, colw*2, h) // columns 1-2 cxtext(ctx, "Light", [colw, text1y], "white", 28) // cxtext(ctx, "Absence of light is black", [colw, text1y+22], "white") // column 1 let imstart1 = colcenter(1) - iw/2 cxtext(ctx, "Projected Image", [colcenter(1), text2y+ih], "white") cxdrawLightImage(ctx, imOrig, [colcenter(1), ymargpad+ih+ih/2]) // column 2 let imstart2 = colcenter(2) - iw/2 for (let i = 0; i < imCMY.length; ++i) { let y = ymargpad + ih*i + ih/2 // 1 to 2 carrow(ctx, [imstart1+iw,ymargpad+ih+ih/2], [imstart2,y]) } cxtext(ctx, "Color Channels", [colcenter(2), text2y], "white") for (let i = 0; i < imRGB.length; ++i) { cxdrawLightImage(ctx, imRGB[imRGB.length-1-i], [colcenter(2), (ymargpad+ih*i+ih/2)]) } if (stage == 1) { return ctx.canvas } // columns 3-4 ctx.fillStyle = "white" ctx.fillRect(colw*2, 0, colw*2, h) cxtext(ctx, "Dye", [colw*3, text1y], "black", 28) // cxtext(ctx, "Absence of dye is white", [colw*3, text1y+22]) // column 3 let imstart3 = colcenter(3) - iw/2 for (let i = 0; i < imCMY.length; ++i) { let y = ymargpad + ih*i + ih/2 // 2 to 3 carrow(ctx, [imstart2+iw,y], [imstart3,y]) } cxtext(ctx, "Dye Layers", [colcenter(3), text2y]) for (let i = 0; i < cmy.length; ++i) { cxdrawDyeImage(ctx, cmy[cmy.length-1-i], [colcenter(3), (ymargpad+ih*i+ih/2)]) } if (stage == 2) { return ctx.canvas } // column 4 let imstart4 = colcenter(4) - iw/2 cxtext(ctx, "Dye Image on Film", [colcenter(4), text2y+ih-25]) cxdrawDyeImage(ctx, inv, [colcenter(4), (ymargpad+ih+ih/2)]) // arrows for (let i = 0; i < imCMY.length; ++i) { let y = ymargpad + ih*i + ih/2 // 2 to 3 carrow(ctx, [imstart2+iw,y], [imstart3,y]) // 3 to 4 carrow(ctx, [imstart3+iw,y], [imstart4,ymargpad+ih+ih/2]) } cxfilmstrip(ctx, [colcenter(4), (ymargpad+ih+ih/2)]) return ctx.canvas }40:T53f,function dyeCouplerDive(stage) { const pd = dpi const ymarg = 20 const ypad = 30 const ymargpad = ymarg + ypad const iw = imOrig.width/pd const ih = imOrig.height/pd const colw = iw const w = (4*colw + 2*ypad) * pd let h = (3*ih + 2*ypad + ymarg) * pd if (stage == 2) { h += ih * pd } const text1y = 35 const text2y = ymargpad-10 const ctx = DOM.context2d(w/pd, h/pd, pd) function colcenter(i) { return colw*i - colw/2 } // column 1 ctx.fillStyle = "white" ctx.fillRect(0, 0, colw, h) let imstart1 = colcenter(1) - iw/2 cxtext(ctx, "Dye Layers", [colcenter(1), text2y]) let cmy = imCMYShift for (let i = 0; i < cmy.length; ++i) { cxdrawDyeImage(ctx, cmy[cmy.length-1-i], [colcenter(1), (ymargpad+ih*i+ih/2)]) } // column 2 let couplers = cmyCouplers cxtext(ctx, "Dye Couplers", [colcenter(2), text2y]) for (let i = 0; i < couplers.length; ++i) { cxdrawDyeImage(ctx, couplers[couplers.length-1-i], [colcenter(2), (ymargpad+ih*i+ih/2)]) } // combined dye image let allCouplers = cmy2im([couplers[0], couplers[1]]) let allDyes = cmy2im(cmy) if (stage == 2) { cxdrawImageData(ctx, allDyes, [colcenter(1), (ymargpad+ih*3+ih/2)]) cxdrawImageData(ctx, allCouplers, [colcenter(2), (ymargpad+ih*3+ih/2)]) } return ctx.canvas }41:T6ed,function dyeCouplerCombine(stage) { const pd = dpi const ymarg = 20 const ypad = 30 const ymargpad = ymarg + ypad const iw = imOrig.width/pd const ih = imOrig.height/pd const colw = iw*1.4 const w = (4*colw + 2*ypad) * pd const h = (3*ih + 2*ypad + ymarg) * pd const text1y = 35 const text2y = ymargpad-10 const ctx = DOM.context2d(w/pd, h/pd, pd) function colcenter(i) { return colw*i - colw/2 } // column 1 ctx.fillStyle = "white" ctx.fillRect(0, 0, colw, h) let imstart1 = colcenter(1) - iw/2 cxtext(ctx, "Dye Layers + Couplers", [colcenter(1), text2y]) let cmy = imCMYCouplers for (let i = 0; i < cmy.length; ++i) { cxdrawDyeImage(ctx, cmy[cmy.length-1-i], [colcenter(1), (ymargpad+ih*i+ih/2)]) } // column 2 ctx.fillStyle = "white" ctx.fillRect(colw, 0, colw, h) let imstart2 = colcenter(2) - iw/2 if (stage == 1) { cxtext(ctx, "Dye Image", [colcenter(2), text2y+ih]) } if (stage > 1) { cxtext(ctx, "Dye Image on Film", [colcenter(2), text2y+ih-25]) } cxdrawDyeImage(ctx, imCouplersInv, [colcenter(2), (ymargpad+ih+ih/2)]) if (stage > 1) { cxfilmstrip(ctx, [colcenter(2), (ymargpad+ih+ih/2)], true) } if (stage == 3) { // combined dye image let allCouplers = cmy2im([cmyCouplers[0], cmyCouplers[1]]) if (stage > 1) { cxtext(ctx, "Couplers (No Dye Layers)", [colcenter(3), text2y+ih-25]) } cxfilmstrip(ctx, [colcenter(3), (ymargpad+ih+ih/2)], true) cxdrawImageData(ctx, allCouplers, [colcenter(3), (ymargpad+ih*1+ih/2)]) } // arrows for (let i = 0; i < imCMY.length; ++i) { let y = ymargpad + ih*i + ih/2 // 1 to 2 carrow(ctx, [imstart1+iw,y], [imstart2,ymargpad+ih+ih/2]) } return ctx.canvas }42:[{"id":"935a323049a73fd92911280d557968eaee73d1d61009c02afb01b80b292d2c3a3acb8c26def2d0c7d8509e75c9e743c2a3fd8d0271838368541985a7854582e6","href":"https://static.observableusercontent.com/files/935a323049a73fd92911280d557968eaee73d1d61009c02afb01b80b292d2c3a3acb8c26def2d0c7d8509e75c9e743c2a3fd8d0271838368541985a7854582e6","name":"IMG_1628.jpeg","type":"image/jpeg","lastModified":1662480502401.154,"size":1351651},{"id":"1781f2a3cf4e864e1a4792c28e2abe0b2c436fa54960f14b305b1e8b353ce44139324c7aef3a3718dbe8bd63e7425276aed9e15dddcd40a9ad897c9a027803c1","href":"https://static.observableusercontent.com/files/1781f2a3cf4e864e1a4792c28e2abe0b2c436fa54960f14b305b1e8b353ce44139324c7aef3a3718dbe8bd63e7425276aed9e15dddcd40a9ad897c9a027803c1","name":"primaries-building.jpg","type":"image/jpeg","lastModified":1678209030009.973,"size":305451},{"id":"f8f0a6fe4e5c87ded458d193ee497532baa1177b9bafd6df578267eabfd50b8fcf7f2113a3b8bfdf07dbbc2575d3e253d2fb96e7f14c73082885e5a5242aee32","href":"https://static.observableusercontent.com/files/f8f0a6fe4e5c87ded458d193ee497532baa1177b9bafd6df578267eabfd50b8fcf7f2113a3b8bfdf07dbbc2575d3e253d2fb96e7f14c73082885e5a5242aee32","name":"red-white.jpg","type":"image/jpeg","lastModified":1678209030022.496,"size":220719},{"id":"35dba1fdd2b34f512f143f5b103f2a37be92dd980e64373a0f56f337e17776a27d50d9b2fd45a83937af8a6def06ed37d92d16b472ed6d90bf2e45453cbd7b76","href":"https://static.observableusercontent.com/files/35dba1fdd2b34f512f143f5b103f2a37be92dd980e64373a0f56f337e17776a27d50d9b2fd45a83937af8a6def06ed37d92d16b472ed6d90bf2e45453cbd7b76","name":"yellow-building.jpg","type":"image/jpeg","lastModified":1678209029987.793,"size":215858},{"id":"ee8c5a5423aba647028aae8d373ce24ae27acfd74f4e7441c52faa0dd6f2b2a9647ea8134adac4cb18c57fbb0fb7d2c47708ae42e7c22e38924a6c5cc9800839","href":"https://static.observableusercontent.com/files/ee8c5a5423aba647028aae8d373ce24ae27acfd74f4e7441c52faa0dd6f2b2a9647ea8134adac4cb18c57fbb0fb7d2c47708ae42e7c22e38924a6c5cc9800839","name":"green-mallow.jpg","type":"image/jpeg","lastModified":1678209030021.102,"size":233332},{"id":"90b1b5896904bdbcfffdb4194269118a75a5958790e1f1813606f5fa98055dee31209929209fc99e085243a3336e8fbeff8c3486b5fe986b2fc66791c2e57ae5","href":"https://static.observableusercontent.com/files/90b1b5896904bdbcfffdb4194269118a75a5958790e1f1813606f5fa98055dee31209929209fc99e085243a3336e8fbeff8c3486b5fe986b2fc66791c2e57ae5","name":"blue-purple-building.jpg","type":"image/jpeg","lastModified":1678209030078.964,"size":362472},{"id":"1129b33701ae0fdd749a9663ee133b9437a902dcf64fd4b8bf51e26bc02e567d4ec88cbba078b3289fc82dff1859212680375a8c3376046ad101607c18e8e7cb","href":"https://static.observableusercontent.com/files/1129b33701ae0fdd749a9663ee133b9437a902dcf64fd4b8bf51e26bc02e567d4ec88cbba078b3289fc82dff1859212680375a8c3376046ad101607c18e8e7cb","name":"image-1@1.jpg","type":"image/jpeg","lastModified":1662566705848.702,"size":68913}] 2f:{"id":"d53438f4d1d33426","slug":"understanding-color-film","title":"Why is Color Negative Film Orange?","thumbnail":"82137a18dd092cfeab8f14e5bd3d63dd602b8cf7eafd40f67d2d2c7dc1ec8f84","access_level":"public","create_time":"$D2022-08-30T18:19:36.850Z","update_time":"$D2026-07-18T21:23:33.935Z","view_time":null,"first_public_time":"$D2022-08-30T23:45:42.720Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"4d3a358c72bcae59","login":"dorskyee","name":"Evan Dorsky","avatar_url":"https://avatars-next.observableusercontent.com/978b0a566d0f96cc067fbd2f24ae7b18fb6b4e7d7e87d7ad2cf8cde4fd1b7846","tier":"starter_2024"},"version":7957,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6265215c119b2156","login":"dorskyee","name":"Evan Dorsky","avatar_url":"https://avatars-next.observableusercontent.com/978b0a566d0f96cc067fbd2f24ae7b18fb6b4e7d7e87d7ad2cf8cde4fd1b7846","tier":null}],"members":[{"type":"individual","id":"6265215c119b2156","login":"dorskyee","name":"Evan Dorsky","avatar_url":"https://avatars-next.observableusercontent.com/978b0a566d0f96cc067fbd2f24ae7b18fb6b4e7d7e87d7ad2cf8cde4fd1b7846","tier":null,"role":"editor"}],"comments":[{"id":"cc0889c7ab69b35f","reply_to_id":null,"content":"Hi, would you mind republishing this lovely notebook? To us readers it shows with a broken hero image. Thank you!","create_time":"$D2022-12-15T20:06:54.459Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"5be5063429dd0786","reply_to_id":"cc0889c7ab69b35f","content":"It's a pleasant surprise that anyone was viewing this! It's been on my back burner for a while to make this notebook more coherent and approachable. In the meantime, I believe I've republished it, could you let me know if it's visible again? Thanks.","create_time":"$D2022-12-15T21:25:00.449Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"6265215c119b2156","login":"dorskyee","name":"Evan Dorsky","avatar_url":"https://avatars-next.observableusercontent.com/978b0a566d0f96cc067fbd2f24ae7b18fb6b4e7d7e87d7ad2cf8cde4fd1b7846","tier":null}},{"id":"6f4608d2a3cebdab","reply_to_id":"cc0889c7ab69b35f","content":"Yes, thank you! I know I'm the only person who \"liked\" it so far, but don't despair :)","create_time":"$D2022-12-15T21:48:57.560Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"000c9933325442a9","slug":"published","title":"Published","owner":{"id":"4d3a358c72bcae59","login":"dorskyee","name":"Evan Dorsky"}},"type":"notebook","body":{"title":"Why is Color Negative Film Orange?","cells":[{"id":0,"value":"# Why is Color Negative Film Orange?\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":758,"value":"negativeFilm = FileAttachment(\"IMG_1628.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":761,"value":"Hi! Welcome to this [explorable explanation](https://explorabl.es).\n\nI built this document to answer a question that has bounced around in my head since I first shot film: why is color negative film orange? What _purpose_ does the orange mask serve? What would happen if it weren't there?\n\nIn this document, we'll start by articulating the \"[central dogma](https://en.wikipedia.org/wiki/Central_dogma_of_molecular_biology)\" of color negative film: how the different layers in color negative film work together to record light and form a negative image made of dye.\n\nThe rest of the document will explore the challenges of accurate color reproduction, and how addressing these challenges gives rise to the orange mask seen in all color negative film.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2930,"value":"### Background reading: color negative film and color reproduction\n\nAll the background necessary for understanding this notebook can be found in this other notebook, linked here:\n\n### [Color Negative Film](https://observablehq.com/d/efec02c206e4bef0)\n\nThe notebook linked above covers:\n- The different layers in the color negative film emulsion\n- Additive and subtractive color mixing\n- Complementary/inverse colors\n- How negative film reproduces color, and why it forms a negative image\n\nIf you're already familiar with these concepts, feel free to skip the linked notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1440,"value":"## The \"central dogma\" of color negative film: reproducing a color image with dyes\n\nLet's visually explore how color negative film reproduces color images. We just loaded some film into our camera and took a picture of this scene:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1730,"value":"{\n const ctx = DOM.context2d(150, 100, 2)\n // draw the images\n ctx.putImageData(imOrig, 0, 0)\n \n return ctx.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4430,"value":"viewof imOrigName = imSelectForm()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3004,"value":"Let's separate the picture (from now on, the **projected image**) into the primary colors of light: ${tcs(\"red\")}, ${tcs(\"green\")}, and ${tcs(\"blue\")}:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3000,"value":"{\n return centralDogma(1)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3060,"value":"Each of the three light sensitive layers of our film (real color film has more than three, but the basic principles hold) will absorb the light from one of these channels.\n\nWhen the film is processed, each light sensitive layer will form a dye image that will look like the color channel it absorbed, only inverted.\n\nSo now let's add the dye layers next to their light sensitive layers, using dyes that act like the dyes in real color film:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3058,"value":"{\n return centralDogma(2, true)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3731,"value":"**The dye layers are inverses of their corresponding light color channels**. The brighter the light in any given part of the image, the more dye in the corresponding part of the dye image. Dye blocks light, so the dye is darker where the light is brighter and vice versa.\n\nNotice how areas that are nearly black in the light image are nearly white in the dye image.\n\nIn color film, all three **dye layers** are stacked on top of each other, forming the **dye image**. The dye image is the inverse of the projected image. Let's combine the three dye layers to see our dye image:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3723,"value":"{\n return centralDogma(3, true)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3745,"value":"This diagram summarizes what I'll call the \"central dogma of color negative film\": how color negative film creates a **negative dye image** from a **positive projected image**.\n\nLet's remove the intermediate steps and add a final step: reproducing the original image by inverting the dye image.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3958,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7518,"value":"Let's put the reproduced image right next to the original one so we can compare them:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7501,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3798,"value":"If you look closely, you will notice that the colors in the reproduced image don't match the projected image exactly.\n\nThis isn't a digital artifact from inverting the image. The reproduced colors are inaccurate because we couldn't use **ideal dyes**.\n\nSo, what are ideal dyes, why do we want them, why can't we use them, and how do we reproduce a perfect image without them?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6520,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6542,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6552,"value":"Thus the reproduced ${tcs(\"blue\")} channel is identical to the original ${tcs(\"blue\")} channel.\n\n#### ${tcs(\"Green\")} Channel and ${tcs(\"Magenta\")} Dye Layer\n\nNow let's look at the ${tcs(\"green\")} channel. For the ${tcs(\"green\")} channel, we would like to use ideal ${tcs(\"magenta\")} dye, but no suitable ${tcs(\"magenta\")} dye exists in the real world. The best ${tcs(\"magenta\")} dye we can use absorbs ${tcs(\"blue\")} light (which we don't want) in addition to the ${tcs(\"green\")} light we do want. That means that when we invert the ${tcs(\"magenta\")} dye layer, we'll get a ${tcs(\"blue\")}-tinted ${tcs(\"green\")} instead of pure ${tcs(\"green\")}:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6581,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6579,"value":"#### ${tcs(\"Red\")} Channel and ${tcs(\"Cyan\")} Dye Layer\n\nThe same goes for the ${tcs(\"red\")} layer, for which which we must use a ${tcs(\"cyan\")} dye that absorbs ${tcs(\"green\")} light as well as ${tcs(\"red\")} light. Thus the ${tcs(\"red\")} layer, when inverted, will be tinted ${tcs(\"green\")} instead of pure ${tcs(\"red\")}:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6557,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3801,"value":"The sliders below let you modulate the impurity levels. Drag the sliders around and see how the dye layers – and the reproduced color channels – change.\n\nPay attention first to the ${tcs(\"magenta\")} and ${tcs(\"cyan\")} dye layers, which undergo the most obvious changes. But then notice how the reproduced ${tcs(\"green\")} and ${tcs(\"red\")} layers also change color as their corresponding dye layers change.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2971,"value":"viewof impurityLevels = impurityForm()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6585,"value":"You can see that when you set the impurity levels to 0, the reproduced color channels match the original color channels exactly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6588,"value":"### Why _can't_ we use ideal dyes?\n\nDyes are substances that absorb certain wavelengths of light because of properties of their chemical structure. There _are_ existing dyes that have the perfect color properties we desire, but we can't use them in color film because the requirements of color film impose their own constraints on the chemical properties of the dyes we must use.\n\nSimplifying a lot here, the dyes in color film must be able to exist on the film in an intermediate form that is not colored, and then _become colored_ during the processing stage. Only certain molecules can behave this way, and it turns out that none of them (that we know of) perfectly absorb only red or green light. Or at least none that can be easily manufactured in the quantities required for the mass production of film. So we must make do with these imperfect or non-ideal dyes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6904,"value":"### Accounting for nonideal dyes\n\nTo figure out how to fix the color reproduction of our film, we need to dig deeper into the exact problem posed by nonideal color dyes.\n\nFor this section, it helps to think of color film as two different \"machines\" with specific behaviors, one before chemical processing and another after chemical processing:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6767,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7280,"value":"#### Before processing: Color film is a recording machine\n\nBefore processing, color film is a **\"recording machine\"** that _records the color and intensity of the light that hits it_. When color film is a recording machine, **only the light-sensitive layers are in play**. The dye layers are not active at this stage and can be ignored.\n\nInformation about the light is stored in the chemical structure of the film itself. This information is known as the **latent image**.\n\nThe latent image is invisible, but it dictates exactly how the negative image will look after processing the film.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6597,"value":"#### After processing: Color film is a display machine\n\nAfter processing, color film is _transformed_ from a recording machine into a display machine. The **\"display machine\"** shows the dye image, representing the image that the recording machine recorded.\n\nThe light-sensitive layers are physically removed from the film by the processing chemicals, and thus **only the dye layers are in play**.\n\n#### Dye impurities only affect the display machine\n\nDye impurities are a problem with the dye itself, and when the film is a \"recording machine\", we can ignore the dye layers. That means that our film has no problems _recording_ the image accurately – it just can't _display_ it accurately.\n\nThis is actually a good thing. The film recorded the light accurately – we just need a creative way to display the image that gets around the limitations of our dyes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6623,"value":"### Method: Naive digital correction\n\nThere are no trivial digital operations that can fix our reproduced image. Let's use some diagrams to explore why.\n\nLet's split the reproduced image into _its_ ${tcs(\"red\")}, ${tcs(\"green\")}, and ${tcs(\"blue\")} color channels:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6633,"value":"{\n return reproducedImageDive(1)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6677,"value":"Make sure the impurity levels are greater than zero – for this demonstration, higher is better:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1462,"value":"Inputs.bind(impurityForm(), viewof impurityLevels)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6639,"value":"Now there are sliders that let us control the density of each dye layer:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1652,"value":"viewof cmyDensity = cmyForm()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6672,"value":"Drag each slider around, one at a time, and observe how the color channels at the far right of the diagram change.\n\nAs expected, dragging the ${tc('yellow', \"#ffff00\")} slider affects only the ${tc('blue', \"#0000ff\")} channel.\n\nBut as you drag the ${tc('magenta', \"#ff00ff\")} slider, watch the ${tc('blue', \"#0000ff\")} channel. You'll notice that the ${tc('blue', \"#0000ff\")} channel changes as well as the ${tc('green', \"#00ff00\")} channel, even though the ${tc('magenta', \"#ff00ff\")} layer is only supposed to affect the ${tc('green', \"#00ff00\")} channel of the reproduced image.\n\nThe analogous is true for the ${tc('cyan', \"#00ffff\")} slider: as you drag it, the ${tc('green', \"#00ff00\")} channel will change along with the ${tc('red', \"#ff0000\")} channel.\n\nIf you set the impurity levels to 0, the interference between channels will disappear, because dye impurities are what cause the interference.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6693,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6700,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6925,"value":"### Chart? Coupler vs dye showing constant stray light absorption","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7547,"value":"{\n let xlabel = \"Incident Light\"\n let ylabel = \"Light absorption\"\n let blueAbs = impurityLevels[0]\n\n let blueStrokeFunc = (d) => `rgba(0,0,255,${d[1]/256})`\n let greenStrokeFunc = (d) => `rgba(0,255,0,${d[1]/128})`\n\n let xs = d3.range(0,256,0.5)\n \n return Plot.plot({\n style: \"overflow: visible;\",\n marks: [\n Plot.ruleY([0]),\n Plot.line(lineFunc(magentaAbsorbGreen, xs), {z: null, stroke: greenStrokeFunc}),\n Plot.line(lineFunc(magentaAbsorbBlue, xs), {z: null, stroke: blueStrokeFunc}),\n Plot.line(lineFunc(magentaCouplerAbsorbBlue, xs), {z: null, stroke: blueStrokeFunc}),\n Plot.line(lineFunc(magentaAbsorbBlueCombined, xs), {z: null, stroke: blueStrokeFunc})\n ]\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7629,"value":"Inputs.bind(impurityForm(), viewof impurityLevels)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7549,"value":"function magentaAbsorbGreen(x) {\n return x\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7622,"value":"function magentaAbsorbBlue(x) {\n let blueAbs = impurityLevels[0]\n return x * blueAbs\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7632,"value":"function magentaCouplerAbsorbBlue(x) {\n let blueAbs = impurityLevels[0]\n let baseline = blueAbs * 255\n return baseline - (x * blueAbs)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7652,"value":"function magentaAbsorbBlueCombined(x) {\n return magentaAbsorbBlue(x) + magentaCouplerAbsorbBlue(x)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6927,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6940,"value":"dyeCouplerDive(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6952,"value":"Inputs.bind(impurityForm(), viewof impurityLevels)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6957,"value":"Notice how the dye coupler density changes as you move the corresponding dye impurity slider. To make the undesired light absorption constant, the dye coupler gets stronger as the impurity level increases.\n\nIf the impurity level is set to zero, the dye coupler becomes invisible. This makes sense, because if we have perfect dyes, we don't need colored dye couplers!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6963,"value":"Inputs.bind(cmyForm(), viewof cmyDensity)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6969,"value":"Now, drag the ${tcs(\"magenta\")} and ${tcs(\"cyan\")} density sliders down to zero and observe what happens to the dye coupler layers. They increase in density until they are solid colors, because when there is no dye, all the dye couplers are left behind on the film.\n\nWhen you're done, reset the sliders to 1.\n\nNext let's superimpose the dye couplers back onto their dye layers, and then see what their combined dye image looks like:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7054,"value":"dyeCouplerCombine(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7106,"value":"The shadows in the ${tcs(\"magenta\")} and ${tcs(\"cyan\")} layers, which were white before, are now the color of their corresponding dye coupler. The dye coupler \"fills in\" the shadows with its own color, since shadows are places where there is less dye.\n\nPlay with all the sliders again to see how they affect the dye image as well as the dye layers. At some point, set the impurity sliders relatively high and then set all the density sliders to 0.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7124,"value":"Inputs.bind(impurityForm(), viewof impurityLevels)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7114,"value":"Inputs.bind(cmyForm(), viewof cmyDensity)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7128,"value":"With high impurity levels and all the dye layer densities set to 0, the dye image will be just an orange-ish solid color: the result of stacking the ${tcs(\"yellow\")} and ${tcs(\"magenta\")} dye layers on top of each other.\n\nYou may recognize this as the orange film base we are seeking to understand!\n\nLet's bring back the film strip now. The base color of the film is the result of adding together the ${tcs(\"yellow\")} and ${tcs(\"magenta\")} couplers. Play with the sliders some more to see how this all fits together:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7231,"value":"dyeCouplerCombine(2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7287,"value":"### Orange base = Magenta + Yellow\n\nThrough our film design process, we have arrived at the orange base that graces all color negative film. Different film stocks use different dye combinations and require different colored couplers, resulting in different base colors.\n\nThis is great, but we still need to reproduce a true color image from our film. The orange base makes this possible, but it requires some extra steps.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7294,"value":"## Color Reproduction from Film with an Orange Mask\n\nLet's see what happens if we try to simply invert the masked dye image. The results are actually much worse than before we added the mask:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7297,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7300,"value":"Inputs.bind(impurityForm(), viewof impurityLevels)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7309,"value":"Anybody who's ever scanned film before will recognize the classic ${tcs(\"light blue\")} tint, the result of inverting the ${tcs('orange')} mask now present on our film.\n\nAs expected, the color of this tint is determined by the dye impurity levels, and the tint disappears if the impurity levels are set to zero.\n\nThe mask adds new dye to the lightest parts of the **dye image**, which were previously clear or pure white. Those clear spots are now ${tcs(\"orange\")}, the color of the mask. That means that the darkest parts of the **reproduced image**, which should be ${tcs(\"black\")}, end up tinted ${tcs(\"light blue\")}.\n\nHere's a new slider that shifts the shadows of the reproduced image from ${tcs(\"light blue\")} to ${tcs(\"black\")} while recalculating the tones in the image so that they still transition smoothly from white to black.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7364,"value":"viewof correction = correctionForm()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6145,"value":"## Constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5572,"value":"dpi = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4331,"value":"## Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4445,"value":"### Image Processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1596,"value":"function combine(a, b) {\n // const aDiff = 255-a\n const bDiff = 255-b\n return a - bDiff\n // return Math.min(a, b)\n // return 255 - (aDiff+bDiff)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":923,"value":"function imByChan(im, f) {\n let newIm = structuredClone(im)\n let imd = newIm.data\n for (let i = 0; i < imd.length; ++i) {\n if (i % 4 < 3) {\n imd[i] = f(imd[i])\n }\n }\n return newIm\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":912,"value":"function imByPixel(im, f) {\n let newIm = structuredClone(im)\n let imd = newIm.data\n for (let i = 0; i < imd.length; i+=4) {\n let newpx = f(imd.slice(i,i+3))\n imd[i] = newpx[0]\n imd[i+1] = newpx[1]\n imd[i+2] = newpx[2]\n }\n return newIm\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":890,"value":"function imSplitRGB(im) {\n let rgb = [structuredClone(im), structuredClone(im), structuredClone(im)]\n for (let chan = 0; chan < rgb.length; chan++) {\n let chandata = rgb[chan].data\n for (let i = 0; i < chandata.length; ++i) {\n if (i % 4 != chan && i % 4 != 3) {\n chandata[i] = 0\n }\n }\n }\n return rgb\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5886,"value":"function rgb2cmy(rgb) {\n let cmy = structuredClone(rgb)\n \n for (let chan = 0; chan < cmy.length; chan++) {\n let offset = 3 - chan\n let chandata = cmy[chan].data\n for (let i = 0; i < chandata.length; ++i) {\n if (i % 4 < 3) {\n chandata[i] = 255-chandata[i]\n }\n }\n }\n \n return cmy\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2329,"value":"function imGetChanMax(imData, chan) {\n let imCalc = structuredClone(imData)\n for (let i = 0; i < imCalc.length; ++i) {\n if (i % 4 != chan) {\n imCalc[i] = 0\n }\n }\n return imCalc.reduce((a,b)=>Math.max(a,b), -Infinity);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2382,"value":"function imGetChanMin(imData, chan) {\n let imCalc = structuredClone(imData)\n for (let i = 0; i < imCalc.length; ++i) {\n if (i % 4 != chan) {\n imCalc[i] = 255\n }\n }\n return imCalc.reduce((a,b)=>Math.min(a,b), Infinity);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2478,"value":"function cmy2im16(ims) {\n let im = imByChan(ims[0], (c) => {\n return 255\n })\n\n let imAccum = Uint16Array.from(ims[0].data)\n \n const imlen = im.data.length\n \n for (let i = 0; i < imlen; ++i) {\n imAccum[i] = -1\n }\n \n for (let c = 0; c < ims.length; ++c) {\n for (let i = 0; i < imlen; ++i) {\n if (i % 4 < 3) {\n let num = 1*ims[c].data[i]\n imAccum[i] = combine(imAccum[i], num)\n }\n }\n }\n\n let chanScale = [0, 0, 0]\n\n // calculate per-channel scale factor\n for (let i = 0; i < chanScale.length; ++i) {\n chanScale[i] = (256+couplerChanImpacts[i])/256\n }\n \n for (let i = 0; i < imlen; ++i) {\n imAccum[i] = 65536-imAccum[i]\n let chan = i % 4\n if (chan < 3) {\n imAccum[i] = ((256+couplerChanImpacts[chan])-imAccum[i])/chanScale[chan]\n im.data[i] = imAccum[i]\n }\n }\n \n return im\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":957,"value":"function cmy2im(ims) {\n let im = imByChan(ims[0], (c) => {\n return 255\n })\n\n const imlen = im.data.length\n \n for (let c = 0; c < ims.length; ++c) {\n for (let i = 0; i < imlen; ++i) {\n if (i % 4 < 3) {\n im.data[i] = combine(im.data[i], ims[c].data[i])\n }\n }\n }\n \n return im\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4447,"value":"### Film Emulsion Drawing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":21,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4449,"value":"### Canvas Graphics Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3968,"value":"function cxtext(ctx, text, p, fill=\"black\", size=16) {\n ctx.textAlign = \"center\"\n ctx.font = size+\"px sans-serif\"\n ctx.fillStyle = fill\n ctx.fillText(text, p[0], p[1])\n\n return ctx\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5607,"value":"function cxdrawLightImage(ctx, im, c) {\n return cxdrawImageData(ctx, im, c, \"lighten\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5545,"value":"function cxdrawImageData(ctx, im, c, blendmode=\"source-over\") {\n createImageBitmap(im).then(function(bitmap) {\n ctx.globalCompositeOperation = blendmode\n ctx.drawImage(bitmap, c[0]-im.width/dpi/2, c[1]-im.height/dpi/2, im.width/dpi, im.height/dpi);\n ctx.globalCompositeOperation = \"source-over\"\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5427,"value":"function cxfilmstrip(ctx, p0, fill=false)\n{\n // there's a bug where if this is run twice, the sprocket holes from the first run get filled\n const x = p0[0]\n const y = p0[1]\n\n const w = 200\n const h = 150\n\n const cx = x-w/2\n const cy = y-h/2\n\n // sprocket params\n const ns = 10\n const sp = w/ns\n const sw = 8\n const sh = 12\n const sr = 2\n\n // draw outline\n ctx.rect(cx, cy, w, h)\n if (fill) {\n const cci = couplerChanImpacts\n ctx.fillStyle = \"rgb(\"+(255-cci[0])+\",\"+(255-cci[1])+\",\"+(255-cci[2])+\",1)\"\n ctx.fill()\n }\n ctx.strokeStyle = \"black\"\n ctx.stroke()\n \n ctx.beginPath()\n // draw sprockets\n // top sprockets\n for (let i = 0; i < ns; ++i) {\n ctx.roundRect(x-w/2+sp/2-sw/2 +i*sp, y-h/2+sh -sh/2, sw, sh, sr)\n }\n // bottom sprockets\n for (let i = 0; i < ns; ++i) {\n ctx.roundRect(x-w/2+sp/2-sw/2 +i*sp, y+h/2-sh -sh/2, sw, sh, sr)\n }\n ctx.stroke()\n if (fill) {\n ctx.fillStyle = \"white\"\n ctx.fill()\n }\n \n return ctx\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5611,"value":"function cxdrawDyeImage(ctx, im, c) {\n return cxdrawImageData(ctx, im, c, \"darken\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3961,"value":"function carrow(ctx, p0, p1, stroke)\n{\n let w = 6\n let wm = 10\n let hm = 10\n \n let x1 = p0[0], y1 = p0[1]\n let x2 = p1[0], y2 = p1[1]\n\n // 1. transform context\n let dx = x2-x1\n let dy = y2-y1\n\n let xmid = (x1+x2)/2\n let ymid = (y1+y2)/2\n\n // calculate arrow angle\n let angle = Math.atan2(dx, dy)\n let rotate_angle = -angle + Math.PI/2\n \n // calculate arrow length\n let len = Math.sqrt(dx**2 + dy**2)\n \n // 1. transform\n ctx.translate(xmid, ymid)\n ctx.rotate(rotate_angle)\n ctx.translate(-len/2,0)\n\n // 2. draw arrow\n ctx.beginPath()\n ctx.moveTo(0, w/2)\n ctx.lineTo(len - wm, w/2)\n ctx.lineTo(len - wm, hm/2)\n ctx.lineTo(len, 0)\n ctx.lineTo(len - wm, -hm/2)\n ctx.lineTo(len - wm, -w/2)\n ctx.lineTo(0, -w/2)\n ctx.closePath()\n \n // 3. transform back\n ctx.translate(len/2,0)\n ctx.rotate(-rotate_angle)\n ctx.translate(-xmid, -ymid)\n\n ctx.fillStyle = \"black\"\n ctx.fill()\n ctx.strokeStyle = \"white\"\n ctx.stroke()\n \n return ctx\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6786,"value":"function arrow(svg, pts, color=\"black\") {\n const markerBoxWidth = 2\n const markerBoxHeight = 2\n const refX = markerBoxWidth/2\n const refY = markerBoxHeight/2\n const arrowPoints = [[0, 0], [0, markerBoxHeight], [markerBoxWidth, markerBoxHeight/2]]\n svg\n .append('defs')\n .append('marker')\n .attr('id', 'arrow'+color)\n .attr('viewBox', [0, 0, markerBoxWidth, markerBoxHeight])\n .attr('refX', refX)\n .attr('refY', refY)\n .attr('markerWidth', markerBoxWidth)\n .attr('markerHeight', markerBoxHeight)\n .attr('orient', 'auto-start-reverse')\n .append('path')\n .attr('d', d3.line()(arrowPoints))\n .attr('fill', color)\n\n return svg\n .append(\"path\")\n .attr('d', d3.line()(pts))\n .attr('stroke', color)\n .attr('stroke-width', 6)\n .attr('marker-end', 'url(#arrow'+color+')')\n .attr('fill', color)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4562,"value":"### Text Decoration Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":645,"value":"// textcolor function from https://observablehq.com/@observablehq/text-color-annotations-in-markdown\n// modified by me\n\nfunction tc(content, style = {}) {\n if (style == \"green\" || style == \"Green\") {\n style = \"#0f0\"\n }\n function yiq(color) {\n const {r, g, b} = d3.rgb(color);\n return (r * 299 + g * 587 + b * 114) / 1000 / 255; // returns values between 0 and 1\n }\n function darken(color) {\n const cobj = d3.hsl(color);\n cobj.l*=0.7\n return cobj.toString()\n }\n const {\n background,\n color = darken(background),\n fontWeight = 600,\n ...rest\n } = typeof style === \"string\" ? {color: darken(style)} : style;\n return view`${content}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":733,"value":"function tcs(content) {\n let colorname = content.replace(/\\s/g, '')\n\n return tc(content, colorname)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7190,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4558,"value":"### Image Processing Introspection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2301,"value":"imAvgs = {\n // calculate the channel average for the cyan combined dye layer/coupler\n let chanSum = [0,0,0]\n let nPx = 0\n imByPixel(imCouplersInv, (px) => {\n nPx+=1\n chanSum[0] += px[0]\n chanSum[1] += px[1]\n chanSum[2] += px[2]\n return px\n })\n chanSum[0]/=nPx\n chanSum[1]/=nPx\n chanSum[2]/=nPx\n \n chanSum[0] = parseInt(255 - chanSum[0])\n chanSum[1] = parseInt(255 - chanSum[0])\n chanSum[2] = parseInt(255 - chanSum[0])\n\n return chanSum\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2305,"value":"imAvgsColor = {\n // calculate the channel average for the cyan combined dye layer/coupler\n let chanSum = [0,0,0]\n let nPx = 0\n imByPixel(imCouplersReprodColor, (px) => {\n nPx+=1\n chanSum[0] += px[0]\n chanSum[1] += px[1]\n chanSum[2] += px[2]\n return px\n })\n chanSum[0]/=nPx\n chanSum[1]/=nPx\n chanSum[2]/=nPx\n\n return chanSum\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7417,"value":"couplerChanImpacts = [\n 0,\n impurityLevels[1]*255,\n impurityLevels[0]*255\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2625,"value":"greenmin = imGetChanMin(imCouplersReprodColor.data, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5246,"value":"### Forms","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1644,"value":"function cmyForm() {\n return Inputs.form([\n Inputs.range([0,1], {value: 1, label: html`${tcs(\"Yellow\")} Density`}),\n Inputs.range([0,1], {value: 1, label: html`${tcs(\"Magenta\")} Density`}),\n Inputs.range([0,1], {value: 1, label: html`${tcs(\"Cyan\")} Density`})\n ])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7361,"value":"function correctionForm() {\n return Inputs.form([\n Inputs.range([0,1], {value: 0, label: html`Base Correction`})\n ])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2199,"value":"function impurityForm() {\n return Inputs.form([\n Inputs.range([0,0.6], {value: 0.5, label: html`${tcs(\"Magenta\")} Impurity (${tcs(\"Blue\")} Absorption)`}),\n Inputs.range([0,0.4], {value: 0.3, label: html`${tcs(\"Cyan\")} Impurity (${tcs(\"Green\")} Absorption)`})\n ])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4423,"value":"function imSelectForm() {\n return Inputs.select(images.keys(), {value: \"primaries-building.jpg\", label: \"Change the image:\"})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6141,"value":"### Diagrams","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6631,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4287,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7879,"value":"dyeCouplerCombine(3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6938,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7053,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7768,"value":"function lineFunc(f, xs) {\n let ys = xs.map(f)\n return d3.transpose([xs, ys])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4550,"value":"### Images","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1744,"value":"imInv = cmy2im(imCMY)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1754,"value":"imShiftInv = {\n return cmy2im16(imCMYShift)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1759,"value":"imShiftReprod = {\n return imByChan(imShiftInv, (c) => {\n return 255-c\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2113,"value":"imCouplersInv = cmy2im16(imCMYCouplers)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2260,"value":"imCouplersReprodColor = {\n const greenFloor = correction * (couplerChanImpacts[1]*255/(255+couplerChanImpacts[1]))\n const blueFloor = correction * (couplerChanImpacts[2]*255/(255+couplerChanImpacts[2]))\n return imByPixel(imCouplersInv, (px) => {\n px[0] = 255 - px[0]\n px[1] = 255 - px[1]\n px[2] = 255 - px[2]\n\n px[1] = (px[1]-greenFloor)*255/(255-greenFloor)\n px[2] = (px[2]-blueFloor)*255/(255-blueFloor)\n \n return px\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2122,"value":"imCouplersReprod = imByChan(imCouplersInv, (c) => {\n return 255-c\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5235,"value":"### CMY-Split Dye Images","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1739,"value":"imCMY = rgb2cmy(imRGB)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1748,"value":"imCMYShift = {\n let cmyShift = structuredClone(imCMY)\n\n // cyan also absorbs some green light\n // so, the value of the red channel (0)\n // impacts the value of the green channel (1)\n cmyShift[0] = imByPixel(cmyShift[0], (px) => {\n px[1] -= (255 - px[0])*impurityLevels[1]\n return px\n })\n\n // magenta also absorbs some blue light\n // so, the value of the green channel (1)\n // impacts the value of the blue channel (2)\n cmyShift[1] = imByPixel(cmyShift[1], (px) => {\n px[2] -= (255 - px[1])*impurityLevels[0]\n return px\n })\n\n for (let chan = 0; chan < cmyShift.length; ++chan) {\n cmyShift[chan] = imByChan(cmyShift[chan], (c) => {\n c = 255 - (255-c)*cmyDensity[2-chan]\n return c\n })\n }\n \n return cmyShift\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6564,"value":"imCMYShiftRGB = {\n let rgb = structuredClone(imCMYShift)\n\n for (let chan = 0; chan < imCMYShift.length; ++chan) {\n rgb[chan] = imByPixel(rgb[chan], (px) => {\n px[0] = 255 - px[0]\n px[1] = 255 - px[1]\n px[2] = 255 - px[2]\n return px\n })\n }\n \n return rgb\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2099,"value":"cmyCouplers = {\n // just the dye couplers on their own\n let couplers = structuredClone(imCMYShift)\n couplers[0] = imByPixel(imCMYShift[0], (px) => {\n px[1] = 255-(px[0]*impurityLevels[1])\n px[0] = 255\n px[2] = 255\n return px\n })\n couplers[1] = imByPixel(imCMYShift[1], (px) => {\n px[2] = 255-(px[1]*impurityLevels[0])\n px[0] = 255\n px[1] = 255\n return px\n })\n couplers[2] = imByChan(imCMYShift[2], (c) => {\n return 255\n })\n\n return couplers\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2109,"value":"imCMYCouplers = {\n // dye couplers recombined into the cmy layers\n let cCombined = cmy2im([imCMYShift[0], cmyCouplers[0]])\n let mCombined = cmy2im([imCMYShift[1], cmyCouplers[1]])\n\n return [cCombined, mCombined, imCMYShift[2]]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5237,"value":"### RGB-Split Light Images","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1734,"value":"imRGB = imSplitRGB(imOrig)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2090,"value":"imShiftReprodRGB = imSplitRGB(imShiftReprod)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2119,"value":"imRGBCouplers = imSplitRGB(imCouplersReprod)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2319,"value":"imCouplersReprodColorRGB = {\n return imSplitRGB(imCouplersReprodColor)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4545,"value":"### Image Loading","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4397,"value":"image = images.get(imOrigName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1381,"value":"imOrig = {\n let canvwidth = 600\n const context = DOM.context2d(600, 600, 1)\n \n let w = image.naturalWidth\n let h = image.naturalHeight\n let ar = h / w\n w = 300\n h = w * ar\n context.drawImage(image, 0, 0, w, h)\n return context.getImageData(0, 0, w, h)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4363,"value":"images = new Map([\n [\"green-mallow.jpg\", FileAttachment(\"green-mallow.jpg\").image({width:300})],\n [\"red-white.jpg\", FileAttachment(\"red-white.jpg\").image({width:300})],\n [\"yellow-building.jpg\", FileAttachment(\"yellow-building.jpg\").image({width:300})],\n [\"primaries-building.jpg\", FileAttachment(\"primaries-building.jpg\").image({width:300})],\n [\"blue-purple-building.jpg\", FileAttachment(\"blue-purple-building.jpg\").image({width:300})]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W42","stdlib":"1","titling":"auto"}} 30:"$2f:body"