31:T41b,imageMatrixFull = { const svg = d3.select(createSVG(width, height)) const filter = DOM.uid("color"); const defs = svg.append("defs"); const imageMatrix = defs.append("filter").attr("id", filter.id); let change = 0; imageMatrix.append("feColorMatrix") .attr("in", "SourceGraphic") .attr("type","matrix") .attr("values", `${r3} 0 0 0 ${m3} 0 ${change} 0 0 ${m3} 0 0 ${b3} 0 ${m3} 0 0 0 ${a3} ${m3}`); const image = svg.append("image") .attr("xlink:href", "https://uploads6.wikiart.org/images/victor-vasarely/tigres-1938.jpg") .attr("width", width) .attr("height", height) .style("filter", filter) let i = 0; let t = d3.interval(() => { console.log(change) change = (i == 0 ? 3.5 : .5); imageMatrix.select("feColorMatrix") .transition() .attr("values", `${r3}, 0, 0, 0, ${m3} , 0, ${change}, 0, 0, ${m3}, 0, 0, ${b3}, 0, ${m3},0, 0, 0, ${a3}, ${m3}`); i = (i == 0 ? 1 : 0); image.style("filter", filter) }, 1000) return svg.node() }32:Tb42,viewof kernel = { let ui = html`

	r	g	b	a	m
r
g
b
a

`; let inputs = ui.querySelectorAll('input'); function valid() { let sum = 0; for (let k of kernel) sum += k; console.log(sum); return sum === 16; } let kernel = [8.16, -20, -20, 20, -20, 0.75, 1.19, 2.33, -20, -20, -20, 20, 1.14, 20, -18.71, 1, 1, 1, -1, 0.86]; // let kernel = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; kernel.forEach((k, i) => { inputs[i].value = k; inputs[i].addEventListener('input', evt => { let change = kernel[i] - +evt.target.value; kernel[i] = +evt.target.value; }); }); ui.value = kernel; ui.dispatchEvent(new CustomEvent('change')); return ui; }33:[] 2f:{"title":"SVG Filters - feColorMatrix","cells":[{"id":0,"value":"md`# SVG Filters - feColorMatrix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { createSVG, d3 } from \"@pstuffa/helpers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`Recreating a great walkthrough done on SVG filter __feColorMatrix__ by [Una Kravets](http://alistapart.com/article/finessing-fecolormatrix). I've been interested in learning more about this SVG filter, as it's used in so many examples, such as Nadieh Bremer's [Gooey Effects](http://bl.ocks.org/nbremer/3da658e9a21cd3c71d0819f9698f3bfa) and Noah Veltman's [Pencil and Watercolor Effects](https://bl.ocks.org/veltman/2f2aa947772afa095a620dfe5e5486cb).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"md`[Formally](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix): \n\n_The SVG filter element changes colors based on a transformation matrix. Every pixel's color value (represented by an [R,G,B,A] vector) is matrix multiplied to create a new color._\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"md`Let's use Observable to explore this filter.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"md`## Simple RGBA Color Matrix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":573,"value":"md`feColorMatrix takes a 5 by 4 matrix to create a color. This diagram does a great job explaining how it works:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"cImg = await new Promise((resolve, reject) => {\n let i = new Image();\n i.onload = () => resolve(i);\n i.onerror = reject;\n i.src = 'https://alistapart.com/wp-content/uploads/2016/02/fig-05-color-matrix-visual.jpg';\n i.width = width;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"md`The filter effect provides extensive control over the different rgba values in each channel. M here stands for multiplier. You can edit these inputs to see how it affects the color.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"viewof r = slider({\n min: 0, \n max: 1, \n step: .1, \n value: 1, \n title: \"R\", \n description: \"Red value\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof g = slider({\n min: 0, \n max: 1, \n step: .1, \n value: 0, \n title: \"G\", \n description: \"Green value\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"viewof b = slider({\n min: 0, \n max: 1, \n step: .1, \n value: 1, \n title: \"B\", \n description: \"Blue value\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"viewof a = slider({\n min: 0, \n max: 1, \n step: .1, \n value: 1, \n title: \"A\", \n description: \"Alpha value\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"viewof m = slider({\n min: 0, \n max: 1, \n step: .1, \n value: 0, \n title: \"M\", \n description: \"Multiplier value\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"matrixValues = parseMatrix(matrix1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"Result = {\n \n const svg = d3.select(createSVG(width/4, height/4));\n \n const filter = DOM.uid(\"color\");\n const defs = svg.append(\"defs\");\n\tconst matrix = defs.append(\"filter\").attr(\"id\", filter.id);\n \n\tmatrix.append(\"feColorMatrix\")\n .attr(\"type\",\"matrix\")\n\t\t.attr(\"values\", matrixValues);\n \n svg.append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"fill\", \"#fff\")\n .style(\"filter\", filter)\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`## Matrix Multiplaction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"md`We can do matrix multiplication to combine colors. Here is yellow:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"viewof r2 = slider({\n min: 0, \n max: 1, \n step: .1, \n value: 1, \n title: \"R\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"viewof g2 = slider({\n min: 0, \n max: 1, \n step: .1, \n value: 1, \n title: \"G\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"viewof b2 = slider({\n min: 0, \n max: 1, \n step: .1, \n value: 0, \n title: \"B\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"viewof a2 = slider({\n min: 0, \n max: 1, \n step: .1, \n value: 1, \n title: \"A\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"viewof m2 = slider({\n min: 0, \n max: 1, \n step: .1, \n value: 0, \n title: \"M\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":926,"value":"matrix2Values = parseMatrix(matrix2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"Result2 = {\n \n const svg = d3.select(createSVG(width/4, height/4));\n \n const filter = DOM.uid(\"color\");\n const defs = svg.append(\"defs\");\n\tconst matrix = defs.append(\"filter\").attr(\"id\", filter.id);\n \n\tmatrix.append(\"feColorMatrix\")\n .attr(\"type\",\"matrix\")\n\t\t.attr(\"values\", matrix2Values);\n \n svg.append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"fill\", \"#fff\")\n .style(\"filter\", filter)\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"md`And of course, yellow x magenta = red`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"multiMatrixValues = parseMatrix(multiplyMatrix(matrix1, matrix2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"Result3 = {\n \n const svg = d3.select(createSVG(width/4, height/4));\n \n const filter = DOM.uid(\"color\");\n const defs = svg.append(\"defs\");\n\tconst matrix = defs.append(\"filter\").attr(\"id\", filter.id);\n \n\tmatrix.append(\"feColorMatrix\")\n .attr(\"type\",\"matrix\")\n\t\t.attr(\"values\", multiMatrixValues);\n \n svg.append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"fill\", \"#fff\")\n .style(\"filter\", filter)\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"md`For reference, this is how color combinations work here. You can see how magenta and yellow now equal red.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"colors = await new Promise((resolve, reject) => {\n let i = new Image();\n i.onload = () => resolve(i);\n i.onerror = reject;\n i.src = 'https://alistapart.com/wp-content/uploads/2016/02/fig-08-rgb.png';\n i.width = 200;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"md`## Filtering Images`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`The __in__ attribute allows you to take an input, here an image of [Victor Vasarely's _Tigres - 1938_](https://www.wikiart.org/en/victor-vasarely/tigres-1938), by providing the __SourceGraphic__ attribute.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"tigres = {\n \n const svg = d3.select(createSVG(width, height))\n \n svg.append(\"image\")\n .attr(\"xlink:href\", \"https://uploads6.wikiart.org/images/victor-vasarely/tigres-1938.jpg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"md`When we apply the filter to the image, what we're getting is not just a simple mask. It's taking the source graphic and running a matrix multiplication on the colors from the image and the matrix we created. This will emphasize the natural colors in the image.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"imageMatrix = {\n \n const svg = d3.select(createSVG(width, height))\n \n const filter = DOM.uid(\"color\");\n const defs = svg.append(\"defs\");\n\tconst imageMatrix = defs.append(\"filter\").attr(\"id\", filter.id);\n \n\timageMatrix.append(\"feColorMatrix\")\n .attr(\"in\", \"SourceGraphic\")\n .attr(\"type\",\"matrix\")\n\t\t.attr(\"values\", multiMatrixValues);\n \n svg.append(\"image\")\n .attr(\"xlink:href\", \"https://uploads6.wikiart.org/images/victor-vasarely/tigres-1938.jpg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"filter\", filter)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"md`This is what it would look like with a masking technique. See the difference?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"rectApproach = {\n \n const svg = d3.select(createSVG(width, height))\n \n svg.append(\"image\")\n .attr(\"xlink:href\", \"https://uploads6.wikiart.org/images/victor-vasarely/tigres-1938.jpg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n \n svg.append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"opacity\", .5)\n .style(\"fill\", \"red\")\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"md`## Going Beyond 0s and 1s`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`Something interesting happens when you change the values to beyond 0 and 1. We can really bring out the softer tones by bumping up their values, like the yellows in the painting.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"viewof r3 = slider({\n min: -10, \n max: 10, \n step: .1, \n value: 2, \n title: \"R\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"viewof g3 = slider({\n min: -10, \n max: 10, \n step: .1, \n value: 6, \n title: \"G\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"viewof b3 = slider({\n min: -10, \n max: 10, \n step: .1, \n value: 0, \n title: \"B\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"viewof a3 = slider({\n min: -10, \n max: 10, \n step: .1, \n value: 1, \n title: \"A\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"viewof m3 = slider({\n min: -10, \n max: 10, \n step: .1, \n value: 0, \n title: \"M\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"md`You can also do smooth transitions between matrix values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"md`## Full Customizations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"md`Here's a slider that allows you to modify each value in the matrix. You can see with this matrix, I've selected just the reds without green and blues and the greens in the blue channel.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"fullyCustom = {\n \n const svg = d3.select(createSVG(width, height))\n \n const filter = DOM.uid(\"color\");\n const defs = svg.append(\"defs\");\n\tconst fullMatrix = defs.append(\"filter\").attr(\"id\", filter.id);\n\n\tfullMatrix.append(\"feColorMatrix\")\n .attr(\"in\", \"SourceGraphic\")\n .attr(\"type\",\"matrix\")\n\t\t.attr(\"values\", kernel.toString().replace(/[ ]*,[ ]*|[ ]+/g, ' '));\n \n const image = svg.append(\"image\")\n .attr(\"xlink:href\", \"https://uploads6.wikiart.org/images/victor-vasarely/tigres-1938.jpg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"filter\", filter)\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"md`It can be pretty mesmerizing to apply this random filter effect to various pieces of art. I particularly like when you apply it to black and white paintings.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"randomChanges = {\n \n const svg = d3.select(createSVG(width, height))\n \n const filter = DOM.uid(\"color\");\n const defs = svg.append(\"defs\");\n\tconst crazyMatrix = defs.append(\"filter\").attr(\"id\", filter.id);\n\n\tcrazyMatrix.append(\"feColorMatrix\")\n .attr(\"in\", \"SourceGraphic\")\n .attr(\"type\",\"matrix\")\n\t\t.attr(\"values\", randomMatrix());\n \n const image = svg.append(\"image\")\n .attr(\"xlink:href\", \"https://uploads6.wikiart.org/images/victor-vasarely/tigres-1938.jpg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"filter\", filter)\n \n \nd3.interval(() => {\n\n crazyMatrix.select(\"feColorMatrix\")\n .transition()\n .duration(3000)\n\t\t.attr(\"values\", randomMatrix());\n\n image.style(\"filter\", filter)\n \n }, 3000)\n \n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"multiplyMatrix = (a, b) => {\n let resultArray = [];\n a.forEach((row, index) => { \n let rowArray = [];\n row.forEach((d,i) => {\n rowArray.push(d * b[index][i])\n })\n resultArray.push(rowArray);\n })\n return resultArray;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"rando = () => { return d3.randomBates(1) }","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"randomMatrix = () => { return d3.range(20).map(d3.randomNormal()).toString() } ","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"muchLessRando = () => { return d3.randomUniform(0.1, .25)() }","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"parseMatrix = (matrix) => {\n let returnString = \"\";\n \n matrix.forEach((row, index) => {\n row.forEach((d,i) => {\n returnString += `${d} `; \n })\n returnString += ` `; \n })\n \n return returnString;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"matrix1 = [[r, 0, 0, 0, m],[0, g, 0, 0, m],[0, 0, b, 0, m],[0, 0, 0, a, m]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"matrix2 = [[r2, 0, 0, 0, m2],[0, g2, 0, 0, m2],[0, 0, b2, 0, m2],[0, 0, 0, a2, m2]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"matrix3 = [[r3, 0, 0, 0, m3],[0, g3, 0, 0, m3],[0, 0, b3, 0, m3],[0, 0, 0, a3, m3]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}