30:[] 2e:{"title":"Squiggly","cells":[{"id":0,"value":"# Squiggly","pinned":false,"hidden":false,"mode":"md"},{"id":787,"value":"sketch.node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":861,"value":"

\n Squiggly\n

– with –

\n SVG Filters\n

","pinned":false,"hidden":false,"mode":"html"},{"id":736,"value":"viewof speed = Inputs.range([.5, 10], {label: \"Speed\", value: 3, step: .1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"viewof fontWeight = Inputs.range([0, 1000], {label: \"Font Weight\", value: 500, step: 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"viewof frequency = Inputs.range([0, 1], {label: \"Frequency\", value: .01, step: .01})","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"viewof octaves = Inputs.range([0, 10], {label: \"Octaves\", value: 4, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"viewof scale = Inputs.range([1, 50], {label: \"Scale\", value: 10, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"Apply each of the filters in sequence. Works on both html text and svg images.","pinned":false,"hidden":false,"mode":"md"},{"id":1092,"value":"Inspirational source: [Squiggle Text « Lucas Bebber « Codepen](https://codepen.io/lbebber/pen/KwGEQv)","pinned":true,"hidden":false,"mode":"md"},{"id":1095,"value":"The squiggle effect is created using:\n* [feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence)—synthesis of artificial textures like clouds or marble;\n * [baseFrequency](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/baseFrequency)—noise base frequency;\n * [numOctaves](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/numOctaves)—noise ‘naturalness’;\n * [seed](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/seed)—starting number for random number generator;\n* [feDisplacementMap](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap)—spatially displaces an image:\n * [scale](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/scale)—displacement scale factor.","pinned":false,"hidden":false,"mode":"md"},{"id":1030,"value":"The list of `seeds[]` determines the number of filters and their seeds.\nThe same seed always has the same effect. Therefore, create a small handful of turbulence filters using different seeds and rotate through them.","pinned":false,"hidden":false,"mode":"md"},{"id":784,"value":"seeds = \n// [1,2,3,4,5]\n[1,2,3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1159,"value":"The cell below selects the appropriate node and rotates through the filters: `${filter}`.","pinned":false,"hidden":false,"mode":"md"},{"id":789,"value":"filter = { // loop text and svg attributes through the available squiggle filters\n const filter = `squiggle-${i}`;\n sketch.attr(\"filter\", `url(#${filter})`); // sketch\n d3.select(\"body\").selectAll(\"#shiver\").attr(\"class\", `squiggle _${i}`); // text\n return filter;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"sketch = sunset({seeds, frequency, scale, octaves})","pinned":true,"hidden":false,"mode":"ojs"},{"id":790,"value":"// takes the squiggle confuguration paramenters\n// creates and returns the svg with a simple squiggled ‘sunset’/‘sunrise’ image\n\nsunset = ({seeds = [], id = \"squiggle\", frequency = 0.035, scale = 7, octaves = 1} = {}) => {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", width / 16 * 4)\n ;\n\n squiggle({pad: svg, seeds, frequency, scale, octaves});\n\n const g = svg//.append(\"g\")\n g.append(\"circle\")\n .attr(\"cx\", 100).attr(\"cy\", 100).attr(\"r\", 80)\n .attr(\"fill\", \"black\")\n ;\n g.append(\"line\")\n .attr(\"x1\", 120).attr(\"y1\", 50).attr(\"x2\", 220).attr(\"y2\", 50)\n .attr(\"stroke\", \"red\").attr(\"stroke-width\", 2)\n ;\n g.append(\"line\")\n .attr(\"x1\", 100).attr(\"y1\", 70).attr(\"x2\", 250).attr(\"y2\", 70)\n .attr(\"stroke\", \"red\").attr(\"stroke-width\", 2)\n ;\n g.append(\"text\")\n .attr(\"x\", 100).attr(\"y\", 100)\n .attr(\"fill\", \"white\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"x-large\")\n .attr(\"text-anchor\", \"middle\")\n ;\n\n return svg;\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":786,"value":"// takes configuration object that includes the pad to use\n// injects the filters into the pad at top level (i.e. not in separate defs section)\n\nsquiggle = ({pad, seeds = [], id = \"squiggle\", frequency = 0.035, scale = 7, octaves = 1} = {}) => {\n\n const filter = pad\n .selectAll(\"filter\")\n .data(seeds)\n .join(\"filter\")\n .attr(\"id\", (seed) => `${id}-${seed}`)\n ;\n filter\n .append(\"feTurbulence\")\n .attr(\"baseFrequency\", frequency)\n .attr(\"numOctaves\", octaves)\n .attr(\"seed\", d => d)\n ;\n filter\n .append(\"feDisplacementMap\")\n .attr(\"in\", \"SourceGraphic\")\n .attr(\"scale\", scale)\n ;\n return md`Total of ${seeds.length} filters injected.`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":788,"value":"i = pulsar(seeds, speed)\n// viewof i = Inputs.radio(seeds, {value: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"// takes a list and a frequency\n// yields every element from the list every 1/frequency seconds\n\nfunction* pulsar(list, frequency) {\n let i = 0;\n yield list[i];\n do {\n yield Promises.tick(1000 / frequency, list[i]);\n i = (i + 1) % list.length;\n } while (true);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":996,"value":"filterStyles = (list) => list.map((seed) => `._${seed} {filter: url(#squiggle-${seed});}`).join(\"\\n\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}