30:T4db,{ const svg = d3.select(createSVG(width, height)) const filter = DOM.uid("color"); const defs = svg.append("defs"); const fullMatrix = defs.append("filter").attr("id", filter.id); fullMatrix.append("feColorMatrix") .attr("in", "SourceGraphic") .attr("type","matrix") .attr("values", normal.toString().replace(/[ ]*,[ ]*|[ ]+/g, ' ')); const image = svg.append("image") .attr("xlink:href", "https://user-images.githubusercontent.com/8422826/46701610-4714ca80-cbee-11e8-8a82-bf94827742d6.jpg") .attr("width", width) .attr("height", height) .style("filter", filter) fullMatrix.select("feColorMatrix") .transition() .duration(7000) .attr("values", red.toString().replace(/[ ]*,[ ]*|[ ]+/g, ' ')); let i = 0; let t = d3.interval(() => { if(i == 0) { fullMatrix.select("feColorMatrix") .transition() .duration(7000) .attr("values", darkcolor.toString().replace(/[ ]*,[ ]*|[ ]+/g, ' ')); i = 1; } else { fullMatrix.select("feColorMatrix") .transition() .duration(7000) .attr("values", normal.toString().replace(/[ ]*,[ ]*|[ ]+/g, ' ')); i = 0; } }, 8000) return svg.node() }31: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 = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 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; }32:[] 2e:{"title":"Mood Shifting","cells":[{"id":1058,"value":"md`# Mood Shifting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"md`If you're interested to learn more about the feColorMatrix technique, check out an [earlier notebook](https://beta.observablehq.com/@pstuffa/svg-filters-fecolormatrix) I made on it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"normal = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1158,"value":"red = [1.03, 0.38, -0.74, -0.57, 0.29, 0, 1, 5.78, -19.16, 0, 0, 0, 3.6, -20, 14.95, 0.68, 3.25, -2.7, 13.37, 7.3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1160,"value":"darkcolor = [20, 0.38, 0.15, -20, -1.87, -19.08, 8.63, -20, -7.4, -1.49, -20, 0, -20, -12.78, 14.95, 1.49, 11.84, 3.49, -1.33, 1.26]","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"width = window.innerWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"height = width * (8/15)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { createSVG, d3 } from \"@pstuffa/helpers\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}