2d:null 2e:["$","title",null,{"children":"SVG Filters - feTurbulence | Paul Buffa | Observable"}] 33:T4a8,Composite = { const svg = d3.select(createSVG(width, height)); const filter = DOM.uid("noise"); const defs = svg.append("defs"); const turbulence = defs.append("filter").attr("id", filter.id); turbulence.append("feTurbulence") .attr("y","0px") .attr("height",height) .attr("result","waves") .attr("type","turbulence") .attr("baseFrequency", `${baseFrequency} ${baseFrequencyTwo}`) .attr("numOctaves", numOctaves) .attr("seed", seed); turbulence.append("feDisplacementMap") .attr("in","SourceGraphic") .attr("in2","waves") .attr("height", height) .attr("scale", scale) .attr("xChannelSelector", "R") .attr("yChannelSelector", "B") .attr("result","ripples"); turbulence.append("feComposite") .attr("in","waves") .attr("in2","ripples") .attr("operator", "arithmetic") .attr("k1", k1) .attr("k2", k2) .attr("k3", k3) .attr("k4", k4); svg.append("circle") .attr("cx", width/2) .attr("cy", height/2) .attr("r", d3.min([width,height], (d) => d)/2) .style("fill", circleFill) .style("filter", filter) return svg.node(); }34:Tc5d,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 = [20, 20, 2.54, 10.35, -6.95, -20, 20, -20, -20, 2.69, -20, -20, 20, 20, -1.57, 20, 20, 0.99, -8.35, -0.28]; // let kernel = [20, -20, -20, 20, 0, 20, -20, -20, -20, 0, 20, -20, 20, 20, 0, // -20, 0.02, 0, 1, 0]; // let kernel = [20, -20, -20, 20, 20, 20, -20, -20, -20, -20, 20, -20, 20, 20, -20, -20, 0.02, 0, 1, 0.59] 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; }35:T565,Matrix = { const svg = d3.select(createSVG(width, height)); const filter = DOM.uid("noise"); const defs = svg.append("defs"); const turbulence = defs.append("filter").attr("id", filter.id); turbulence.append("feTurbulence") .attr("y","0px") .attr("height",height) .attr("result","waves") .attr("type","turbulence") .attr("baseFrequency", `${baseFrequency} ${baseFrequencyTwo}`) .attr("numOctaves", numOctaves) .attr("seed", seed); turbulence.append("feDisplacementMap") .attr("in","SourceGraphic") .attr("in2","waves") .attr("height", height) .attr("scale", scale2) .attr("xChannelSelector", "G") .attr("yChannelSelector", "B") .attr("result","ripples"); turbulence.append("feComposite") .attr("in","waves") .attr("in2","ripples") .attr("operator", "arithmetic") .attr("result","compo") .attr("k1", k1) .attr("k2", k2) .attr("k3", k3) .attr("k4", k4); turbulence.append("feColorMatrix") .attr("in", "compo") .attr("type","matrix") .attr("values", kernel.toString().replace(/[ ]*,[ ]*|[ ]+/g, ' ')); svg.append("circle") .attr("cx", width/2) .attr("cy", height/2) .attr("r", d3.min([width,height], (d) => d)/2) .style("fill", circleFill) .style("filter", filter) return svg.node(); }36:T743,whoa = { const svg = d3.select(createSVG(width, height)); const filter = DOM.uid("noise"); const defs = svg.append("defs"); const turbulence = defs.append("filter").attr("id", filter.id); const feTurbulence = turbulence.append("feTurbulence") .attr("y","0px") .attr("height",height) .attr("result","waves") .attr("type","turbulence") .attr("baseFrequency", `${baseFrequency} ${baseFrequencyTwo}`) .attr("numOctaves", numOctaves) .attr("seed", seed); const feDisplacementMap = turbulence.append("feDisplacementMap") .attr("in","SourceGraphic") .attr("in2","waves") .attr("height", height) .attr("scale", scale2) .attr("xChannelSelector", "G") .attr("yChannelSelector", "B") .attr("result","ripples"); turbulence.append("feComposite") .attr("in","waves") .attr("in2","ripples") .attr("operator", "arithmetic") .attr("result","compo") .attr("k1", k1) .attr("k2", k2) .attr("k3", k3) .attr("k4", k4); turbulence.append("feColorMatrix") .attr("in", "compo") .attr("type","matrix") .attr("values", kernel.toString().replace(/[ ]*,[ ]*|[ ]+/g, ' ')); const circle = svg.append("circle") .attr("cx", width/2) .attr("cy", height/2) .attr("r", d3.min([width,height], (d) => d)/2) .style("fill", circleFill) .style("filter", filter) const rate = 2000; d3.interval(() => { feDisplacementMap .transition() .duration(rate) .attr("scale", () => { return Math.random()*500 * ( Math.random() > .5 ? -1 : 1) }); feTurbulence .transition() .duration(rate) .attr("baseFrequency", () => { return `${Math.random()} ${Math.random()}` }) circle.style("filter", filter); }, rate) return svg.node(); }37:[] 31:{"id":"4d8a85b6b103d1d6","slug":"svg-filters-feturbulence","title":"SVG Filters - feTurbulence","thumbnail":"1dc40fe901570c861a4c27e0aba19af7babbb1ad7456811bbf5864c0fba4bb03","access_level":"public","create_time":"$D2018-06-27T23:47:01.313Z","update_time":"$D2024-11-22T16:51:41.099Z","view_time":null,"first_public_time":"$D2018-07-23T20:43:24.298Z","has_unpublished_edits":null,"fork":false,"stars":26,"starred":false,"owner":{"type":"team","id":"d9d161ec29750ad6","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":"starter_2024"},"version":420,"publish_version":420,"role":null,"authored":false,"authors":[{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null}],"members":[{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"f3339fc4212e7cd6","slug":"svg-filter-effects","title":"SVG Filter Effects","owner":{"id":"d9d161ec29750ad6","login":"pstuffa","name":"Paul Buffa"}},"type":"notebook","body":{"title":"SVG Filters - feTurbulence","cells":[{"id":0,"value":"md`# SVG Filters - feTurbulence`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import { createSVG, d3, jitter } from \"@pstuffa/helpers\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"md`## feTurbulence`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"md`There are many ways to make noise filters, and SVG has a filter effect called __feTurbulence__ that can the job. Let's explore how this filter works and try ways you could apply it.\n\n[Definition](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence):
\nfeTurbulence SVG filter primitive creates an image using the Perlin turbulence function. It allows the synthesis of artificial textures like clouds or marble. The resulting image will fill the entire filter primitive subregion.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"md`Here is what it can look like. Pretty sweet, right?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"low = {\n \n const svg = d3.select(createSVG(width, height));\n \n const filter = DOM.uid(\"noise\");\n const defs = svg.append(\"defs\");\n\tconst turbulence = defs.append(\"filter\").attr(\"id\", filter.id);\n \n\tturbulence.append(\"feTurbulence\")\n\t .attr(\"y\",\"0px\")\n\t .attr(\"height\",height)\n\t .attr(\"result\",\"waves\")\n\t .attr(\"type\",\"turbulence\")\n\t\t .attr(\"baseFrequency\", `${.02} ${.02}`)\n\t\t .attr(\"numOctaves\", numOctaves)\n\t\t .attr(\"seed\", seed);\n\n svg.append(\"circle\")\n .attr(\"cx\", width/2)\n .attr(\"cy\", height/2)\n .attr(\"r\", d3.min([width,height], (d) => d)/2)\n .style(\"filter\", filter)\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"md`There are three main levers for feTurbulence: __seed__, __number of octaves__, and __base frequency__. Base frequency can take one or two intergers as its value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"viewof seed = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"viewof numOctaves = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"viewof baseFrequency = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"viewof baseFrequencyTwo = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"md`By lowering the base frequencies, you get less noise. I think of them as a sort of zoom on the seed + number of octaves.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"Result = {\n \n const svg = d3.select(createSVG(width, height));\n \n const filter = DOM.uid(\"noise\");\n const defs = svg.append(\"defs\");\n\tconst turbulence = defs.append(\"filter\").attr(\"id\",filter.id);\n \n\tturbulence.append(\"feTurbulence\")\n\t .attr(\"y\",\"0px\")\n\t .attr(\"height\",height)\n\t .attr(\"result\",\"waves\")\n\t .attr(\"type\",\"turbulence\")\n\t\t .attr(\"baseFrequency\", `${baseFrequency} ${baseFrequencyTwo}`)\n\t\t .attr(\"numOctaves\", numOctaves)\n\t\t .attr(\"seed\", seed);\n\n svg.append(\"circle\")\n .attr(\"cx\", width/2)\n .attr(\"cy\", height/2)\n .attr(\"r\", d3.min([width,height], (d) => d)/2)\n .style(\"filter\", filter)\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"md`## feDiplacementMap`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"md`Then you can apply this to other SVG objects using another SVG filter, __feDisplacementMap__. This takes a scale input, which moves the map over the object.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"viewof circleFill = color(\"#00e8db\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"viewof scale = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"Displace = {\n \n const svg = d3.select(createSVG(width, height));\n \n const filter = DOM.uid(\"noise\");\n const defs = svg.append(\"defs\");\n\tconst turbulence = defs.append(\"filter\").attr(\"id\", filter.id);\n \n\tturbulence.append(\"feTurbulence\")\n\t .attr(\"y\",\"0px\")\n\t .attr(\"height\",height)\n\t .attr(\"result\",\"waves\")\n\t .attr(\"type\",\"turbulence\")\n\t\t .attr(\"baseFrequency\", `${baseFrequency} ${baseFrequencyTwo}`)\n\t\t .attr(\"numOctaves\", numOctaves)\n\t\t .attr(\"seed\", seed);\n \n turbulence.append(\"feDisplacementMap\")\n .attr(\"in\",\"SourceGraphic\")\n .attr(\"in2\",\"waves\")\n .attr(\"height\", height)\n .attr(\"scale\", scale)\n .attr(\"xChannelSelector\", \"G\")\n .attr(\"yChannelSelector\", \"B\")\n\t .attr(\"result\",\"ripples\");\n\n svg.append(\"circle\")\n .attr(\"cx\", width/2)\n .attr(\"cy\", height/2)\n .attr(\"r\", d3.min([width,height], (d) => d)/2)\n .style(\"fill\",circleFill)\n .style(\"filter\", filter)\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"md`## feComposite`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`If you still want the texture of the noise, or even its color, you can use __feComposite__ to combine two visual inputs. The four levers control the mix. There are other defaults you can use if you don't want to control the specific mix.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"viewof k1 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"viewof k2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"viewof k3 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"viewof k4 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"md`## feColorMatrix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"md`Wanna have more fun with it? Apply a __feColorMatrix__ and mess with the natural colors of the noise. If you want to learn more about feColorMatrix, check out [this other observable piece I made](https://beta.observablehq.com/@pstuffa/svg-filters-fecolormatrix). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof scale2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"