29:null 2a:["$","title",null,{"children":"Why is Color Negative Film Orange? - backup | Evan Dorsky | Observable"}] 2f:T5bb,Much better! Now our green- and red-sensitive layers will only record green and red light. The yellow filter has a blue bar next to it to indicate that it absorbs blue light – that's why it's colored yellow! So far, our film will record the color and intensity of the light that it was exposed to. But it won't yet form an image on the film corresponding to the light image. To accomplish this, we can add chemicals to our film, called **dye couplers**, which will form dyes in spots where the film was exposed to light. And just as we added three light-sensitive layers, each sensitive to a different primary color of light, we can add three layers of dye couplers, each of which will form one of the three primary colors of pigments: ${tcs('cyan')}, ${tcs('magenta')}, and ${tcs('yellow')}. For background on why we chose these colors for our dyes, see this section in the appendix: [Additive and Subtractive Color](#cell-643) So now we can add dye coupler layers to our film. But how do we decide which dye color to pair with each light-sensitive layer? To figure this out, let's examine the relationship between the additive and subtractive primary colors. ${tcs('Cyan')} dye has its color because it absorbs only red light. It doesn't interact with blue or green light. Meanwhile, ${tcs('magenta')} dye only absorbs green light, and ${tcs('yellow')} dye only absorbs blue light. Also, note how these corresponding colors are opposites on the color wheel:30:T64d,{ const svg = d3.create("svg") .attr("viewBox", [0, 0, 400, 200]) .style('background-color', 'black') function text(svg, pt, str, color) { arrow(svg, color) svg .append("text") .attr("x", pt[0]-2) .attr("y", pt[1]) .attr('text-anchor', 'end') .style("font-size", 10) .attr("dy", 4) .attr('fill', color) .text(str) } function lightray(svg, line, color) { arrow(svg, color) svg .append("path") .attr('d', d3.line()(line)) .attr('stroke', color) .attr('stroke-width', 6) .attr('marker-end', 'url(#arrow'+color+')') .attr('fill', 'none') } function circle(svg, pt, fill, stroke) { svg .append('circle') .attr('cx', pt[0]) .attr('cy', pt[1]) .attr('r', 10) .attr('fill', fill) .attr('stroke', stroke) } function dyeline(colorname, lightcolor, p0) { const white = 0xffffff const dyecolor = white - lightcolor const hwhite = hexcode(white) const hlight = hexcode(lightcolor) const hdye = hexcode(dyecolor) const offset = [70,0] const p1 = add(p0, offset) const p2 = add(p1, offset) text(svg, p0, colorname, hlight) lightray(svg, [p0, add(p1, [-18,0])], hlight) circle(svg, p1, 'none', hdye) lightray(svg, [add(p2, [-30,-30]), p2], hwhite) lightray(svg, [p2, add(p2, [50, 50])], hdye) circle(svg, p2, hdye, '#444') } dyeline('red', '0xff0000', [30,50]) dyeline('green', '0x00ff00', [30,80]) dyeline('blue', '0x0000ff', [30,110]) return svg.node() }31:T4e7,{ const svg = d3.create("svg") .attr("viewBox", [0, 0, 400, 250]) const eLabel = new Emulsion("", [ new ELayer("UV Filter", ["rgba(0,0,0,0)"], 20), new ELayer("Blue Sensitive Layer", ["rgba(0,0,255,.5)"], 20), new ELayer("Yellow Dye Coupler", ["rgba(0,0,0,0)"], 20), new ELayer("Yellow Filter", ["rgba(0,0,255,.5)"], 20), new ELayer("Green Sensitive Layer", ["rgba(0,255,0,.5)"], 20), new ELayer("Magenta Dye Coupler", ["rgba(0,0,0,0)"], 20), new ELayer("Red Sensitive Layer", ["rgba(255,0,0,.5)"], 20), new ELayer("Cyan Dye Coupler", ["rgba(0,0,0,0)"], 20), new ELayer("Film Base", ["rgba(0,0,0,0)"], 50) ], 10) const eFilm = new Emulsion("Color Film", [ new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(255,255,0,.5)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 50) ]) eLabel.draw(svg, [100, 10], "left") eFilm.draw(svg, [110, 10], "right") return svg.node() }32:T742,{ const svg = d3.create("svg") .attr("viewBox", [0, 0, 400, 250]) const eLabel = new Emulsion("", [ new ELayer("UV Filter", ["rgba(0,0,0,0)"], 20), new ELayer("Blue Sensitive Layer", ["rgba(0,0,255,.5)"], 20), new ELayer("Yellow Dye Coupler", ["rgba(0,0,0,0)"], 20), new ELayer("Yellow Filter", ["rgba(0,0,255,.5)"], 20), new ELayer("Green Sensitive Layer", ["rgba(0,255,0,.5)"], 20), new ELayer("Magenta Dye Coupler", ["rgba(0,0,0,0)"], 20), new ELayer("Red Sensitive Layer", ["rgba(255,0,0,.5)"], 20), new ELayer("Cyan Dye Coupler", ["rgba(0,0,0,0)"], 20), new ELayer("Film Base", ["rgba(0,0,0,0)"], 50) ], 10) const eFilm = new Emulsion("Color Film", [ new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(255,255,0,.5)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 50) ]) const eAfter = new Emulsion("After Processing", [ new ELayer("UV Filter", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("Yellow Dye Layer", ["rgba(255,255,0,1)"], 20), new ELayer("Yellow Filter (Cleared)", ["rgba(0,0,0,0)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("Magenta Dye Layer", ["rgba(255,0,255,1)"], 20), new ELayer("", ["rgba(0,0,0,0)"], 20), new ELayer("Cyan Dye Layer", ["rgba(0,255,255,1)"], 20), new ELayer("Film Base", ["rgba(0,0,0,0)"], 50) ]) eLabel.draw(svg, [100, 10], "left") eFilm.draw(svg, [110, 10], "right") eAfter.draw(svg, [210, 10], "right") return svg.node() }33:T7f1,{ const svg = d3.create("svg") .attr("viewBox", [0, 0, 400, 220]) const eBefore = new Emulsion("Before Processing", [ new ELayer("Protective Layer", [d3.color("rgba(0,0,0,0)")]), new ELayer("Blue Sensitive Layer", [d3.color("rgba(0,0,0,0)")], 20), new ELayer("Colorless Yellow Coupler", [d3.color("rgba(0,0,0,0)")]), new ELayer("Yellow Filter", [d3.color("rgba(255,255,0,255)")]), new ELayer("Green Sensitive Layer", [d3.color("rgba(0,0,0,0)")], 20), new ELayer("Yellow-Colored Magenta Coupler", [d3.color("rgba(255,255,0,0.5)")]), new ELayer("Interlayer", [d3.color("rgba(0,0,0,0)")]), new ELayer("Red Sensitive Layer", [d3.color("rgba(0,0,0,0)")], 20), new ELayer("Red-Colored Cyan Coupler", [d3.color("rgba(255,0,0,0.5)")]), new ELayer("Interlayer", [d3.color("rgba(0,0,0,0)")]), new ELayer("Antihalation Layer", [d3.color("rgba(0,0,0,1)")]), new ELayer("Film Base", [d3.color("rgba(0,0,0,0)")], 50) ]) const eAfter = new Emulsion("After Processing", [ new ELayer("Protective Layer", [d3.color("rgba(0,0,0,0)")]), new ELayer("Yellow Negative Image", [d3.color("rgba(255,255,0,1)")], 20), new ELayer("Yellow Coupler", [d3.color("rgba(0,0,0,0)")]), new ELayer("Yellow Filter (Cleared)", [d3.color("rgba(0,0,0,0)")]), new ELayer("Magenta Negative Image", [d3.color("rgba(255,0,200,1)")], 20), new ELayer("Yellow Residual Coupler", [d3.color("rgba(255,255,55,0.5)")]), new ELayer("Interlayer", [d3.color("rgba(0,0,0,0)")]), new ELayer("Cyan Negative Image", [d3.color("rgba(0,200,255,1)")], 20), new ELayer("Red Residual Coupler", [d3.color("rgba(255,55,0,0.5)")]), new ELayer("Interlayer", [d3.color("rgba(0,0,0,0)")]), new ELayer("Antihalation Layer (Cleared)", [d3.color("rgba(0,0,0,0)")]), new ELayer("Film Base", [d3.color("rgba(0,0,0,0)")], 50) ]) eBefore.draw(svg, [100, 10], "left") eAfter.draw(svg, [200, 10], "right") return svg.node() }34:Tb79,## Color reproduction What is the impact of imperfect dye colors? The ${tc('red', "#ff0000")}, ${tc('green', "#00ff00")}, and ${tc('blue', "#0000ff")} light-sensitive layers of the color film emulsion are designed to interact only with their respective colors. The light-sensitive layers do not have the impurity problems of the dyes (the yellow filter helps ensure this, as all the light-sensitive layers are sensitive to blue light). If they did – if all the light sensitive layers had significant sensitivity to green light, for example – it would be impossible to accurately reproduce the colors of a scene. Color saturation and separation would decrease and the image would be muddled with brown and gray tones. Imperfect dye colors have a similar effect. A dye is said to "control" a color when it absorbs that color. Dyes control their "opposite" colors on the color wheel. So: - Ideal ${tcs('yellow', "#ffff00")} dye controls only ${tc('blue', "#0000ff")} - Ideal ${tc('magenta', "#ff00ff")} dye controls only ${tc('green', "#00ff00")} - Ideal ${tc('cyan', "#00ffff")} dye controls only ${tc('red', "#ff0000")} We want this behavior because **we want each dye-forming layer to be sensitive to the color of light that it controls**. With ideal dyes: - The ${tc('blue', "#0000ff")} sensitive layer forms ${tc('yellow', "#ffff00")} dye, which controls ${tc('blue', "#0000ff")} light - The ${tc('green', "#00ff00")} sensitive layer forms ${tc('magenta', "#ff00ff")} dye, which controls ${tc('green', "#00ff00")} light - The ${tc('red', "#ff0000")} sensitive layer forms ${tc('cyan', "#00ffff")} dye, which controls ${tc('red', "#ff0000")} light When each dye controls exactly the color of light that triggers its formation, the dyes form a perfect color negative image of the scene. However, the dyes in color film are not all ideal: - The ${tc('yellow', "#ffff00")} dye controls ${tc('blue', "#0000ff")} (it is close enough to ideal) - The ${tc('"magenta"', "#ff00aa")} dye controls ${tc('green', "#00ff00")}, and also ${tc('blue', "#0000ff")} a little bit - The ${tc('"cyan"', "#00aaff")} dye controls ${tc('red', "#ff0000")}, and also ${tc('green', "#00ff00")} a little bit This means that if we pass light through the film without correcting for the impurities of the magenta and cyan dyes, we will be looking at a negative image where: - The intensity of ${tc('green', "#00ff00")} light is controlled by the ${tc('"magenta"', "#ff00aa")} layer, but also by the ${tc('"cyan"', "#00aaff")} layer a little bit - The intensity of ${tc('blue', "#0000ff")} light is controlled by the ${tc('yellow', "#ffff00")} layer, but also by the ${tc('"magenta"', "#ff00aa")} layer a little bit When one color of light is controlled by a dye that was not formed by that same color of light, it's as if the light-sensitive layers had been sensitive to more than one color of light. So color reproduction is muddled in the same way.35:T5ec,## The orange mask: a yellow mask and a red mask Let's take our magenta layer. The problem is that we can't modulate the amount of green light that passes through it without also modulating the amount of blue light as a side effect. The real difficulty is not that the magenta layer absorbs some amount of blue light, but that it absorbs a _varying_ amount of blue light based on how much green light it absorbs! We can't just compensate for this effect with a simple yellow filter that absorbs some constant amount of blue light. But there is another way. The magenta layer isn't _that_ sensitive to blue light. At very high densities, it will absorb enough blue light to deteriorate color reproduction, but it still lets through most blue light. If we can pair the magenta layer with something that controls blue light _inversely_ to the magenta layer's control of blue light, the combined layer will always absorb a (small) constant amount of blue light. Then we _can_ use a simple yellow filter to cancel out the effect! The above is what is done in color negative film. In the magenta layer, the dye coupler is colored with a yellow dye that controls blue light. The less magenta dye formed in a given area, the more residual yellow coupler is left behind. The more magenta dye, the less yellow coupler. Since both the magenta dye and the yellow coupler control blue light (and they are tuned to control it the same amount), the combined layer will always control (or absorb) a constant amount of blue light!36:T436,## Light passing through processed film Below is a diagram of FUJI SUPERIA X-TRA 400 on the left, and a hypothetical film stock on the right with all clear coupler layers. White light is passing through both emulsions from the top. Whenever the light is controlled by a layer, it is depicted split into red, green, and blue channels. At the bottom of each emulsion, the "combined light color" shows the color you would see if you were looking through the film from the bottom (with the film held between the light and your eyes). The sliders below vary the density of the three dye layers in both emulsions. As you play with the sliders, note: - When all three dye densities are set to their minimum, the orange mask is clearly visible on the left. - The dye coupler intensities in the left emulsion vary inversely with their corresponding dye layers. - Moving the magenta slider controls the blue light under the magenta layer in the right emulsion, but not in the left. - Moving the cyan slider controls green light under the cyan layer on the right, but not on the left.37:Tbe7,{ const svg = d3.create("svg") .attr("viewBox", [0, 0, 400, 380]) let impurityMag = 90 let impurityCyan = 70 let yellow = "rgba(255,255,0,"+YellowColor/255+")" let yellowAbsorbs = "rgba(0,0,255,"+YellowColor/255+")" let magenta = "rgba(255,0,"+(255-impurityMag)+","+MagentaColor/255+")" let magentaAbsorbs = "rgba(0,255,"+impurityMag+","+MagentaColor/255+")" let magCoupler = "rgba(255,255,"+impurityMag+","+(0.8-(MagentaColor/318))+")" let magCouplerAbsorbs = "rgba(0,0,"+impurityMag+","+(1-(MagentaColor/255))+")" let cyan = "rgba(0,"+(255-impurityCyan)+",255,"+CyanColor/255+")" let cyanAbsorbs = "rgba(255,"+impurityCyan+",0,"+CyanColor/255+")" let cyanCoupler = "rgba(255,"+impurityCyan+",0,"+(0.8-(CyanColor/318))+")" let cyanCouplerAbsorbs = "rgba(0,"+impurityCyan+",0,"+(1-(CyanColor/255))+")" const eLight = new Emulsion("SUPERIA X-TRA 400", [ new ELayer("Protective Layer", ["rgba(0,0,0,0)"]), new ELayer("Yellow Negative Image", [yellow], 20, "emulsion", yellowAbsorbs), new ELayer("Yellow Coupler", ["rgba(0,0,0,0)"]), new ELayer("Yellow Filter (Cleared)", ["rgba(0,0,0,0)"]), new ELayer("Magenta Negative Image", [magenta], 20, "emulsion", magentaAbsorbs, false), new ELayer("Yellow Positive Image", [magCoupler], 10, "emulsion", magCouplerAbsorbs), new ELayer("Interlayer", ["rgba(0,0,0,0)"]), new ELayer("Cyan Negative Image", [cyan], 20, "emulsion", cyanAbsorbs, false), new ELayer("Red Positive Image", [cyanCoupler], 10, "emulsion", cyanCouplerAbsorbs), new ELayer("Interlayer", ["rgba(0,0,0,0)"]), new ELayer("Antihalation Layer (Cleared)", ["rgba(0,0,0,0)"]), new ELayer("Film Base", ["rgba(0,0,0,0)"], 50) ]) const eLightClearCouplers = new Emulsion("Clear Couplers", [ new ELayer("Protective Layer", ["rgba(0,0,0,0)"]), new ELayer("Yellow Negative Image", [yellow], 20, "emulsion", yellowAbsorbs), new ELayer("Yellow Coupler", ["rgba(0,0,0,0)"]), new ELayer("Yellow Filter (Cleared)", ["rgba(0,0,0,0)"]), new ELayer("Magenta Negative Image", [magenta], 30, "emulsion", magentaAbsorbs), new ELayer("Interlayer", ["rgba(0,0,0,0)"]), new ELayer("Cyan Negative Image", [cyan], 30, "emulsion", cyanAbsorbs), new ELayer("Interlayer", ["rgba(0,0,0,0)"]), new ELayer("Antihalation Layer (Cleared)", ["rgba(0,0,0,0)"]), new ELayer("Film Base", ["rgba(0,0,0,0)"], 50) ]) const light = eLight.passLight("rgba(255,255,255,1)") eLight.draw(svg, [100, 10], "left", true) const lightLayer = new ELayer("Combined Light Color", [light], 30) lightLayer.draw(svg, [100, 302], "left") const lightClear = eLightClearCouplers.passLight("rgba(255,255,255,1)") eLightClearCouplers.draw(svg, [200, 10], "right", true) const lightClearLayer = new ELayer("Combined Light Color", [lightClear], 30) lightClearLayer.draw(svg, [200, 302], "right") return svg.node() }38:T9f7,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", textx) .style("text-anchor", textAlign) .attr("y", origin[1]+this.thickness/2) .attr("dy", this.textSize/4) .style("font-size", this.textSize/2) .text(this.label) } } return ELayer }39:T50d,Emulsion = { class Emulsion { constructor(title, layers, width=100) { 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]) .attr("y", origin[1]) .style("font-size", 10) .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 }3a:[{"id":"6233181d82ba40ec6ef87d9594860a6208a6ebf149bf8be14b373f28c76f0d98a998ab6cebd2fa5dfc935121bfe7f469411e7d52d7654a211a60abe258cfde04","href":"https://static.observableusercontent.com/files/6233181d82ba40ec6ef87d9594860a6208a6ebf149bf8be14b373f28c76f0d98a998ab6cebd2fa5dfc935121bfe7f469411e7d52d7654a211a60abe258cfde04","name":"superia-layers.jpg","type":"image/jpeg","lastModified":1677906118168.429,"size":802578},{"id":"0a70bcf9f281795ffe251930f705a387c80ac0936957ad3b6777749e1229d7bf078340b24f24e86902e36c75b9e189d1706b1d9e010ac58a64cbb8b3ad067be4","href":"https://static.observableusercontent.com/files/0a70bcf9f281795ffe251930f705a387c80ac0936957ad3b6777749e1229d7bf078340b24f24e86902e36c75b9e189d1706b1d9e010ac58a64cbb8b3ad067be4","name":"image.jpeg","type":"image/jpeg","lastModified":1677906118168.429,"size":88636},{"id":"6d27938de432be16397e98f14f1cf0e7d21090e2beb84596068c3b51fe62bec0dda54730016eeacb30bbf1f9d4dc4e411a16a91cef2056e5d89dac2cc5c04282","href":"https://static.observableusercontent.com/files/6d27938de432be16397e98f14f1cf0e7d21090e2beb84596068c3b51fe62bec0dda54730016eeacb30bbf1f9d4dc4e411a16a91cef2056e5d89dac2cc5c04282","name":"image@2.png","type":"image/png","lastModified":1677906118168.429,"size":83089},{"id":"935a323049a73fd92911280d557968eaee73d1d61009c02afb01b80b292d2c3a3acb8c26def2d0c7d8509e75c9e743c2a3fd8d0271838368541985a7854582e6","href":"https://static.observableusercontent.com/files/935a323049a73fd92911280d557968eaee73d1d61009c02afb01b80b292d2c3a3acb8c26def2d0c7d8509e75c9e743c2a3fd8d0271838368541985a7854582e6","name":"IMG_1628.jpeg","type":"image/jpeg","lastModified":1677906118168.429,"size":1351651},{"id":"1129b33701ae0fdd749a9663ee133b9437a902dcf64fd4b8bf51e26bc02e567d4ec88cbba078b3289fc82dff1859212680375a8c3376046ad101607c18e8e7cb","href":"https://static.observableusercontent.com/files/1129b33701ae0fdd749a9663ee133b9437a902dcf64fd4b8bf51e26bc02e567d4ec88cbba078b3289fc82dff1859212680375a8c3376046ad101607c18e8e7cb","name":"image-1@1.jpg","type":"image/jpeg","lastModified":1677906118168.429,"size":68913}] 2d:{"id":"762092f18aa1750a","slug":null,"title":"Why is Color Negative Film Orange? - backup","thumbnail":"d0f5f859d3912f3c2b09522aec76744aecf1e1b3efcbc6258090c98b858f0153","access_level":"public","create_time":"$D2023-03-04T05:01:58.168Z","update_time":"$D2023-03-27T04:29:02.591Z","view_time":null,"first_public_time":"$D2023-03-04T05:01:58.168Z","fork":{"id":"d53438f4d1d33426","slug":"understanding-color-film","title":"Why is Color Negative Film Orange?","owner":{"id":"4d3a358c72bcae59","login":"dorskyee","name":"Evan Dorsky"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4d3a358c72bcae59","login":"dorskyee","name":"Evan Dorsky","avatar_url":"https://avatars-next.observableusercontent.com/978b0a566d0f96cc067fbd2f24ae7b18fb6b4e7d7e87d7ad2cf8cde4fd1b7846","tier":"starter_2024"},"version":2772,"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":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Why is Color Negative Film Orange? - backup","cells":[{"id":0,"value":"# Why is Color Negative Film Orange? - backup\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":758,"value":"negativeFilm = FileAttachment(\"IMG_1628.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"**Note: This notebook is very much WIP!! Halfway through it loses coherence. But feel free to browse and leave comments.**\n\nMore specifically: Why does color negative film have an orange base? Why isn't the base clear? Or, put differently – why isn't a color negative simply an inversion of the true color image?\n\nThe answer is usually given like this: \"the dyes in color negative film are impure\".\n\nThis is a true statement, but it's not an answer to the question. It doesn't draw a line from impure dyes (what does it even mean for a dye to be \"impure\"?) to the orange base color.\n\nI've read many explanations in my quest to understand what's meant by this often-given answer – the best I've found is [this one](http://www.brianpritchard.com/why_colour_negative_is_orange.htm).\n\nBut I still find this explanation difficult to follow. I have a hard time matching the text to the diagrams. So I'm going to try to work it out here with big, interactive graphics that flow with the text.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"## Color film basics\n\nColor negative film consists of a thin, optically clear plastic film base (these days usually Polyester) with multiple layers of chemicals with various properties (some permanently change when exposed to light, some form dyes when they react with processing chemicals, some absorb certain colors of light, etc.) embedded in layers of gelatin that are layered onto the base, and thus onto each other, in a certain order.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":786,"value":"## Designing color negative film\n\nLet's build up a color negative film stock of our own and see what problems we run into.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1030,"value":"Let's start our film with a thin sheet of optically clear plastic. This is called the **film base**, and we'll spread chemicals on top of it to give our film its special properties.\n\nTo take a picture, we'll put our film behind a lens. The lens projects an image of the world onto the film. To record the light that hits the film, we can put light-sensitive chemicals onto our film. These chemicals change irreversibly when they are exposed to light, and they are capable of recording the amount of light that hit them. If we spread three layers of these chemicals on our film, each sensitive to one of the three primary colors of light (red, green, and blue), then we can record the precise color of the light that hit our film.\n\nHere's what our film is looking like so far:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":794,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, 400, 150])\n \n const eLabel = new Emulsion(\"\", [\n new ELayer(\"Red Sensitive Layer\", [\"rgba(255,0,0,.5)\"], 20),\n new ELayer(\"Green Sensitive Layer\", [\"rgba(0,255,0,.5)\"], 20),\n new ELayer(\"Blue Sensitive Layer\", [\"rgba(0,0,255,.5)\"], 20),\n new ELayer(\"Film Base\", [\"rgba(0,0,0,0)\"], 50)\n ], 10)\n \n const eFilm = new Emulsion(\"Color Film\", [\n new ELayer(\"\", [\"rgba(0,0,0,0)\"], 20),\n new ELayer(\"\", [\"rgba(0,0,0,0)\"], 20),\n new ELayer(\"\", [\"rgba(0,0,0,0)\"], 20),\n new ELayer(\"\", [\"rgba(0,0,0,0)\"], 50)\n ])\n \n eLabel.draw(svg, [100, 10], \"left\")\n eFilm.draw(svg, [110, 10], \"right\")\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1221,"value":"We put our chemicals down in RGB order since order doesn't seem to matter at this point.\n\nBut we're already running into problems. In the real world, it's difficult to make chemicals that are sensitive _only_ to green or red light. In fact, all of the light sensitive chemicals we can use are sensitive to blue and UV light as well. Their sensitivity curves look like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1226,"value":"But we can solve this problem. If we stack our blue-sensitive layer on top, we can protect the lower layers from any blue light that our blue-sensitive layer doesn't absorb. Also, we can put a UV filter above all our layers, since we don't want to record any UV light. So now our film looks like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1228,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, 400, 200])\n \n const eLabel = new Emulsion(\"\", [\n new ELayer(\"UV Filter\", [\"rgba(0,0,0,0)\"], 20),\n new ELayer(\"Blue Sensitive Layer\", [\"rgba(0,0,255,.5)\"], 20),\n new ELayer(\"Yellow Filter\", [\"rgba(0,0,255,.5)\"], 20),\n new ELayer(\"Green Sensitive Layer\", [\"rgba(0,255,0,.5)\"], 20),\n new ELayer(\"Red Sensitive Layer\", [\"rgba(255,0,0,.5)\"], 20),\n new ELayer(\"Film Base\", [\"rgba(0,0,0,0)\"], 50)\n ], 10)\n \n const eFilm = new Emulsion(\"Color Film\", [\n new ELayer(\"\", [\"rgba(0,0,0,0)\"], 20),\n new ELayer(\"\", [\"rgba(0,0,0,0)\"], 20),\n new ELayer(\"\", [\"rgba(255,255,0,.5)\"], 20),\n new ELayer(\"\", [\"rgba(0,0,0,0)\"], 20),\n new ELayer(\"\", [\"rgba(0,0,0,0)\"], 20),\n new ELayer(\"\", [\"rgba(0,0,0,0)\"], 50)\n ])\n \n eLabel.draw(svg, [100, 10], \"left\")\n eFilm.draw(svg, [110, 10], \"right\")\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1295,"value":"

\n
\n[Wikipedia]","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1792,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2049,"value":"function hexcode(d, padding=6) {\n var hex = Number(d).toString(16);\n padding = typeof (padding) === \"undefined\" || padding === null ? padding = 2 : padding;\n\n while (hex.length < padding) {\n hex = \"0\" + hex;\n }\n\n return '#'+hex;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1900,"value":"function add(a, b) {\n let c = structuredClone(a)\n for (let i = 0; i < a.length; ++i) {\n c[i] = a[i]+b[i]\n }\n return c\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1820,"value":"function arrow(svg, color) {\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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1312,"value":"So if we pair the light sensitive layers with dyes of the opposite colors, then our film will create an _inverted color image_! The more red light hit our film, the more cyan dye there will be. Same for green and magenta, blue and yellow. Let's see our film now:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1315,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"The dye forming layers are colorless, though. Why? They're colorless now because they won't take on their colors until after **processing**.\n\nDuring processing, the film will be bathed in chemical solutions that will activate the dye couplers, causing them to form dyes only where they were exposed to their corresponding color of light.\n\nWe can visualize this by showing the film before and after processing:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1327,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"Processing causes dyes to form. Processing will also have to clear the yellow filter, or we won't be able to see any blue light in our image!\n\nSo our color film is looking good. Except with dyes, we run into another problem: there aren't any real world dyes we can use that are perfectly cyan, or perfectly magenta. Our dye choice is limited to certain chemicals because we need our dyes to be colorless until they're bathed in the processing chemicals. The closest-to-perfect dyes we can get look like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1348,"value":"{\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, 400, 100])\n \n const eOurs = new Emulsion(\"Our Dyes\", [\n new ELayer(\"Yellow Dye\", [\"rgba(255,255,0,1)\"], 20),\n new ELayer(\"Magenta Dye\", [\"rgba(255,0,\"+(1-impurityLevels[1])*255+\",1)\"], 20),\n new ELayer(\"Cyan Dye\", [\"rgba(0,\"+(1-impurityLevels[0])*255+\",255,1)\"], 20)\n ])\n \n const eIdeal = new Emulsion(\"Ideal Dyes\", [\n new ELayer(\"Yellow Dye\", [\"rgba(255,255,0,1)\"], 20),\n new ELayer(\"Magenta Dye\", [\"rgba(255,0,255,1)\"], 20),\n new ELayer(\"Cyan Dye\", [\"rgba(0,255,255,1)\"], 20)\n ])\n \n eOurs.draw(svg, [100, 10], \"left\")\n eIdeal.draw(svg, [200, 10], \"right\")\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2209,"value":"viewof impurityLevels = impurityForm()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1377,"value":"You can drag the sliders below to change the degree of impurity of our magenta and cyan dyes. These sliders will determine the impurity levels of both dyes throughout the explanation.\n\nSo our dyes are a little impure. But how much will this affect the color accuracy of our image? Maybe it'll be fine. Let's see.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1440,"value":"## Color reproduction with impure dyes\n\nHere's an example image that we'll use to explore the impact of impure dyes on the color reproduction accuracy of our film:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$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 = 200\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","output":"$undefined","database":"$undefined"},{"id":1730,"value":"{\n const context = DOM.context2d(600, 300, 1)\n // draw the images\n context.putImageData(imOrig, 0, 0)\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1384,"value":"If a lens projects this image onto our film, the three dye layers of our film will look like this after processing:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1702,"value":"{\n const context = DOM.context2d(600, 300, 1)\n // draw the images\n context.putImageData(imCMYShift[0], 0, 0)\n context.putImageData(imCMYShift[1], 200, 0)\n context.putImageData(imCMYShift[2], 400, 0)\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1396,"value":"Superimposing those three layers, we'll get this inverted dye image:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1394,"value":"{\n const context = DOM.context2d(600, 300, 1)\n \n context.putImageData(imShiftInv, 0, 0)\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1403,"value":"Let's invert this inverted image and put it side-by-side with our original image to see how accurate our reproduced colors are:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1399,"value":"{\n const context = DOM.context2d(600, 300, 1)\n \n context.putImageData(imOrig, 0, 0)\n context.putImageData(imShiftReprod, 200, 0)\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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[0]\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[1]\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[chan]\n return c\n })\n }\n \n return cmyShift\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"Here are the impurity sliders again so that you can see how different impurity levels influence our color reproduction accuracy:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2217,"value":"Inputs.bind(impurityForm(), viewof impurityLevels)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1422,"value":"As you can see, even small dye impurities throw off the color accuracy.\n\nMaybe our film is accurate enough for some purposes. The typical consumer might not care if their subjects are a little color-shifted. But for professional customers like the film industry, color accuracy is critical – especially for the colors in skin tones (and to the question \"_which_ skin tones?\", see this fascinating article from the [New York Times](https://www.nytimes.com/2019/04/25/lens/sarah-lewis-racial-bias-photography.html)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2720,"value":"{\n const canvh = 300\n const imh = 300\n const context = DOM.context2d(800, canvh, 1)\n const yoffset = (canvh - imh)/2\n context.canvas.style = 'background-color: black;'\n \n context.putImageData(imOrig, 0, yoffset)\n context.putImageData(imShiftInv, 300, yoffset)\n context.putImageData(imShiftReprod, 600, yoffset)\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"So how can we reproduce accurate colors with impure dyes?\n\nOur film can _record_ colors accurately – that is, we can precisely tune the sensitivity of our red-, green-, and blue-sensitive layers. The problem just in the color _reproduction_ – the color accuracy of our dyes.\n\nMaybe we can modify our _printing_ process. Color negative film is not designed to be viewed directly – nobody wants to look at a negative image. The negative must be printed – either by being projected onto photo paper, or by being scanned and inverted digitally for viewing on a screen. In this explanation we'll be focusing on digital scanning and inversion.\n\nCan we simply remove our dye impurities digitally? It turns out we can't. To see why not, let's examine the red, green, and blue color channels of a digital reproduction of the image from our film negative:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1458,"value":"{\n const context = DOM.context2d(600, 600, 1)\n\n // draw the images\n context.putImageData(imShiftReprod, 0, 0)\n context.putImageData(imShiftReprodRGB[0], 0, 300)\n context.putImageData(imShiftReprodRGB[1], 200, 300)\n context.putImageData(imShiftReprodRGB[2], 400, 300)\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1462,"value":"Inputs.bind(impurityForm(), viewof impurityLevels)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1652,"value":"viewof cmyDensity = cmyForm()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1469,"value":"Here there are new sliders for the **density** (meaning amount of dye) of the cyan, magenta, and yellow dye layers. Changing the density of the cyan dye mostly impacts the red channel, but when there are impurities in the cyan dye, cyan dye density also impacts the green channel – and the green channel is supposed to be influenced only by the magenta channel.\n\nSince two dyes – cyan and magenta – impact the green channel, there's no way for us to tell, in our digital image, which dye is causing what impact. That means that we can't tell whether our image has a green component because green light hit the film, or because impurities from our cyan dye are impacting the green channel. That means that red light is bleeding into the green channel of our reproduced image.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1564,"value":"{\n const context = DOM.context2d(600, 900, 1)\n\n // combine the dye layers and their corresponding couplers\n let cCombined = cmy2im([imCMYShift[0], cmyCouplers[0]])\n let mCombined = cmy2im([imCMYShift[1], cmyCouplers[1]])\n\n // draw the images\n context.putImageData(imCMYShift[0], 0, 0)\n context.putImageData(imCMYShift[1], 200, 0)\n context.putImageData(imCMYShift[2], 400, 0)\n context.putImageData(cmyCouplers[0], 0, 300)\n context.putImageData(cmyCouplers[1], 200, 300)\n context.putImageData(cmyCouplers[2], 400, 300)\n context.putImageData(imCMYCouplers[0], 0, 600)\n context.putImageData(imCMYCouplers[1], 200, 600)\n context.putImageData(imCMYCouplers[2], 400, 600)\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1734,"value":"imRGB = imSplitRGB(imOrig)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2324,"value":"Inputs.bind(impurityForm(), viewof impurityLevels)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1663,"value":"Inputs.bind(cmyForm(), viewof cmyDensity)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1739,"value":"imCMY = rgb2cmy(imRGB)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1744,"value":"imInv = cmy2im(imCMY)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1754,"value":"imShiftInv = {\n console.log(\"combine cmyshift back together\")\n return cmy2im16(imCMYShift)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":2090,"value":"imShiftReprodRGB = imSplitRGB(imShiftReprod)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1644,"value":"function cmyForm() {\n return Inputs.form([\n Inputs.range([0,1], {value: 1, label: 'Cyan Density'}),\n Inputs.range([0,1], {value: 1, label: 'Magenta Density'}),\n Inputs.range([0,1], {value: 1, label: 'Yellow Density'})\n ])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2199,"value":"function impurityForm() {\n return Inputs.form([\n Inputs.range([0,0.4], {value: 0.3, label:\"Cyan Impurity (Green Absorption)\"}),\n Inputs.range([0,0.4], {value: 0.3, label:\"Magenta Impurity (Blue Absorption)\"})\n ])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2099,"value":"cmyCouplers = {\n // create the colored dye couplers\n let couplers = structuredClone(imCMYShift)\n couplers[0] = imByPixel(imCMYShift[0], (px) => {\n px[1] = 255-(px[0]*impurityLevels[0])\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[1])\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","output":"$undefined","database":"$undefined"},{"id":2109,"value":"imCMYCouplers = {\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","output":"$undefined","database":"$undefined"},{"id":2119,"value":"imRGBCouplers = imSplitRGB(imCouplersReprod)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1589,"value":"{\n const context = DOM.context2d(600, 900, 1)\n\n // draw the images\n context.putImageData(imCouplersReprod, 0, 0)\n context.putImageData(imCMYCouplers[0], 0, 300)\n context.putImageData(imCMYCouplers[1], 200, 300)\n context.putImageData(imCMYCouplers[2], 400, 300)\n context.putImageData(imRGBCouplers[0], 0, 600)\n context.putImageData(imRGBCouplers[1], 200, 600)\n context.putImageData(imRGBCouplers[2], 400, 600)\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1627,"value":"Introducing colored couplers has allowed us to restrict the control of all three layers to their corresponding color channels in the final image. But our color reproduction has gotten much worse. The \n\nHowever, this tint is now straightforward to remove because it consists of impacts on the green and blue channels of our reproduced image that are _constant, regardless of the content of the dye layers_.\n\nLet's measure these impacts so that we can remove them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1637,"value":"cyanImpactOnGreen = {\n // calculate the channel average for the cyan combined dye layer/coupler\n let chanSum = [0,0,0]\n let nPx = 0\n imByPixel(imCMYCouplers[0], (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 // draw the images\n return parseInt(255-chanSum[1])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2181,"value":"magentaImpactOnBlue = {\n // calculate the channel average for the magenta combined dye layer/coupler\n let chanSum = [0,0,0]\n let nPx = 0\n imByPixel(imCMYCouplers[1], (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 // draw the images\n return parseInt(255-chanSum[2])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2226,"value":"Inputs.bind(impurityForm(), viewof impurityLevels)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2192,"value":"The cyan coupler has a constant impact of ${cyanImpactOnGreen} on the green channel, and the magenta coupler has a constant impact of ${magentaImpactOnBlue} on the blue channel.\n\nThe above values are influenced by the dye impurity levels, but not by the channel density levels. And impurity levels are fixed properties of the dyes we chose, so they will not change in practice.\n\nYou can think of these values as the amount of green and blue light that will be absorbed by the film no matter what, even in spots on the film that were not hit by any blue or green light.\n\nLet's look at the dye image again:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2240,"value":"{\n const context = DOM.context2d(600, 300, 1)\n\n // draw the images\n context.putImageData(imCouplersInv, 0, 0)\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2254,"value":"Inputs.bind(impurityForm(), viewof impurityLevels)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2250,"value":"Inputs.bind(cmyForm(), viewof cmyDensity)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2244,"value":"Make sure the impurity levels are above 0, then set the cyan, magenta, and yellow density levels all to 0. What's left is just the colored couplers absorbing some green and blue light.\n\nAt certain impurity levels, the image will appear light orange – just like the orange mask of real color negative film! We've introduced our own orange mask to account for the impurities in our dyes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2319,"value":"imCouplersReprodColorRGB = {\n return imSplitRGB(imCouplersReprodColor)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2262,"value":"{\n const context = DOM.context2d(600, 600, 1)\n\n // draw the images\n context.putImageData(imCouplersReprodColor, 0, 0)\n context.putImageData(imShiftReprod, 200, 0)\n context.putImageData(imOrig, 400, 0)\n context.putImageData(imCouplersReprodColorRGB[0], 0, 300)\n context.putImageData(imCouplersReprodColorRGB[1], 200, 300)\n context.putImageData(imCouplersReprodColorRGB[2], 400, 300)\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2313,"value":"Inputs.bind(impurityForm(), viewof impurityLevels)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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(imCouplersReprod, (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","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":14,"value":"superiaLayers1 = FileAttachment(\"superia-layers.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"The emulsion contains layers which will (after processing) form yellow, magenta, and cyan dyes in proportion with how much blue, green, and red light the film was exposed to.\n\nLet's simplify this diagram a bit and color the layers:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"This diagram explains why this particular color negative film stock has an orange base: it contains yellow- and red-colored layers. The dye couplers are consumed when they form dye, losing their own color. So:\n\n- The ${tc('yellow-colored magenta coupler', \"#ffff00\")} creates a ${tc('yellow positive image', \"#ffff00\")} beneath the ${tc('magenta negative image', \"#ff00ff\")}.\n- The ${tc('red-colored cyan coupler', \"#ff0000\")} creates a ${tc('red positive image', \"#ff0000\")} beneath the ${tc('cyan negative image', \"#00ffff\")}.\n\nThe dye couplers in these layers have been colored when they could have been clear. But why add color to the couplers? If the couplers were not colored, the film would have a clear base and no tint, which seems preferable for accurate color reproduction.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":771,"value":"## Impure dyes\n\nHere is where the \"impure dyes\" of the canonical explanation come into play. Only certain dyes are suitable for color negative film because of chemical constraints (more on this later). So the choice of dyes is limited. A \"pure\" dye, for our purposes, is one that only absorbs light of one of the additive primary colors (red, green, or blue), and passes all other colors. However:\n\n- Our ${tc('magenta', \"#ff00ff\")} dye, which is only supposed to absorb ${tc('green', '#00ff00')} light, also absorbs some ${tc('blue', '#0000ff')} light.\n- Our ${tc('cyan', \"#00ffff\")} dye, which is only supposed to absorb ${tc('red', '#ff0000')} light, also absorbs some ${tc('green', '#00ff00')} light.\n\nThe color of a dye is determined by the spectrum of light it absorbs. So as a result of these dye impurities, the ${tc('magenta', \"#ff00ff\")} dye is ${tc('not quite magenta', \"#ff00aa\")}, and the ${tc('cyan', \"#00ffff\")} dye is ${tc('not quite cyan', \"#00aaff\")}. The dye colors are imperfect.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":701,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":725,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":633,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":399,"value":"viewof YellowColor = Inputs.range([1, 254], {label: \"Yellow Density\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"viewof MagentaColor = Inputs.range([1, 254], {label: \"Magenta Density\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"viewof CyanColor = Inputs.range([1, 254], {label: \"Cyan Density\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1260,"value":"### Additive and Subtractive Color\n\n**Light** (the light that hits our film) operates as additive color. The primary colors of additive color are ${tc('red', \"#ff0000\")}, ${tc('green', \"#00ff00\")}, and ${tc('blue', \"#0000ff\")}.\n\n**Pigment** (the dye that forms on our film) operates as subtractive color. The primary colors of subtractive color are ${tcs('cyan')}, ${tcs('magenta')}, and ${tcs('yellow')}.\n\nThe chart below shows how additive and subtractive colors mix, as well as the relationship between the additive and subtractive primary colors.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1265,"value":"![image.jpeg](${await FileAttachment(\"image.jpeg\").url()})\n[[Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Subtractive-Additive-Colour-Mixing.jpg)]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1276,"value":"\n\n[This video](https://www.youtube.com/watch?v=GHaQy4Lg7Jw) also does a great job of introducing these concepts.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":645,"value":"// textcolor function from https://observablehq.com/@observablehq/text-color-annotations-in-markdown\n\nfunction tc(content, style = {}) {\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 const {\n background,\n color = yiq(background) >= 0.6 ? \"#111\" : \"white\", \n padding = \"0 5px\",\n borderRadius = \"4px\",\n fontWeight = 800,\n ...rest\n } = typeof style === \"string\" ? {background: style} : style;\n return htl.html`${content}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"function tcs(content) {\n let contentSplit = content.split(\" \")\n\n return tc(content, contentSplit[0])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":2489,"value":"{\n const context = DOM.context2d(600, 600, 1)\n\n // draw the images\n context.putImageData(imCouplersReprod, 0, 0)\n context.putImageData(imCouplersReprodColor, 200, 0)\n context.putImageData(imCouplersInv, 400, 0)\n context.putImageData(imCouplersReprodColorRGB[0], 0, 300)\n context.putImageData(imCouplersReprodColorRGB[1], 200, 300)\n context.putImageData(imCouplersReprodColorRGB[2], 400, 300)\n \n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2493,"value":"Inputs.bind(impurityForm(), viewof impurityLevels)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2113,"value":"imCouplersInv = cmy2im16(imCMYCouplers)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2625,"value":"greenmin = imGetChanMin(imCouplersReprodColor.data, 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2260,"value":"imCouplersReprodColor = {\n const greenFloor = cyanImpactOnGreen*255/(255+cyanImpactOnGreen)\n const blueFloor = magentaImpactOnBlue*255/(255+magentaImpactOnBlue)\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","output":"$undefined","database":"$undefined"},{"id":2122,"value":"imCouplersReprod = imByChan(imCouplersInv, (c) => {\n return 255-c\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2473,"value":"couplerChanImpacts = [0, cyanImpactOnGreen, magentaImpactOnBlue]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":907,"value":"function rgb2cmy(rgb) {\n let cmy = structuredClone(rgb)\n \n for (let chan = 0; chan < cmy.length; 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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":1199,"value":"image = FileAttachment(\"image-1@1.jpg\").image({width: 200})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 2e:"$2d:body"