28:null 29:["$","title",null,{"children":"Squiggly | Martien van Steenbergen | Observable"}] 2e:[] 2c:{"id":"e3cf583d52ddf8e4","slug":"squiggly","title":"Squiggly","thumbnail":"1db91ddd9b62a4e19483e4c2fcf012aa0b8e4163444914f6e0b5fd40034e1e13","access_level":"public","create_time":"$D2021-12-26T12:58:08.643Z","update_time":"$D2022-01-02T11:32:24.330Z","view_time":null,"first_public_time":"$D2021-12-31T15:10:35.844Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":"starter_2024"},"version":1174,"publish_version":1174,"role":null,"authored":false,"authors":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}],"members":[{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"62795b4bfedca5a7","slug":"arty","title":"Arty","owner":{"id":"6e89ba4444f0cc85","login":"martien","name":"Martien van Steenbergen"}},"type":"notebook","body":{"title":"Squiggly","cells":[{"id":0,"value":"# Squiggly","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":787,"value":"sketch.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"

\n Squiggly\n

– with –

\n SVG Filters\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":736,"value":"viewof speed = Inputs.range([.5, 10], {label: \"Speed\", value: 3, step: .1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"viewof fontWeight = Inputs.range([0, 1000], {label: \"Font Weight\", value: 500, step: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"viewof frequency = Inputs.range([0, 1], {label: \"Frequency\", value: .01, step: .01})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"viewof octaves = Inputs.range([0, 10], {label: \"Octaves\", value: 4, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"viewof scale = Inputs.range([1, 50], {label: \"Scale\", value: 10, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"Apply each of the filters in sequence. Works on both html text and svg images.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1092,"value":"Inspirational source: [Squiggle Text « Lucas Bebber « Codepen](https://codepen.io/lbebber/pen/KwGEQv)","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":784,"value":"seeds = \n// [1,2,3,4,5]\n[1,2,3]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"The cell below selects the appropriate node and rotates through the filters: `${filter}`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1048,"value":"sketch = sunset({seeds, frequency, scale, octaves})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"i = pulsar(seeds, speed)\n// viewof i = Inputs.radio(seeds, {value: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":996,"value":"filterStyles = (list) => list.map((seed) => `._${seed} {filter: url(#squiggle-${seed});}`).join(\"\\n\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"