2c:null 2d:["$","title",null,{"children":"Фильтры SVG - feColorMatrix | Сандро | Observable"}] 32: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() }33: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; }34:[] 30:{"id":"8959aeaf9d7eb05a","slug":"n-svg-fecolormatrix","title":"Фильтры SVG - feColorMatrix","thumbnail":"2768f43dfa755ce441e11e1961fda91bc803e93d8ae59827dfcf70f882174f99","access_level":"public","create_time":"$D2018-07-28T13:10:28.250Z","update_time":"$D2018-07-28T13:50:01.412Z","view_time":null,"first_public_time":"$D2018-07-28T13:50:34.099Z","has_unpublished_edits":null,"fork":{"id":"98cca0c71a7d9843","slug":"svg-filters-fecolormatrix","title":"SVG Filters - feColorMatrix","owner":{"id":"d9d161ec29750ad6","login":"pstuffa","name":"Paul Buffa"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0a9c12baacff9b60","login":"warsan","name":"Сандро","avatar_url":"https://avatars-next.observableusercontent.com/cf4f78e2c53176203f3eb5eb7ee079333d13912a4ee31aa34166dd94146f522f","tier":"starter_2024"},"version":1035,"publish_version":1035,"role":null,"authored":false,"authors":[{"type":"individual","id":"3a697b2116f96092","login":"warsan","name":"Сандро","avatar_url":"https://avatars-next.observableusercontent.com/cf4f78e2c53176203f3eb5eb7ee079333d13912a4ee31aa34166dd94146f522f","tier":null}],"members":[{"type":"individual","id":"3a697b2116f96092","login":"warsan","name":"Сандро","avatar_url":"https://avatars-next.observableusercontent.com/cf4f78e2c53176203f3eb5eb7ee079333d13912a4ee31aa34166dd94146f522f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Фильтры SVG - feColorMatrix","cells":[{"id":0,"value":"md`# Фильтры SVG - feColorMatrix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import { createSVG, d3 } from \"@pstuffa/helpers\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`Воспроизведение большого прохода, выполненного на фильтре SVG __feColorMatrix__ от [Una Kravets](http://alistapart.com/article/finessing-fecolormatrix). \nМне было интересно узнать больше об этом SVG-фильтре, поскольку он используется во многих примерах, таких как [Gooey Effects](http://bl.ocks.org/nbremer/3da658e9a21cd3c71d0819f9698f3bfa) Надих Бремера и Noah Veltman's [Карандаш и Акварельные эффекты](https://bl.ocks.org/veltman/2f2aa947772afa095a620dfe5e5486cb). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"md`[Формально](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix): \n\n_Элемент фильтра SVG меняет цвета на основе матрицы преобразования. \nЗначение цвета каждого пикселя (представленное вектором [R,G,B,A]) умножается на матрицу, чтобы создать новый цвет._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"md`Давайте используем Observable для изучения этого фильтра.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`## Простая цветовая матрица RGBA`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"md`Для создания цвета feColorMatrix занимает 5 × 4 матрицы. Эта диаграмма отлично справляется с описанием её работы:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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/d/finessingFeColorMatrix/fig-05-color-matrix-visual-2x.jpg';\n i.width = width;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"md`Эффект фильтра обеспечивает широкий контроль над различными значениями rgba в каждом канале. Здесь M обозначает множитель. Вы можете редактировать эти входы, чтобы увидеть, как это влияет на цвет.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"viewof r = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"viewof g = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"viewof b = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof a = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"viewof m = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"matrixValues = parseMatrix(matrix1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`## Матричная мультипликация`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"md`Мы можем сделать умножение матрицы для комбинирования цветов. Вот желтый цвет:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"viewof r2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof g2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"viewof b2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"viewof a2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"viewof m2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"matrix2Values = parseMatrix(matrix2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"md`И, конечно, желтый x пурпур = красный `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"multiMatrixValues = parseMatrix(multiplyMatrix(matrix1, matrix2))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"md`Для справки, вот как работают цветовые комбинации. \nВы можете видеть, как пурпурный и желтый теперь красные.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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/d/finessingFeColorMatrix/fig-08-rgb.png';\n i.width = 200;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"md`## Фильтрация изображений`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`Атрибут __in__ позволяет вам видеть здесь изображение \n[Victor Vasarely's _Tigres - 1938_](https://www.wikiart.org/en/victor-vasarely/tigres-1938), предоставляя атрибут __SourceGraphic__.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`Когда мы применяем фильтр к изображению, то, что мы получаем, - это не просто маска. Он берет исходную графику и выполняет умножение матрицы на цвета изображения и матрицы, которые мы создали. Это подчеркнет естественные цвета изображения.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"md`Это будет выглядеть с помощью маскировки. Увидели разницу?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"md`## Переход за пределы простых 0s и 1s`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"md`Что-то интересное происходит, когда вы меняете значения на 0 и 1. Мы можем действительно вывести более мягкие тона, нажимая их значения, например, желтые на картине.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"viewof r3 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"viewof g3 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"viewof b3 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"viewof a3 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"viewof m3 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":936,"value":"md`Вы также можете выполнять плавные переходы между значениями матрицы.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"md`## Полная настройка`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"md`Вот слайдер, который позволяет изменять каждое значение в матрице. Вы можете увидеть эту матрицу, я выбрал только красные, без зеленого и синего, и зелень в синем канале.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"md`Это может быть довольно завораживающим, чтобы применить этот случайный фильтр к различным произведениям искусства. Особенно мне нравится, когда вы применяете его к черно-белым рисункам.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"zebra = {\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://skinnerinc-res.cloudinary.com/images//v1442950246/1084440/victor-vasarely-frenchhungarian-1906-1997-zebra.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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"rando = () => { return d3.randomBates(1) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"randomMatrix = () => { return d3.range(20).map(d3.randomNormal()).toString() } ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"muchLessRando = () => { return d3.randomUniform(0.1, .25)() }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"